一文读懂WPF系列之常用控件以及样式

WPF控件

- 控件分类概览
- - 常用控件
  - 常用控件代码示例和效果
- 样式与模板应用
- - 样式定义方式
  - - 行内样式
    - 页面/窗口级资源样式（Local Resource）
    - 应用程序全局资源
    - 独立资源字典（ResourceDictionary）
    - 控件模板（ControlTemplate）
    - 主题样式（Themes）
  - 样式继承
  - 样式的优先级规则

控件分类概览

在这里插入图片描述
布局控件上一篇文章单独讲了，这篇就主要讲其他类型的控件

常用控件

内容控件
Button：触发操作，可通过Content属性嵌入任意内容（如文本、图标）。
Label/TextBlock：显示文本，前者支持快捷键绑定，后者轻量级。
条目控件
ListBox/ComboBox：显示列表数据，支持数据绑定和模板定制。
DataGrid：表格控件，支持排序、分页和复杂数据展示。
输入控件
TextBox：单行文本输入。
RichTextBox：支持富文本格式（字体、颜色、段落）。
PasswordBox：密码输入，隐藏明文。
CheckBox/RadioButton：多选和单选控件。
特殊容器
TabControl：分页显示，通过TabItem管理多视图。
Expander：可折叠面板，节省空间

常用控件代码示例和效果

其实主要需要理解的是TabControl 与 Expander 其他控件比较简单易懂，这个例子看懂了基本上对于布局以及控件的常用基础就差不多了，如果需求用到不常用的也可以单独在去查看使用。

 <Grid Margin="10"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><!-- 顶部工具栏 --><StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,0,0,10"><Button Content="点击我" Click="Button_Click" Width="80" Margin="0,0,5,0"/><Label Content="用户名:" VerticalAlignment="Center"/><TextBox Width="120" Margin="5,0" Text="测试管理员"/><PasswordBox Width="120" Margin="5,0" PasswordChar="*"/></StackPanel><!-- 主内容区 --><TabControl Grid.Row="1"><TabItem Header="数据展示"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="2*"/></Grid.ColumnDefinitions><!-- 左侧选项 --><StackPanel Grid.Column="0" Margin="0,0,10,0"><GroupBox Header="选项设置"><StackPanel Margin="5"><CheckBox Content="启用功能" Margin="0,5"/><RadioButton Content="模式A" GroupName="Mode" Margin="0,5"/><RadioButton Content="模式B" GroupName="Mode" Margin="0,5"/><Expander Header="高级选项"><StackPanel Margin="10,5"><TextBox Text="参数1"/><TextBox Text="参数2" Margin="0,5"/></StackPanel></Expander></StackPanel></GroupBox></StackPanel><!-- 中间分隔线 --><GridSplitter Grid.Column="1" Width="3" HorizontalAlignment="Center"/><!-- 右侧表格 --><DataGrid Grid.Column="2" AutoGenerateColumns="False"ItemsSource="{Binding DataItems}"><DataGrid.Columns><DataGridTextColumn Header="ID" Binding="{Binding Id}"/><DataGridTextColumn Header="名称" Binding="{Binding Name}"/><DataGridCheckBoxColumn Header="状态" Binding="{Binding IsActive}"/></DataGrid.Columns></DataGrid></Grid></TabItem><TabItem Header="列表控件"><StackPanel Margin="10"><ListBox Height="150" ItemsSource="{Binding Items}"/><ComboBox Margin="0,10" ItemsSource="{Binding Items}" SelectedIndex="0"/></StackPanel></TabItem></TabControl><!-- 底部状态栏 --><StatusBar Grid.Row="2"><StatusBarItem Content="就绪"/><Separator/><StatusBarItem Content="当前用户: Admin"/></StatusBar></Grid>

 public partial class MainWindow : Window{public MainWindow(){InitializeComponent();DataContext = this;}public ObservableCollection<string> Items { get; } = new ObservableCollection<string>{"选项一", "选项二", "选项三"};public ObservableCollection<DataItem> DataItems { get; } = new ObservableCollection<DataItem>{new DataItem { Id = 1, Name = "项目A", IsActive = true },new DataItem { Id = 2, Name = "项目B", IsActive = false }};private void Button_Click(object sender, RoutedEventArgs e){MessageBox.Show("按钮被点击！");}}public class DataItem{public int Id { get; set; }public string Name { get; set; }public bool IsActive { get; set; }}

