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

于 2024-01-16 13:45:04 发布
阅读量422 收藏 6
点赞数 8
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>

是这个韬呀
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF如何自定义TabControl控件样式示例详解
12-25
默认的TabControl标题是使用TabPanel容器包含的。要想实现TabControl标题头平均分布，需要把TabPanel替换成UniformGrid； 替换后的TabControl样式如下： <Style x:Key="TabControlStyle" Ta
WPF 的内部世界（控件与布局）
02-23 268
我一开始算是比较抵触WPF的，因为用的人少吗。感觉都是窗体应用能和Winform有什么区别。可是我错了，非常感谢我的讲师，给我推荐刘铁猛的《深入浅出WPF》，让我了解到了WPF的魅力——数据驱动UI 。 所以，这么优秀的框架，我想写下来，都知道WPF开发人员非常少，以至于大部分教程视频都是10年前的。我记录下来，不是为了什么，是真的喜欢WPF，那种“怪诞不经”的感觉。 一、UI布局 俗话说：“人靠...
WPF基础四：UI的相关类 (4)  HeaderedContentControl类
hd51cc的博客
04-04 942
2.4）带标题内容控件 2.4.1 Expander 2.4.2 GroupBox 2.4.3 HeaderedContentControl 2.4.4 TabItem
WPF基础五：UI⑤ 带标题的条目控件ToolBar
hd51cc的博客
05-01 862
Object->->DispatcherObject->DependencyObject->Visual->UIElement->FrameworkElement->Control->ItemsControl->HeaderedItemsControl->ToolBar ToolBar 为一组命令或控件提供容器。 ToolBar控件提供溢出的机制，该机制将不适合的项放置在ToolBar溢出区中。用户只能移动或调整父ToolBarTra...
WPF自定义嵌入弹框控件，支持内容标题自定义
最新发布
acheng
07-10 748
最近为了实现WPF中弹框组件写了一个小例子： 组件要求： 1.自定义标题 2自定义标题颜色 3提供关闭按钮， 4.弹框内容可由调用方自行嵌入
WPF页面布局-容器控件
IT Girl
04-26 2886
页面布局：指的是子控件的大小，位置的控制。           StackPanel：把子元素按横向或纵向的顺序进行排列。窗体缩小控件跟着缩小。其中的一个属性控制横向还是纵向排列-Orientation。 <Window x:Class="页面布局.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/p
WPF 用户控件(UserControl)
热门推荐
L.的博客
12-12 1万+
简介 "用户控件"继承自UserControl,而UserControl继承自ContentControl,也就是内容控件 UserControl和Window是一个层次上的，都有xaml和cs文件 流程 创建用户控件 写好用户控件 <UserControl x:Class="WpfDemo.UserControlDemo.OwnUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presenta
WPF 自定义UserControl
flysh05的专栏
06-05 3211
有时候需要按照需求创建自定义的控件，避免重复编码，下面演示如何添加UserConrol，如果在项目中引用创建好的UserControl。
自定义控件处容器（拖动）
04-25
程序可以运行，添加一个控件后用鼠标滑动控件出容器
Wpf自定义控件ToggleSwitch
11-23
从国外开源网站上找到的效果非常好的WPF自定义控件。切换开关控件(WpfToggleSwitch)。
WPF自定义控件和样式之自定义按钮（Button）
08-27
接触WPF也有两个多月了，有了一定的理论基础和项目经验，现在打算写一个系列，做出来一个WPF的控件库。下面这篇文章主要给大家介绍了关于WPF自定义控件和样式之自定义按钮（Button）的相关资料，需要的朋友可以参考下。
wpf温度计自定义组件例子
09-21
wpf温度计自定义组件例子
WPF自定义表格控件
06-10
WPF自定义控件，动态添加、删除行，支持编辑，对外提供DataTable数据
WPF自定义VirtualizingPanel，实现界面动态布局
10-31
通过自定义扩展VirtualizingPanel，结合ListBox控件，实现了界面布局的灵活配置，支持1*2,1*3，2*2等任何布局方式，并且支持滚动条
wpf可框选grid容器.rar
12-25
参考 https://www.cnblogs.com/CSSZBB/p/11588931.html#4468427 开发的wpf可框选grid容器 重写grid控件，附加属性-是否框选，路由事件-框选控件集合 本代码以框选checkbox为例，如需选择其他控件集合，请自行修改
C# wpf style实现PART可替换控件
11-10
在style中定义了一些样式，比如容器的外部样式（比如自定义窗口标题栏，此时窗口是容器，标题栏是外部样式），使用时只能在容器内部放置控件，此时想要在容器的外部样式中添加控件是不行的。但有时候需要在不同的...
WPF编程宝典 part1
07-20
18.1 理解WPF中的自定义元素 454 18.2 构建基本的用户控件 456 18.2.1 定义依赖项属性 456 18.2.2 定义路由事件 459 18.2.3 添加标记 460 18.2.4 使用控件 462 18.2.5 命令支持 462 18.2.6 深入分析用户控件 465 ...
C# WPF Win7 标题栏添加按钮（模拟）
06-06 4659
C# Wpf Win7窗体标题栏添加按钮
wpf 自定义控件 实例
06-30
### 回答1： WPF（Windows Presentation Foundation）是一种用于创建功能丰富的用户界面的技术，它提供了许多预定义的控件，但也支持自定义控件来满足更特定的需求。 在WPF中，我们可以通过扩展现有的控件或创建全新的控件来自定义控件。具体步骤如下： 1. 创建一个新的类，继承自WPF中的控件类（如Button、TextBox等），这个新类将成为我们自定义控件的基类。 2. 在新类中添加需要的属性、方法和事件，以满足我们的特定需求。我们可以根据需要自定义控件的外观、行为和逻辑。 3. 使用WPF的外观系统来定义自定义控件的视觉效果。可以使用XAML来定义控件的样式、模板和触发器，也可以通过代码动态创建控件。 4. 在控件的构造函数中初始化控件的默认属性和事件。 5. 可选地，可以实现控件的依赖属性，这样就可以通过绑定的方式将数据与控件关联起来。 6. 在需要使用自定义控件的地方，将控件添加到XAML布局或通过代码创建并添加到视觉树中。 通过自定义控件，我们可以实现更灵活、更具个性化的用户界面，同时提供更好的用户体验。自定义控件可以适应各种复杂的场景和需求，从而提供更具创意和创新性的用户界面设计。 总结来说，使用WPF自定义控件的过程包括创建扩展自控件基类、添加属性和事件、定义外观效果、初始化属性和事件、实现依赖属性等步骤。自定义控件能够满足特定需求，提供更灵活、个性化的用户界面。 ### 回答2： WPF（Windows Presentation Foundation）是微软推出的一种优秀的用户界面开发技术，允许开发者创建高度可定制的界面。而自定义控件则是WPF中的一种重要功能，它允许开发者根据自己的需求创建全新的用户界面元素。 自定义控件实例如下： 我们假设要创建一个自定义按钮控件，该按钮有独特的外观和交互行为。首先，我们需要在WPF应用程序中定义一个新的自定义控件类，该类继承自Button类。然后，我们可以在控件类中添加新的依赖属性以实现更多的定制化选项。 在控件类中，我们可以重写OnApplyTemplate方法以定义在控件模板中使用的可视化元素。比如，我们可以定义一个Grid作为按钮的视觉部分，并在Grid中添加一个Border作为按钮的背景。还可以添加鼠标事件处理程序以响应用户的交互动作。 接下来，我们需要在XAML文件中使用我们自定义的按钮控件。我们可以在Window或者其他容器中引用自定义按钮，并设置其属性和事件处理程序。比如，我们可以设置按钮的背景颜色为蓝色，文本为“点击我”，并为按钮的Click事件添加一个处理方法。 通过这种方式，我们可以实现一个具有独特外观和交互行为的自定义按钮控件。开发者可以根据自己的需求定义更多的自定义控件，从而为用户提供更灵活和丰富的界面体验。 总而言之，WPF中的自定义控件是一种强大的功能，它允许开发者创建全新的用户界面元素，实现更高度的定制化和交互行为。通过合理地使用自定义控件，开发者可以为用户提供更好的用户界面体验。 ### 回答3： WPF（Windows Presentation Foundation）是一个用于创建 Windows 桌面应用程序的开发框架，它提供了丰富的图形化用户界面（GUI）设计工具和功能。在 WPF 中，我们可以创建自定义控件来满足特定的需求。 自定义控件是指在原有的 WPF 控件基础上进行扩展或重写，以满足特定场景的需求。通过自定义控件，我们可以实现更加灵活的界面设计和交互方式。 创建自定义控件的过程包括以下几个步骤： 1. 继承现有的 WPF 控件：可以选择一个现有的 WPF 控件作为基类，然后通过扩展或重写其功能来实现自定义控件。例如，我们可以继承 Button 控件，并添加一些额外的属性和事件来实现一个特定的按钮效果。 2. 添加依赖属性：依赖属性是 WPF 中一种特殊的属性，它可以提供数据的绑定和通知机制。通过添加依赖属性，我们可以在自定义控件中定义可以被外部代码修改和引用的属性。 3. 创建控件模板：控件模板定义了控件的外观和布局方式。可以通过 XAML 或代码方式创建控件模板，并将其应用到自定义控件中。 4. 添加样式和模板绑定：可以为自定义控件添加样式，定义其在不同状态下的外观效果。同时，可以通过模板绑定将控件属性和模板中的元素进行关联。 创建完成后，我们可以在 XAML 中使用自定义控件，就像使用任何其他的 WPF 控件一样。可以设置自定义控件的属性、订阅事件，并将其嵌入到应用程序的界面中。 总的来说，WPF 的自定义控件功能可以帮助开发者实现更加灵活和个性化的用户界面设计。通过继承和扩展现有的控件，添加依赖属性和控件模板，我们可以创建出符合特定需求的自定义控件，并在应用程序中灵活使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值