自定义WPF，带标题容器控件

最新推荐文章于 2025-03-13 14:39:06 发布
最新推荐文章于 2025-03-13 14:39:06 发布
阅读量592 收藏 7
点赞数 8
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37875849/article/details/135622754
版权

效果图：

 控件：带标题的功能区，主要用来分类。

1.App.xaml代码

<Application
    x:Class="HT.ControlWPF.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:HT.ControlWPF"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="{x:Type local:TitleOfPanel}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:TitleOfPanel}">
                        <Border BorderBrush="{TemplateBinding TitleBackground}" BorderThickness="0.5">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <!--  标题  -->
                                <Border
                                    Padding="5"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Background="{TemplateBinding TitleBackground}">
                                    <TextBlock
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Background="Transparent"
                                        Text="{TemplateBinding Title}" />
                                </Border>
                                <!--  功能区  -->
                                <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

2.TitleOfPanel.cs代码

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace HT.ControlWPF
{
    public class TitleOfPanel : Control
    {
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
        }

        /// <summary>
        /// 标题
        /// </summary>
        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
        public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register(nameof(Title), typeof(string), typeof(TitleOfPanel), new PropertyMetadata(string.Empty));

        /// <summary>
        /// 边框和标题背景色
        /// </summary>
        public Brush TitleBackground
        {
            get { return (Brush)GetValue(TitleBackgroundProperty); }
            set { SetValue(TitleBackgroundProperty, value); }
        }
        public static readonly DependencyProperty TitleBackgroundProperty =
            DependencyProperty.Register(nameof(TitleBackground), typeof(Brush), typeof(TitleOfPanel), new PropertyMetadata(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#c6c6c6"))));

        /// <summary>
        /// 功能区内容
        /// </summary>
        public object Content
        {
            get { return (object)GetValue(ContentProperty); }
            set { SetValue(ContentProperty, value); }
        }
        public static readonly DependencyProperty ContentProperty =
            DependencyProperty.Register(nameof(Content), typeof(object), typeof(TitleOfPanel), new PropertyMetadata(null));
    }
}

 3.使用

<Window
    x:Class="HT.ControlWPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:HT.ControlWPF"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    FontSize="14"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <StackPanel>
        <local:TitleOfPanel
            Title="标题1"
            Margin="5"
            TitleBackground="#c6c6c6">
            <local:TitleOfPanel.Content>
                <WrapPanel>
                    <Button
                        Margin="5"
                        Padding="5"
                        Command="{Binding TestClick}"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                </WrapPanel>
            </local:TitleOfPanel.Content>
        </local:TitleOfPanel>
        <local:TitleOfPanel
            Title="标题2"
            Margin="5"
            TitleBackground="#c6c6c6">
            <local:TitleOfPanel.Content>
                <WrapPanel>
                    <Button
                        Margin="5"
                        Padding="5"
                        Command="{Binding TestClick}"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                    <Button
                        Margin="5"
                        Padding="5"
                        Content="测试" />
                </WrapPanel>
            </local:TitleOfPanel.Content>
        </local:TitleOfPanel>
    </StackPanel>
</Window>

WPF中如何设置自定义控件
A_nanda的博客
03-01 1433
因此我们采取另一种方式，将Button放到一个带有CornerRadius（角半径）的容器内，Button的Height和Width与容器的Height和Width相同，不显示Button的边框，利用容器的边框显示，间接实现Button圆角的功能。倒角的半径理论上是等于正方形边长的一半，也就是元的半径。圆角按钮可以做的话，那么圆形按钮怎么做呢，其实也挺简单的只要按照圆角按钮的设置方式，只要能将包裹按钮的四个倒角加起来组成正方形就行了，说明：为方便和圆角按钮进行对比，我将两个按钮放置在一起，用分割线分开。
WPF 自定义标题
myangells的专栏
01-29 828
分两个区域，左侧为标题区，右侧为标题按钮区。
自定义控件处容器（拖动）
04-25
程序可以运行，添加一个控件后用鼠标滑动控件出容器
WPF中实现自定义虚拟容器(实现VirtualizingPanel)
weixin_30877755的博客
09-07 487
在WPF应用程序开发过程中，大数据量的数据展现通常都要考虑性能问题。有下面一种常见的情况:原始数据源数据量很大，但是某一时刻数据容器中的可见元素个数是有限的，剩余大多数元素都处于不可见状态，如果一次性将所有的数据元素都渲染出来则会非常的消耗性能。因而可以考虑只渲染当前可视区域内的元素，当可视区域内的元素需要发生改变时，再渲染即将展现的元素，最后将不再需要展现的元素清除掉，这样可以大大提高性能。在W...
WPF 布局容器介绍（大全）
最新发布
猪猪的博客
03-13 215
详细介绍wpf布局原则 WPF布局容器
WPF 实现带标题的TextBox
weixin_34128839的博客
08-10 336
这篇博客将分享在WPF中如何创建一个带Title的TextBox。首先请看一下最终的效果， 实现思路：使用TextBlock+TextBox来实现，TextBlock用来显示Title。 实现代码， TitleTextBox [TemplatePart(Name = TitleTextBlockKey, Type = typeof(TextBlock))] pub...
WPF：带头的容器
sheila_1988的博客
02-21 1142
1、GroupBox 用来组织各种控件的控件。把GroupBox 的内容属性设置为一个可以包含多个子内容的中间控件（intermediate control）与Content 属性一样，Header 属性可以被设置为任意类型的对象。 2、Expander 包含了一个按钮，可以展开或者折叠它所包含的内容。（默认情况下，Expander 处于折叠状态。）Expan
WPF自定义控件 —— 布局
weixin_30492047的博客
04-16 260
本篇是上一篇自绘的补充，但需要一定的WPF相关知识，感谢Clingingboy 通宵达旦的帮助。 一.ScrollViewer 在前一篇我们做了一个可拖动的矩形，但你是否发现当矩形拖出背景后就不见了，一般来说对于不可见区域需要有ScrollBar来呈现，如图: 对于这一应用在WPF中最常用的应该在控件外面包个ScrollViewer,那么如何使得我们的控件支持Scrol...
WPF如何自定义TabControl控件样式示例详解
08-27
WPF自定义TabControl控件样式示例详解 在 WPF 应用程序中，TabControl控件是非常常用的控件之一。然而，默认的TabControl控件样式可能不符合我们的要求。这篇文章将为大家介绍如何自定义TabControl控件样式，包括...
WPF自定义时间控件，可选择日期、时间
04-13
- 创建一个新的WPF控件通常从创建一个UserControl开始，这是WPF中的一个容器类，可以包含多个其他UI元素。 - 在`WPF_DateTimePicker\UserControls`目录下的文件可能包含了自定义DateTimePicker控件的源代码。一般...
用于缩放和平移的WPF自定义控件
04-08
标题“用于缩放和平移的WPF自定义控件”指的是这样一个控件：它允许用户通过鼠标或触摸操作放大和缩小显示的内容，并能在内容区域中自由移动视图。这通常涉及到处理鼠标输入、手势识别以及图形变换等技术。 描述中...
wpf温度计自定义组件例子
09-21
wpf温度计自定义组件例子
WPF:简单容器
sheila_1988的博客
02-21 1488
1、Label 只对文本有用。 支持访问键（access key）。有了访问键，可以在用户按下Alt 键和某一个字母键时，对Lable文本中的某个字母做特殊处理。当用户按下Alt 键和某一个字母键时，Label 允许你指定哪个元素获得焦点。在字母之前增加一条下划线就可以指派某个字母（该字母下出现的下划线是由Windows 的设置决定），然后用Label 的Target 属性（UIEle
WPF 窗口Title的自定义
m0_48915942的博客
10-17 3223
目录一、WindowChrome1. ResizeBorderThickness2. CaptionHeight3. CornerRadius4. GlassFrameThickness5. NonClientFrameEdges6. UseAeroCaptionButtons7. IsHitTestVisibleInChrome二、Adorner、Decorator 和 AdornerDecorator三、自由更改Title的显示，保留放大、缩小和关闭按钮。四、自由更改Title的显示，隐藏放大、缩小和关
WPF自学入门（六）WPF带标题的内容控件简单介绍
weixin_30918633的博客
03-13 225
在WPF自学入门（二）WPF-XAML布局控件的文章中分别介绍StackPanel,WarpPanel,DockPanel,Grid,Canvas五种布局容器的使用，可以让我们大致了解容器可以使用在什么地方。今天我们就来简单了解一下WPF中的三个带标题的内容控件，分别是GroupBox,TabControl和Expander 一、GroupBox控件 这个控件可以叫做...
WPF系列教程（十五）：带标题的内容控件——GroupBox、TableItem、Expander
qq_43511299的博客
11-25 2531
GroupBox GroupBox的标题属性：Header=“GroupBox” 在GroupBox中可以放置其他布局容器，例如StackPannel。 <GroupBox x:Name="groupBox" Header="GroupBox"> <StackPanel> <RadioButton Content="1" Margin="10"/> <RadioButton Content="2" Margin="10"/&
WPF容器控件类介绍
ShineRoyal
03-01 464
WPF容器控件类介绍 https://blog.youkuaiyun.com/wushang923/article/details/6564641
WPF基础四：UI的相关类 (4)  HeaderedContentControl类
hd51cc的博客
04-04 1185
2.4）带标题内容控件 2.4.1 Expander 2.4.2 GroupBox 2.4.3 HeaderedContentControl 2.4.4 TabItem
自定义组件开发七 自定义容器
编程之美
06-19 651
概述 自定义容器本质上也是一个组件，常见的 LinearLayout、FrameLayout、GridLayout、ScrollView和 RelativeLayout 等等组件都是容器，容器除了有自己的外观，还能用来容纳各种组件，以一种特定的规则规定组件应该在什么位置、显示多大。 一般情况下，我们更关注自定义组件的外观及功能，但自定义容器则更关注其内的组件怎么排列和摆放，比如线性布局 Lin...
WPF实现横竖自定义进度条控件分享
在WPF中，可以非常方便地通过XAML和C#结合的方式来创建自定义的控件。本次分享的知识点将围绕如何创建一个自定义的WPF进度条控件展开，既包括横向进度条也包括竖向进度条。 ### WPF基础知识 在深入知识点前，先来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值