WPF 样式Style

2023-12-29 09:46:10

一：样式基础

如果我们的程序有三个这样的按键，一般我们会这样写

    <StackPanel>
        <!--按键的背景色为Azure蔚蓝色背景色为Coral珊瑚色字体为Arial加粗字体大小为16-->
        <Button Content="Button1" Background="Azure" Foreground="Coral" FontFamily="Arial" FontWeight="Bold" FontSize="16" />
        <Button Content="Button2" Background="Azure" Foreground="Coral" FontFamily="Arial" FontWeight="Bold" FontSize="16" />
        <Button Content="Button3" Background="Azure" Foreground="Coral" FontFamily="Arial" FontWeight="Bold" FontSize="16" />
    </StackPanel>

但是如果我们的程序有很多这样的按键，每一个都设置一遍外观属性代码就会显得很冗余，有好奇心的小伙伴就会想有没有一种办法让代码变得简洁一些？答案是：Style

    <Window.Resources>
        <Style x:Key="ButtonStyle">
            <!--按键的背景色为Azure蔚蓝色背景色为Coral珊瑚色字体为Arial加粗字体大小为16-->
            <Setter Property="Control.FontFamily" Value="Arial"></Setter>
            <Setter Property="Control.Background" Value="Azure"></Setter>
            <Setter Property="Control.Foreground" Value="Coral"></Setter>
            <Setter Property="Control.FontWeight" Value="Bold"></Setter>
            <Setter Property="Control.FontSize" Value="16"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Button1" Style="{StaticResource ButtonStyle}" />
        <Button Content="Button2" Style="{StaticResource ButtonStyle}" />
        <Button Content="Button3" Style="{StaticResource ButtonStyle}" />
    </StackPanel>

这样代码就会显得简洁一些，细心的小伙伴儿发现所有的按键都用Style="{StaticResource ButtonStyle}"来指定样式，感觉还是略有一点冗余，那我们还可以继续让代码简洁一些，把

<Style x:Key="ButtonStyle">样式里的键值换成目标类型TargetTpye="Button",

    <Window.Resources>
        <Style TargetType="Button">
            <!--按键的背景色为Azure蔚蓝色背景色为Coral珊瑚色字体为Arial加粗字体大小为16-->
            <Setter Property="Control.FontFamily" Value="Arial"></Setter>
            <Setter Property="Control.Background" Value="Azure"></Setter>
            <Setter Property="Control.Foreground" Value="Coral"></Setter>
            <Setter Property="Control.FontWeight" Value="Bold"></Setter>
            <Setter Property="Control.FontSize" Value="16"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Button1"  />
        <Button Content="Button2"  />
        <Button Content="Button3"  />
    </StackPanel>

这样三个按键的代码就非常简洁了，但是有的小伙伴儿就想让第一个和第三个按键用上面的样式，第二个不用这样的样式，我们可以这样改

    <Window.Resources>
        <Style TargetType="Button">
            <!--按键的背景色为Azure蔚蓝色背景色为Coral珊瑚色字体为Arial加粗字体大小为16-->
            <Setter Property="Control.FontFamily" Value="Arial"></Setter>
            <Setter Property="Control.Background" Value="Azure"></Setter>
            <Setter Property="Control.Foreground" Value="Coral"></Setter>
            <Setter Property="Control.FontWeight" Value="Bold"></Setter>
            <Setter Property="Control.FontSize" Value="16"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Button1"  />
        <Button Content="Button2" Style="{x:Null}" />
        <Button Content="Button3"  />
    </StackPanel>

效果如下

二：样式的事件

当我们想让鼠标经过按键时，前景色变为蓝色，鼠标离开时，前景色变为珊瑚色

一般我们会这样写前端代码

    <Window.Resources>
        <Style TargetType="Button">
            <!--按键的背景色为Azure蔚蓝色背景色为Coral珊瑚色字体为Arial加粗字体大小为16-->
            <Setter Property="Control.FontFamily" Value="Arial"></Setter>
            <Setter Property="Control.Background" Value="Azure"></Setter>
            <Setter Property="Control.Foreground" Value="Coral"></Setter>
            <Setter Property="Control.FontWeight" Value="Bold"></Setter>
            <Setter Property="Control.FontSize" Value="16"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Button1" MouseEnter="btnMouseEnter" MouseLeave="btnMouseLeave" />
        <Button Content="Button2" MouseEnter="btnMouseEnter" MouseLeave="btnMouseLeave" />
        <Button Content="Button3" MouseEnter="btnMouseEnter" MouseLeave="btnMouseLeave"/>
    </StackPanel>

然后为后台代码添加事件处理事件

        private void btnMouseEnter(object sender, MouseEventArgs e)
        {
            ((Button)sender).Foreground = new SolidColorBrush(Colors.Blue);//字体颜色改为蓝色
        }

        private void btnMouseLeave(object sender, MouseEventArgs e)
        {
            ((Button)sender).Foreground = new SolidColorBrush(Colors.Coral);//字体颜色改为珊瑚色
        }

这样每个按键都有一个鼠标进入事件和一个离开事件MouseEnter="btnMouseEnter" MouseLeave="btnMouseLeave"。聪明的小伙伴儿就会想样式可以简化控件的外观，那可以不可以简化控件的事件呢？答案是：EventSetter

    <Window.Resources>
        <Style TargetType="Button">
            <!--按键的背景色为Azure蔚蓝色背景色为Coral珊瑚色字体为Arial加粗字体大小为16-->
            <Setter Property="Control.FontFamily" Value="Arial"></Setter>
            <Setter Property="Control.Background" Value="Azure"></Setter>
            <Setter Property="Control.Foreground" Value="Coral"></Setter>
            <Setter Property="Control.FontWeight" Value="Bold"></Setter>
            <Setter Property="Control.FontSize" Value="16"></Setter>
            <EventSetter Event="FrameworkElement.MouseEnter" Handler="btnMouseEnter"></EventSetter>
            <EventSetter Event="FrameworkElement.MouseLeave" Handler="btnMouseLeave"></EventSetter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Button1" />
        <Button Content="Button2" />
        <Button Content="Button3" />
    </StackPanel>

<EventSetter Event="FrameworkElement.MouseEnter" Handler="btnMouseEnter"></EventSetter>

EventSetter ：设置样式的事件设置，Event：事件类型，Handler：事件处理程序btnMouseEnter就是我们刚才写的后台代码事件处理程序没有任何变化

        private void btnMouseEnter(object sender, MouseEventArgs e)
        {
            ((Button)sender).Foreground = new SolidColorBrush(Colors.Blue);//字体颜色改为蓝色
        }

这样写代码就会很简洁，也便于维护。

WPF 样式Style

码农公寓

一：样式基础

相关文章