C# Wpf 个人初学小案例

1.纯文本按钮设计案例

（1）仿造该图中文本按钮效果:
当处于静止状态时，按钮为蓝色；
当鼠标悬停在按钮上时，按钮为黑色
当鼠标按下按钮时，按钮变得比黑色更浅一点

（2）具体代码如下：

<Window.Resources>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--自定义颜色画刷-->
        <SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF208EEA"/><!--设置静止时按钮的颜色-->
        <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FF262829"/><!--设置鼠标虚浮在按钮上的颜色-->
        <SolidColorBrush x:Key="Button.Pressed.Foreground" Color="#FF5C6061"/><!--设置鼠标按下按钮的颜色-->
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/><!--设置按钮禁用时的颜色-->
        <!--设置一些默认样式-->
        <Style x:Key="TextOnlyButton" TargetType="{x:Type Button}"><!--Target表示设置目标属性-->
            <Setter Property="Background" Value=" Transparent"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Foreground" Value="{StaticResource Button.Static.Foreground}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Padding" Value="5"/>
            <!--设置模板Template-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ContentPresenter x:Name="contentPresenter" 
                                          Focusable="False" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}" 
                                          RecognizesAccessKey="True" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <!--设置触发器Triggers-->
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.MouseOver.Foreground}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Pressed.Foreground}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel >
            <Button Style="{DynamicResource TextOnlyButton}" HorizontalAlignment="Center" Content="按钮1"/>
            <Button Style="{DynamicResource TextOnlyButton}" Padding="0 5" HorizontalAlignment="Center" Content="按钮2"/>
            <Button Style="{DynamicResource TextOnlyButton}" Padding="5 0" HorizontalAlignment="Center" Content="按钮3"/>
            <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" Content="按钮4"/>
            <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" IsEnabled="False"  Content="按钮5"/>

            <Button Style="{DynamicResource TextOnlyButton}" FontSize="20" HorizontalAlignment="Center" Content="按钮6"/>
            <Button Style="{DynamicResource TextOnlyButton}" FontSize="14" HorizontalAlignment="Center" Content="按钮7"/>
            <Button Style="{DynamicResource TextOnlyButton}" FontSize="13" HorizontalAlignment="Center" Content="按钮8"/>
            <Button Style="{DynamicResource TextOnlyButton}" FontSize="12" HorizontalAlignment="Center" Content="按钮9"/>
            <Button Style="{DynamicResource TextOnlyButton}" FocusVisualStyle="{x:Null}" FontSize="12" HorizontalAlignment="Center" Content="按钮10" Cursor="Hand"/>
        </StackPanel>
    </Grid>

（2）从该小案例中学到的知识

关于x:key和x:name

x:Key用在xaml Resources，ResourceDictionary需要key来访问 x:Name用在 ResourceDictionary以外任何地方，可以使用x:Name在code-behind访问对象 x：Key唯一地标识作为资源创建和引用且存在于 ResourceDictionary 中的元素。
x:Name 唯一标识对象元素，以便于从代码隐藏或通用代码中访问实例化的元素。	

x:key和x:name的区别：
  x:Key用在xaml Resources，ResourceDictionary需要key来访问
  x:Name用在ResourceDictionary以外任何地方，可以使用x:Name在code-behind访问对象
  x：Key唯一地标识作为资源创建和引用且存在于 ResourceDictionary 中的元素。
  x:Name 唯一标识对象元素，以便于从代码隐藏或通用代码中访问实例化的元素。 
  x:key和x:name的区别，前者是为xaml中定义的资源文件提供唯一的标识，后者是为xaml中定义的控件元素提供唯一标识。

关于x:key和x:name