三、按钮篇
（三）纯图标按钮-IconOnlyButton
-
同样的，我们找到我们需要设计的按钮样式，如下图左上角的按钮哦
-
来分析一下吧，我们通过使用WindowsSettings中的这个面板的按钮，可以分析出如下特点：
- 按钮内容为图标，以及通过自定义控件实现
- 默认情况下，背景色为白色（无背景）
- 鼠标放上去，会有一个背景色
- 鼠标按下，背景变为蓝白色
-
由于该按钮添加了一个图标，该属性我们想通过依赖属性来定义，这样我们就可以再XAML或者其他地方进行设置了。所以我们首先在项目中添加如下的IconButton类
文件路径：Deamon.UiCore.Controls.IconButton.cs
using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace Deamon.UiCore.Controls { /// <summary> /// 图标按钮 /// </summary> public class IconButton : Button { public IconButton() { //((StreamGeometry)IconData).FillRule = FillRule.EvenOdd; } /// <summary> /// 图标数据 /// </summary> public Geometry IconData { get { return (Geometry)GetValue(IconDataProperty); } set { SetValue(IconDataProperty, value); } } /// <summary> /// <see cref="IconData"/> /// </summary> public static readonly DependencyProperty IconDataProperty = DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconButton), new PropertyMetadata(default(Geometry), (s, e) => { })); } }注意：这个类的创建方式也可以直接使用自定义控件的创建方式进行创建，这里不做演示。但是就这样直接定义类也是可以的，只是在XAML中直接使用IconButton时是没有任何内容呈现。
-
接下来，打开VS，添加一个按钮，并编辑模板（和之前的方式一样哦，这里就不再赘述）值得注意的是，我是直接定义到资源自定文件中的，如下图所示：
-
添加上我们自定义的颜色资源。修改后如下：（不完整截取代码）
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:Deamon.UiCore.Controls" xmlns:local="clr-namespace:Deamon.UiCore.Styles"> <SolidColorBrush x:Key="Button.Static.Background" Color="Transparent"/> <SolidColorBrush x:Key="Button.Static.Border" Color="Transparent"/> <SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF000000"/> <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FF0097EE"/> <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FFFFFFFF"/> <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF0097EE"/> <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FF3DB5F3"/> <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF3DB5F3"/> <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/> <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/> <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/> <Style x:Key="IconOnlyButton" TargetType="{x:Type controls:IconButton}"> <Setter Property="FocusVisualStyle" Value="{x:Null}"/> <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/> <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="Padding" Value="1"/> </Style> </ResourceDictionary>注意：首先是
local的定义只想我们刚刚定义的IconButton类的命名空间哦。其次我们IconOnlyButton只想的目标类型TargetType是我们定义的IconButton类哦，使用方式如上就好controls:IconButton -
然后呢，我们开始我们的模板和触发器的样式设计哦，下面就贴上完整的样式代码哦。
文件路径：UiCore.Styles.IconOnlyButton.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:Deamon.UiCore.Controls" xmlns:local="clr-namespace:Deamon.UiCore.Styles"> <SolidColorBrush x:Key="Button.Static.Background" Color="Transparent"/> <SolidColorBrush x:Key="Button.Static.Border" Color="Transparent"/> <SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF000000"/> <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FF0097EE"/> <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FFFFFFFF"/> <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF0097EE"/> <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FF3DB5F3"/> <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF3DB5F3"/> <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/> <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/> <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/> <Style x:Key="IconOnlyButton" TargetType="{x:Type controls:IconButton}"> <Setter Property="FocusVisualStyle" Value="{x:Null}"/> <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/> <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="Padding" Value="1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type controls:IconButton}"> <Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true"> <Border Padding="9"> <Viewbox> <Path Data="{TemplateBinding IconData}" x:Name="path" Fill="{TemplateBinding Foreground}" Stretch="Uniform"> </Path> </Viewbox> </Border> </Border> <ControlTemplate.Triggers> <Trigger Property="IsDefaulted" Value="true"> <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> </Trigger> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/> <Setter Property="Foreground" Value="{StaticResource Button.MouseOver.Foreground}"/> </Trigger> <Trigger Property="IsPressed" Value="true"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> -
最后，我们开始使用吧，首先将资源文件IconOnlyButton.xaml添加到资源中，然后再使用。
-
在App.xaml文件中定义
<Application x:Class="Deamon.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Deamon" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="UiCore/Styles/IconOnlyButton.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> -
然后再窗口总使用需要定义
controls的命名空间，最后再使用<Window x:Class="Deamon.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Deamon" xmlns:controls="clr-namespace:Deamon.UiCore.Controls" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Grid> <StackPanel > <Button Style="{DynamicResource TextOnlyButton}" HorizontalAlignment="Center" Content="夜间模式设置"/> <Button Style="{DynamicResource TextOnlyButton}" Padding="0 5" HorizontalAlignment="Center" Content="Windows HD Color 设置"/> <Button Style="{DynamicResource TextOnlyButton}" Padding="5 0" HorizontalAlignment="Center" Content="高级缩放设置"/> <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" Content="获取帮助"/> <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" IsEnabled="False" Content="提供反馈"/> <Button Style="{DynamicResource TextOnlyButton}" FontSize="20" HorizontalAlignment="Center" Content="连接到无线显示器"/> <Button Style="{DynamicResource TextOnlyButton}" FontSize="14" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/> <Button Style="{DynamicResource TextOnlyButton}" FontSize="13" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/> <Button Style="{DynamicResource TextOnlyButton}" FontSize="12" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/> <Button Style="{DynamicResource TextOnlyButton}" FocusVisualStyle="{x:Null}" FontSize="12" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/> <Button Style="{DynamicResource BackDropButton}" Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="检测"/> <Button Style="{DynamicResource BackDropButton}" Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="更改"/> <Button Style="{DynamicResource BackDropButton}" Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="设置默认值"/> <Button Style="{DynamicResource BackDropButton}" Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="清楚"/> <Button Style="{DynamicResource BackDropButton}" Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" IsEnabled="False" Content="允许"/> </StackPanel> <controls:IconButton Style="{DynamicResource IconOnlyButton}" Width="50" Height="30" HorizontalAlignment="Left" Content="sdasdad" VerticalAlignment="Top"> <controls:IconButton.IconData> <StreamGeometry>M928 464H247.936L569.984 141.76l-56.56-56.688-418.608 418.56 418.608 418.56 56.56-56.352L247.936 544H928z</StreamGeometry> </controls:IconButton.IconData> </controls:IconButton> </Grid> </Grid> </Window>这里的IconData是使用自定义的图形来进行填充的，这个内容可以很多种哦，大家可以试着去下载SVG格式的矢量图，然后使用其中的内容。因为他们都是基于图形微语言实现的。
-
-
完结，show for you
积跬步以至千里:) (:一阵没来由的风
哔哩哔哩同步视频 或者搜索用户：一阵没来由的风
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
