C# WPF 按钮模板

    C# WPF的交互界面编程相较于MFC强大且方便的多，以至于用惯了MFC的我刚开始学时有点不知所措，所幸经过一段时间摸索，终于有些明白了。
    就拿做一个按钮模板为例：
在直接从工具箱拖下来没有修改的情况下，按钮的视觉效果大概是如下图所示的样子：

    如果是一个交给用户使用的程序，这样的界面怎么看都是粗糙的。在WPF中，可以通过在xaml文件中编写如下的按钮模板，将按钮的样式完全改变。模板的代码如下(具体的解释都已经在代码的注释中给出)：

<Window.Resources>
<!--设置模板目标为Button，而x:Key为其模板名称，按钮对象要应用该模板风格需要设置相应的Style属性与
 x:Key指定的名称绑定，如下面的实例。如果模板没有显式赋值x:Key对象，则所有Button都具有该模板的风格-->
    <Style TargetType="{x:Type Button}" x:Key="WhiteButton">
        <!--设置按钮背景色为透明-->
        <Setter Property="Control.Background"  Value="{x:Null}"/>
        <!--设置按钮为无边框样式-->
        <Setter Property="Control.BorderBrush" Value="{x:Null}"/>
        <!--设置字体样式-->
        <Setter Property="Control.FontFamily" Value="华文行楷"/>
        <Setter Property="Control.FontSize" Value="32"/>
        <Setter Property="Control.Foreground" Value="Black"/>
        <Setter Property="Control.FontWeight" Value="Bold"/>
        <Setter Property="Control.VerticalAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <!--设置一般情况下按钮的形态-->
                        <Border x:Name="background" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Opacity="0"
                            Background="{x:Null}" 
                            BorderBrush="{x:Null}"      
                            CornerRadius="2">
                        </Border>
                        <Grid>
                            <ContentPresenter  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <!--当鼠标悬停在按钮上方时，按钮形态设置-->
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Opacity" Value="1" TargetName="background"/>
                            <Setter Property="Foreground" Value="red"/>
                            <Setter Property="Control.FontSize" Value="40"/>
                        </Trigger>
                        <!--当鼠标按下时，按钮形态设置-->
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" Value="{x:Null}"/>
                        </Trigger>
                        <!--当按钮不可用时，按钮形态设置-->
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

    有了模板，在定义按钮布局时调用该模板即可，代码如下：

<Grid>
    <Button x:Name="moon" Style="{StaticResource WhiteButton}" Content="当年明月" Margin="98,83,98,0" VerticalAlignment="Top" Height="49"/>
    <Button x:Name="hollow" Style="{StaticResource WhiteButton}" Content="空谷深井" Margin="98,137,98,0" VerticalAlignment="Top" Height="49"/>
    <Button x:Name="flower" IsEnabled="False" Style="{StaticResource WhiteButton}" Content="彼岸花开" Margin="98,191,98,0" VerticalAlignment="Top" Height="49"/>
</Grid>

    则我们可以得到如下图所示的美化过的界面(如果觉得外观还不满意，可以进一步修改模板的视觉部分，其他控件样式的模板基本跟本示例差不多，以后不会再做赘述)：

    圆角按钮的模板如下：

 <Button x:Name="button" Content="Read Old" HorizontalAlignment="Left" Margin="519,375,0,0" VerticalAlignment="Top" Width="94" Height="34" Background="#FFFFC000" BorderBrush="Black" BorderThickness="1">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="5,5,5,5" Name="PART_Background" Background="#FFFFC000">
                <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="UIElement.IsMouseOver" Value="True">
                    <Setter Property="Border.Background" TargetName="PART_Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="Lime" Offset="0.0" />
                                <GradientStop Color="#66CC33" Offset="0.5" />
                                <GradientStop Color="Gold" Offset="0.0" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="ButtonBase.IsPressed" Value="True">
                    <Setter Property="UIElement.Effect">
                        <Setter.Value>
                            <DropShadowEffect BlurRadius="10" Color="#FF0033" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>