小能豆

如何使用CSS 样式来定制WPF控件外观?

javascript

如何使用CSS 样式来定制WPF控件外观?


阅读 38

收藏
2024-06-20

共1个答案

小能豆

在 WPF(Windows Presentation Foundation)中,使用 XAML 样式(而不是 CSS)来定制控件的外观。虽然 WPF 不直接支持 CSS,但 XAML 提供了强大的样式和模板机制,可以实现与 CSS 类似的功能。

基本样式应用

在 WPF 中,你可以通过定义 Style 来自定义控件的外观。例如,以下是一个为 Button 控件定义样式的简单示例:

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Padding" Value="10,5"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Click Me" Width="100" Height="50"/>
    </Grid>
</Window>

使用命名样式

你可以为样式定义一个 x:Key,然后在控件中使用该样式:

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="CustomButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="LightGreen"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="8,4"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Styled Button" Style="{StaticResource CustomButtonStyle}" Width="120" Height="40"/>
    </Grid>
</Window>

使用基于样式的模板

对于更复杂的样式自定义,可以使用控件模板。例如,自定义 Button 的外观可以使用 ControlTemplate

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="FancyButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="LightCoral"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Padding" Value="10,5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}" 
                                BorderBrush="DarkRed" 
                                BorderThickness="2" 
                                CornerRadius="10">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Fancy Button" Style="{StaticResource FancyButtonStyle}" Width="150" Height="50"/>
    </Grid>
</Window>

使用 ResourceDictionary

如果希望样式能够在整个应用中重用,可以使用 ResourceDictionary。首先创建一个资源字典文件(例如 Styles.xaml):

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="GlobalButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="LightSeaGreen"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Margin" Value="8"/>
        <Setter Property="Padding" Value="10,5"/>
    </Style>
</ResourceDictionary>

然后在应用程序的 App.xaml 中引用这个资源字典:

<Application x:Class="WpfApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml 中使用全局样式:

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Global Styled Button" Style="{StaticResource GlobalButtonStyle}" Width="150" Height="50"/>
    </Grid>
</Window>

通过这些方法,你可以在 WPF 中灵活地定制控件的外观。

2024-06-20