WPF Button自定义样式收集 带有图片的Button

此篇只是收集平时写过的样式~

带有图片的Button

为Button设定了一些附加属性，用于添加图片到Button。

比如初始化图片和点击后的图片

 public static readonly DependencyProperty NormalImageProperty = DependencyProperty.RegisterAttached(
           "NormalImage",
           typeof(ImageSource),
           typeof(ButtonAttachments),
           new PropertyMetadata(null));

        public static ImageSource GetNormalImage(DependencyObject obj)
        {
            return (ImageSource)obj.GetValue(NormalImageProperty);
        }

        public static void SetNormalImage(DependencyObject obj, ImageSource value)
        {
            obj.SetValue(NormalImageProperty, value);
        }

        public static readonly DependencyProperty PressedImageProperty = DependencyProperty.RegisterAttached(
            "PressedImage",
            typeof(ImageSource),
            typeof(ButtonAttachments),
            new PropertyMetadata(null));

        public static ImageSource GetPressedImage(DependencyObject obj)
        {
            return (ImageSource)obj.GetValue(PressedImageProperty);
        }

        public static void SetPressedImage(DependencyObject obj, ImageSource value)
        {
            obj.SetValue(PressedImageProperty, value);
        }

图片的位置放置

public static readonly DependencyProperty ImagePositionProperty = DependencyProperty.RegisterAttached(
            "ImagePosition",
            typeof(PositionEnumType),
            typeof(ButtonAttachments),
            new PropertyMetadata(PositionEnumType.Right));

        public static void SetImagePosition(DependencyObject element, PositionEnumType value)
        {
            element.SetValue(ImagePositionProperty, value);
        }

        public static PositionEnumType GetImagePosition(DependencyObject element)
        {
            return (PositionEnumType) element.GetValue(ImagePositionProperty);
        }

        public static readonly DependencyProperty ContentMarginProperty = DependencyProperty.RegisterAttached(
            "ContentMargin",
            typeof(Thickness),
            typeof(ButtonAttachments),
            new PropertyMetadata(default(Thickness)));

        public static void SetContentMargin(DependencyObject element, object value)
        {
            element.SetValue(ContentMarginProperty, value);
        }

        public static Thickness GetContentMargin(DependencyObject element)
        {
            return (Thickness)element.GetValue(ContentMarginProperty);
        }

接下来是Style的更改。Left表示图片在左边~

<DataTrigger Binding="{Binding Path=(res:ButtonAttachments.ImagePosition),RelativeSource={RelativeSource Self},Mode=OneWay}" Value="Left">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid x:Name="MainGrid">
                                <Border x:Name="BorderBg"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Background="{TemplateBinding Background}"
                                        CornerRadius="{Binding Path=(res:ButtonAttachments.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}"/>
                                <StackPanel VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      Orientation="Horizontal">
                                   
                                    <Image Name="Image" 
                                           Stretch="Uniform"
                                           Margin="{Binding Path=(res:ButtonAttachments.ContentMargin), RelativeSource={RelativeSource TemplatedParent}}"
                                           Width="{Binding Path=(res:ButtonAttachments.ImageWidth), RelativeSource={RelativeSource TemplatedParent}}"
                                           Height="{Binding Path=(res:ButtonAttachments.ImageHeight), RelativeSource={RelativeSource TemplatedParent}}"
                                           Source="{Binding Path=(res:ButtonAttachments.NormalImage), RelativeSource={RelativeSource TemplatedParent}}"/>
                                    <ContentPresenter RecognizesAccessKey="True"
                                                      VerticalAlignment="Center"/>
                                </StackPanel>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter TargetName="Image" Property="Image.Source" Value="{Binding Path=(res:ButtonAttachments.PressedImage), RelativeSource={RelativeSource TemplatedParent}}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>

使用样例

<Button Style="{StaticResource Style.ImageButton}"
                Width="50"
                Height="50"
                Content="123"
                Background="Transparent"
                attachment:ButtonAttachments.ContentMargin="0 10 0 0"
                attachment:ButtonAttachments.CornerRadius="10"
                attachment:ButtonAttachments.ImagePosition="Bottom"
                attachment:ButtonAttachments.ImageWidth="18"
                attachment:ButtonAttachments.ImageHeight="18"
                attachment:ButtonAttachments.NormalImage="{StaticResource Image.HelpNormal}"
                attachment:ButtonAttachments.PressedImage="{StaticResource Image.HelpPress}"/>

白嫖链接

https://github.com/yinghualuowu/SakuraStyle