此篇只是收集平时写过的样式~
带有图片的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