1. 程式人生 > >WPF TemplateBinding與Binding區別及自定義ImageButton

WPF TemplateBinding與Binding區別及自定義ImageButton

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 值!