wpfで柔軟な画像ボタンをデザインしたい。
まず、次のようにnameSpace'ImageButton'にWPFカスタムコントロールライブラリを作成します。
namespace ImageButton
{
public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}
#region DisplayMode
[System.ComponentModel.Category("ImageButton")]
public ImageDisplayMode DisplayMode
{
get { return (ImageDisplayMode)GetValue(DisplayModeProperty); }
set { SetValue(DisplayModeProperty, value); }
}
public static readonly DependencyProperty DisplayModeProperty =
DependencyProperty.Register("DisplayMode", typeof(ImageDisplayMode), typeof(ImageButton), new FrameworkPropertyMetadata(ImageDisplayMode.ImageAboveText), displaymodevalidate);
public static bool displaymodevalidate(object value)
{
return value is ImageDisplayMode;
}
#endregion
}
}
名前空間「ImageButton」で、次のように「ImageDisplayMode」という名前の列挙型を定義します。
public enum ImageDisplayMode
{
ImageAboveText = 1,
TextAboveImage = 2,
ImageBeforeText = 3,
TextBeforeImage = 4
}
Generic.xamlファイルは次のように変更されます。
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ImageButton">
<Style x:Name="style1" TargetType="{x:Type local:ImageButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ImageButton}">
<Button Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.ColumnSpan="2" Name="img1" Width="{TemplateBinding ImageWidth}" Stretch="{TemplateBinding ImageStretch}" Height="{TemplateBinding ImageHeight}" Source="{TemplateBinding Image}"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Name="lbl1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Text}"/>
</Grid>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
上記のコードの結果は図の下にあります:
【画像】
テキスト
欲しい:imagebuttonの'DisplayMode'プロパティの値を変更すると、可能な値ごとに、コントロールが以下のフォームに変更されます。
1-------------------------------------
[画像]
テキスト
2-------------------------------------
テキスト
[画像]
3-------------------------------------
[画像]テキスト
4--------------------------------------
テキスト[画像]
私は推測します、私は以下のようなGeneric.xamlコードのグリッドでトリガーを定義する必要があります:
<Grid.Triggers>
<Trigger Property="DisplayMode" Value="2">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
</Grid.Triggers>
教えてください:
どうすればいいですか?
どうもありがとうございます