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

news2025/4/16 7:53:20

WPF控件

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

控件分类概览

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

常用控件

  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 的

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2334825.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【双指针】专题：LeetCode 283题解——移动零

【双指针】专题：LeetCode 283题解——移动零

移动零 一、题目链接二、题目三、题目解析四、算法原理两个指针的作用以及三个区间总结 五、与快速排序的联系六、编写代码七、时间复杂度、空间复杂度 一、题目链接 移动零 二、题目 三、题目解析 “保持非零元素的相对顺序”&#xff0c;比如&#xff0c;示例1中非零元素1…
阅读更多...
2025蓝桥杯JavaB组

2025蓝桥杯JavaB组

说明 博主自己水平有限&#xff0c;而且答案也不一定对&#xff0c;下面代码和思路仅作分享。我只把我考场上做了的写出来了&#xff0c;有什么问题欢迎评论区交流。 A&#xff1a;逃离高塔 思路&#xff1a; 由于有了去年的经验&#xff0c;所以一上来我就是找规律&#xf…
阅读更多...
SQL学习--基础语法学习

SQL学习--基础语法学习

SQL和excle对比 学习目标 单表查询 项目背景 SQL 练习环境 SQL Online Compiler - Next gen SQL Editor 商品信息表&#xff1a;https://study-zhibo.oss-cn-shanghai.aliyuncs.com/test/%E5%95%86%E5%93%81%E4%BF%A1%E6%81%AF%E8%A1%A8.csv 订单明细表&#xff1a;https://…
阅读更多...
MATLAB2022b安装

MATLAB2022b安装

1 从百度网盘下载MATLAB2022b&#xff0c;下载完成后解压到某个文件夹&#xff1b; 链接: MATLAB2022b 提取码: 6666 2 打开解压后的文件夹&#xff0c;进入setup文件夹&#xff0c;双击打开“setup.exe”文件&#xff1b; 3 在弹出窗口中选择“高级选项”-->“我有文件安…
阅读更多...
架构总览怎么写，才算工业级？

架构总览怎么写，才算工业级？

📈系统架构文档是整个项目最重要的起点，但很多人第一章就“写穿了”： 不是写得太细，就是没有重点。想要写出高质量、能协作、能传承的架构文档，这一篇会告诉你应该怎么做—— ✅ 架构总览的终极目标 明确边界、定义角色、画清数据流 别讲执行细节，别深入函数调用。 ✅ 架…
阅读更多...
Datawhale 入驻 GitCode：以开源力量推动 AI 教育公平与创新

Datawhale 入驻 GitCode：以开源力量推动 AI 教育公平与创新

在 AI 技术深度重塑教育生态的今天&#xff0c;国内首个 AI 开源学习社区 —— Datawhale 正式加入 GitCode 开源平台&#xff01;作为覆盖全球 3000 高校、培养超百万 AI 人才的创新社区&#xff0c;Datawhale 将通过开源协作模式&#xff0c;为人工智能教育公平注入新动能&a…
阅读更多...
ChatDBA：一个基于AI的智能数据库助手

ChatDBA：一个基于AI的智能数据库助手

今天给大家介绍一个基于 AI 大语言模型实现数据库故障诊断的智能助手&#xff1a;ChatDBA。 ChatDBA 是由上海爱可生信息技术股份有限公司开发&#xff0c;通过对话交互&#xff0c;提供数据库故障诊断、专业知识学习、SQL 生成和优化等功能&#xff0c;旨在提升 DBA 工作效率。…
阅读更多...
MacOS中的鼠标、触控板的设置研究

MacOS中的鼠标、触控板的设置研究

一、背景和写这篇文章的原因 想搞清楚和配置好鼠标&#xff0c;比如解决好为什么我的滚动那么难用&#xff1f;怎么设置滚轮的方向跟windows相同&#xff1f;调整双击速度&#xff0c;调整鼠标滚轮左右拨动的"冷却时间"。 二、各种设置之详细解释 1. MacOS设置 -&…
阅读更多...
asp.net core 项目发布到 IIS 服务器

asp.net core 项目发布到 IIS 服务器

目录 一、VS2022 发布 二、设置IIS服务 三、配置IIS管理器 &#xff08;一&#xff09;打开IIS管理器 &#xff08;二&#xff09;添加站台 &#xff08;三&#xff09;配置应用程式集区 四、安装ASP.NET Core Hosting Bundle 五、设定IIS的日志位置 六、测试 一、VS2…
阅读更多...
【Nodebb系列】Nodebb笔记写入方案

【Nodebb系列】Nodebb笔记写入方案

NodeBB写入方案 前言 最近在整理以前记录的碎片笔记&#xff0c;想把它们汇总到NodeBB中&#xff0c;方便管理和浏览。但是笔记内容有点多&#xff0c;并且用发帖的形式写到NodeBB中会丢失时间信息&#xff0c;因此整理了一套NodeBB写入方案&#xff0c;大致流程如下&#xf…
阅读更多...
计算机视觉——基于YOLOV8 的人体姿态估计训练与推理

