WPF TemplateBinding與Binding區別及自定義ImageButton
阿新 • • 發佈:2018-11-04
TemplateBinding與Binding區別在於
1:TemplateBinding只是單方向的資料繫結
2:TemplateBinding不會自動轉換資料型別
這裡用一個自定義ImageButton驗證下第2條:
public class ImageButton : Button { public BitmapSource NormalImage { get { return (BitmapSource)GetValue(NormalImageProperty); } set { SetValue(NormalImageProperty, value); } } public static readonly DependencyProperty NormalImageProperty = DependencyProperty.Register("NormalImage", typeof(BitmapSource), typeof(ImageButton), new PropertyMetadata(null)); public BitmapSource HoverImage { get { return (BitmapSource)GetValue(HoverImageProperty); } set { SetValue(HoverImageProperty, value); } } public static readonly DependencyProperty HoverImageProperty = DependencyProperty.Register("HoverImage", typeof(BitmapSource), typeof(ImageButton), new PropertyMetadata(null)); public double ImageWidth { get { return (double)GetValue(ImageWidthProperty); } set { SetValue(ImageWidthProperty, value); } } public static readonly DependencyProperty ImageWidthProperty = DependencyProperty.Register("ImageWidth", typeof(double), typeof(ImageButton), new PropertyMetadata(20d)); public double ImageHeight { get { return (double)GetValue(ImageHeightProperty); } set { SetValue(ImageHeightProperty, value); } } public static readonly DependencyProperty ImageHeightProperty = DependencyProperty.Register("ImageHeight", typeof(double), typeof(ImageButton), new PropertyMetadata(20d)); public Thickness ImageMargin { get { return (Thickness)GetValue(ImageMarginProperty); } set { SetValue(ImageMarginProperty, value); } } public static readonly DependencyProperty ImageMarginProperty = DependencyProperty.Register("ImageMargin", typeof(Thickness), typeof(ImageButton), new PropertyMetadata(new Thickness())); public ImageButton() : base() { }
<Style x:Key="ImageButtonStyle" TargetType="ctrl:ImageButton" BasedOn="{StaticResource NoFocusableStyle}"> <Setter Property="FontFamily" Value="Microsoft YaHei"/> <Setter Property="FontSize" Value="10"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ctrl:ImageButton"> <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" > <Image x:Name="img" Stretch="Fill" Source="{TemplateBinding NormalImage}" Width="{TemplateBinding ImageWidth}" Height="{TemplateBinding ImageHeight}" Margin="{TemplateBinding ImageMargin}"> </Image> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="img" Property="Source" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=HoverImage}"/> </Trigger> <!--<Trigger Property="IsEnabled" Value="False"> <Setter TargetName="content" Property="Foreground" Value="LightGray"/> </Trigger>--> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
如果上面的Triggers中
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="img" Property="Source" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=HoverImage}"/ >
</Trigger>
寫成如下模式:
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="img" Property="Source" Value="{TemplateBinding HoverImage}"/>
</Trigger>
則會報錯:表示式型別不是有效的 Style 值!