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

控件分类概览

布局控件上一篇文章单独讲了，这篇就主要讲其他类型的控件

常用控件

1. 内容控件​​
   ​​Button​​：触发操作，可通过Content属性嵌入任意内容（如文本、图标）。
   ​​Label​​/​​TextBlock​​：显示文本，前者支持快捷键绑定，后者轻量级。
2. 条目控件​​
   ​​ListBox​​/​​ComboBox​​：显示列表数据，支持数据绑定和模板定制。
   ​​DataGrid​​：表格控件，支持排序、分页和复杂数据展示。
3. 输入控件​​
   ​​TextBox​​：单行文本输入。
   RichTextBox：支持富文本格式（字体、颜色、段落）。
   ​​PasswordBox​​：密码输入，隐藏明文。
   ​​CheckBox​​/​​RadioButton​​：多选和单选控件。
4. ​​特殊容器​​
   ​​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>

样式的优先级规则​​

当直接设置属性和样式冲突时，优先级顺序如下：
控件直接设置属性 > 显式样式（Style） > 隐式样式（无x:Key的样式） > 控件默认样式
​隐式样式的作用域​​
无 x:Key 的