计算机视觉——基于YOLOV8 的人体姿态估计训练与推理

概述 自 Ultralytics 发布 YOLOV5 之后&#xff0c;YOLO 的应用方向和使用方式变得更加多样化且简单易用。从图像分类、目标检测、图像分割、目标跟踪到关键点检测&#xff0c;YOLO 几乎涵盖了计算机视觉的各个领域&#xff0c;似乎已经成为计算机视觉领域的“万能工具”。 Y…
阅读更多...
鸿蒙小案例---心情日记

鸿蒙小案例---心情日记

效果演示 代码实现 import { router, window } from kit.ArkUIEntry Component struct Index {async aboutToAppear(): Promise<void> {let w await window.getLastWindow(getContext())w.setWindowSystemBarProperties({statusBarColor: #00C6C3,statusBarContentColo…
阅读更多...
el-tree 实现树形菜单子级取消选中后父级选中效果不变

el-tree 实现树形菜单子级取消选中后父级选中效果不变

背景 在复杂的企业级管理系统中，树形菜单是一种常见的数据展示和交互组件。传统的树形菜单通常存在以下交互局限： 子节点取消选中时，父节点会自动取消选中无法满足复杂的权限分配和数据筛选场景实际应用场景： 组织架构权限管理多层级资源分配复杂的数据筛选与展示实现需求…
阅读更多...
Java虚拟机——JVM(Java Virtual Machine)解析一

Java虚拟机——JVM(Java Virtual Machine)解析一

1.JVM是什么&#xff1f; 1.1 JVM概念 Java Virtual Machine (JVM) 是JDK的核心组件之一&#xff0c;它使得 Java 程序能够在任何支持 JVM 的设备或操作系统上运行&#xff0c;而无需修改源代码 JDK是什么&#xff0c;JDK和JVM是什么关系&#xff1f;1.Java IDE(Integrated …
阅读更多...
【源码】SpringMvc源码分析

【源码】SpringMvc源码分析

文章目录 SpringMVC 基础回顾​核心组件源码分析​DispatcherServlet​HandlerMapping​HandlerAdapter​ViewResolver​ 请求处理流程源码解析​ 在当今的 Java Web 开发领域&#xff0c;SpringMVC 无疑是最为广泛应用的 Web 框架之一。它以其强大的功能、灵活的配置以及高度的…
阅读更多...
tcp特点+TCP的状态转换图+time_wait详解

tcp特点+TCP的状态转换图+time_wait详解

tcp特点TCP的状态转换图time wait详解 目录 一、tcp特点解释 1.1 面向连接 1.1.1 连接建立——三次握手 1.1.2 连接释放——四次挥手 1.2 可靠的 1.2.1 应答确认 1.2.2 超时重传 1.2.3 乱序重排 1.2.4 去重 1.2.5 滑动窗口进行流量控制 1.3 流失服务&#xff08;字节…
阅读更多...
高支模自动化监测解决方案

高支模自动化监测解决方案

1.行业现状 高大模板支撑系统在浇筑施工过程中&#xff0c;诸多重大安全风险点进行实时自动化安全监测的解决方案主要监测由于顶杆失稳、扣件失效、承压过大等引起的支撑轴力、模板沉降、相对位移、支撑体系倾斜等参数变化。系统采用无线自动组网、高频连续采样&#xff0c;实时…
阅读更多...
OpenCV 图形API（24）图像滤波-----双边滤波函数bilateralFilter()

OpenCV 图形API（24）图像滤波-----双边滤波函数bilateralFilter()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 应用双边滤波到图像。 该函数对输入图像应用双边滤波&#xff0c;如 http://www.dai.ed.ac.uk/CVonline/LOCAL_COPIES/MANDUCHI1/Bilateral_Fil…
阅读更多...
HarmonyOS中的多线程并发机制

HarmonyOS中的多线程并发机制

目录 多线程并发1. 多线程并发概述2 多线程并发模型3 TaskPool简介4 Worker简介4.1 Woker注意事项4.2 Woker基本用法示例 5. TaskPool和Worker的对比5.1 实现特点对比5.2 适用场景对比 多线程并发 1. 多线程并发概述 并发模型是用来实现不同应用场景中并发任务的编程模型&…
阅读更多...
【随手笔记】QT避坑一（串口readyRead信号不产生）

【随手笔记】QT避坑一（串口readyRead信号不产生）

问题描述&#xff1a; 使用QT5.15.2版本 测试串口readyRead绑定槽函数&#xff0c;接收到数据后 不能触发 试了很多网友的程序&#xff0c;他们的发布版本可以&#xff0c;但是源码我编译后就不能触发&#xff0c;判断不是代码的问题 看到有人提到QT版本的问题&#xff0c;于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023