C# WPF 按钮模板

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

C# WPF 按钮模板_第1张图片

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



    <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>
                "{x:Type Button}">
                    <Grid>
                        
                        "background" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Opacity="0"
                            Background="{x:Null}" 
                            BorderBrush="{x:Null}"      
                            CornerRadius="2">
                        
                        <Grid>
                            "{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        Grid>
                    Grid>
                    
                        
                        <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>
                    
                
            Setter.Value>
        Setter>
    Style>

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

<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>

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

C# WPF 按钮模板_第2张图片

    圆角按钮的模板如下:

 <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>
        "{x:Type Button}">
            "{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="5,5,5,5" Name="PART_Background" Background="#FFFFC000">
                "{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
            
            
                <Trigger Property="UIElement.IsMouseOver" Value="True">
                    <Setter Property="Border.Background" TargetName="PART_Background">
                        <Setter.Value>
                            "0,1" StartPoint="0,0">
                                "Lime" Offset="0.0" />
                                "#66CC33" Offset="0.5" />
                                "Gold" Offset="0.0" />
                            
                        Setter.Value>
                    Setter>
                Trigger>
                <Trigger Property="ButtonBase.IsPressed" Value="True">
                    <Setter Property="UIElement.Effect">
                        <Setter.Value>
                            "10" Color="#FF0033" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                        Setter.Value>
                    Setter>
                Trigger>
            
        
    Button.Template>
Button>

你可能感兴趣的:(C#,WPF)