在这里插入图片描述

样式与模板应用

WPF通过样式（Style）和模板（Template）实现界面统一与定制

样式定义方式

在这里插入图片描述

行内样式

直接设置控件属性（如Background=“Blue”），适用于局部简单调整。

<Button Content="临时按钮" Background="Red" Foreground="White"/>

页面/窗口级资源样式（Local Resource）

在 Window 或 Page 的 Resources 中定义样式适用于当前页
<Button.Style> 这种标签里面写style（资源式样式）

<Window.Resources><Style x:Key="CustomButton" TargetType="Button"><Setter Property="Background" Value="#0078D4"/><Setter Property="Foreground" Value="White"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#005A9E"/></Trigger></Style.Triggers></Style>
</Window.Resources>
<Button Style="{StaticResource CustomButton}" Content="按钮"/>

应用程序全局资源

在 App.xaml 的 Application.Resources 中定义样式适用全局

<!-- App.xaml -->
<Application.Resources><Style x:Key="GlobalButton" TargetType="Button"><Setter Property="Margin" Value="10"/><Setter Property="Padding" Value="8"/></Style>
</Application.Resources><!-- 任意页面使用 -->
<Button Style="{StaticResource GlobalButton}" Content="全局按钮"/>

独立资源字典（ResourceDictionary）

将样式拆分到独立 XAML 文件，通过合并字典引用，大型项目模块化样式管理

创建 Styles/Buttons.xaml
<ResourceDictionary><Style x:Key="SuccessButton" TargetType="Button"><Setter Property="Background" Value="#4CAF50"/></Style>
</ResourceDictionary>在 App.xaml 中合并
<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="Styles/Buttons.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary>
</Application.Resources>

控件模板（ControlTemplate）

通过 ControlTemplate 完全重构控件视觉树。
适用场景：需要彻底改变控件外观（如圆形按钮）

资源字典中（推荐）
<!-- 在Window.Resources或App.xaml中定义 --><Window.Resources><Style TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><!-- 自定义外观 --><Ellipse Fill="{TemplateBinding Background}"/><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid></ControlTemplate></Setter.Value></Setter></Style></Window.Resources>单个控件内
<Button Content="临时按钮"><Button.Template><ControlTemplate TargetType="Button"><Border Background="Red"/></ControlTemplate></Button.Template>
</Button>

TargetType：指定模板适用的控件类型（如 Button、CheckBox）。
TemplateBinding：将模板元素的属性绑定到控件的依赖属性（如 Background、Foreground）。
ContentPresenter：占位符，用于显示控件的Content 属性（如按钮文本）

主题样式（Themes）

通过 ThemeInfo 和主题资源字典实现动态换肤。
适用场景：需要支持多套主题切换（如白天/夜间模式）

在 App.xaml.cs 中设置主题
public partial class App : Application
{public void ChangeTheme(string themeName){Resources.MergedDictionaries.Clear();Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri($"/Themes/{themeName}.xaml", UriKind.Relative) });}
}
创建主题文件 Themes/Dark.xaml
<ResourceDictionary><Style TargetType="Button"><Setter Property="Background" Value="#333333"/></Style>
</ResourceDictionary>

样式继承

通过 BasedOn 复用基础样式

<Style TargetType="Button" x:Key="PrimaryButton"><Setter Property="Background" Value="#2196F3"/>
</Style><Style TargetType="Button" x:Key="DangerButton" BasedOn="{StaticResource PrimaryButton}"><Setter Property="Background" Value="#F44336"/>
</Style>