WPF UI 高级 - 控制样式和样式模板与字典 - 二、模板

最编程 2024-09-30 08:00:30

...

在 WPF 中，样式（Style）和控件模板（ControlTemplate）是定义控件外观和行为的关键工具。样式通常用于设置控件的属性，而控件模板则用于定义控件的结构和布局。编写样式模板的步骤：

1. 定义控件模板（ControlTemplate）

控件模板允许你完全自定义控件的视觉结构。你可以通过 ControlTemplate 元素定义控件的外观和行为。
步骤 1: 定义控件模板

<ControlTemplate TargetType="{x:Type Button}">
    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <ControlTemplate.Triggers>
        <!-- 定义触发器，例如当按钮被按下时改变背景 -->
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="border" Property="Background" Value="LightGray"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

在这个模板中，我们定义了一个按钮的外观，使用 Border 和 ContentPresenter 来布局按钮的背景和内容。我们还定义了一个触发器，当按钮被按下时改变背景色。

2. 创建样式（Style）

样式用于封装控件的属性设置和模板。样式可以包含 Setter 元素来设置属性，以及 ControlTemplate 来定义控件的外观。
步骤 2: 创建样式

<Style TargetType="{x:Type Button}">
    <Setter Property="Template" Value="{DynamicResource YourButtonTemplate}"/>
    <Setter Property="Background" Value="LightBlue"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontSize" Value="16"/>
</Style>

在这个样式中，我们引用了上面定义的控件模板，并设置了按钮的默认背景、前景色和字体大小。

3. 应用样式和模板

将样式应用到控件上，可以通过 Style 属性直接应用，或者通过资源字典（ResourceDictionary）引用。
假设我们想要自定义一个按钮的外观和行为，以下是具体的步骤和代码示例：

步骤 3: 应用样式

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="200">
    <Window.Resources>
        <!-- 在这里定义控件模板和样式 -->
        <ControlTemplate x:Key="YourButtonTemplate" TargetType="{x:Type Button}">
            <!-- 控件模板定义 -->
        </ControlTemplate>
        <Style TargetType="{x:Type Button}">
            <!-- 样式定义 -->
        </Style>
    </Window.Resources>
    <Grid>
        <!-- 应用样式到按钮 -->
        <Button Content="Click Me" Style="{DynamicResource {x:Type Button}}"/>
    </Grid>
</Window>

在这个示例中，我们使用的思路是在模板中定义我们需要的样式效果，然后通过样式style标签的定义引用template，最后在控件中引用style的动态资源。我们在 Window.Resources 中定义了控件模板和样式，并通过 DynamicResource 引用了模板和样式。然后，我们在 Button 控件上应用了这个样式。

4、另外一种方式：在模板中直接定义好样式

也就是说，我们不必像上述步骤那么麻烦，直接一点，把要设置的样式先在模板中实现了即可。

<ControlTemplate x:Key="ButtonTemplate TargetType="{x:Type Button}">
<Border BorderBrush="Orange" BorderThickness="3" CornerRadius="2" Background="Red">
<ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>

ContentPresenter 和templateBinding前面讲样式定义的时候已经讲过了，不熟悉的可以爬楼上去看看。

下面是应用模板的调用：

<StackPanel Margin="5" >
<Button Margin="5" Padding="13">Normal Button</Button>
<Button Margin="5" Padding="3" Template="{StaticResource ButtonTemplate}" />
</StackPanel>

通过这种方式，你可以完全控制 WPF 控件的外观和行为，实现高度定制化的用户界面。

文章原出处：https://blog.****.net/haigear/article/details/142632573

上一篇： [大语言建模 - 论文集中] ACL2024 - 长尾知识在检索增强型大语言模型中的作用

下一篇： CPU 路径、内核、线程、主频、缓存