[UWP]了解模板化控件(3):实现HeaderedContentControl

简介: 原文:[UWP]了解模板化控件(3):实现HeaderedContentControl1. 概述 来看看这段XMAL: 是不是觉得它们中出了一个叛徒?这个示例中除了ListBox控件其它都自带Header,但是ListBox没有Header属性,只好用一个TextBlock模仿它的Header。
原文: [UWP]了解模板化控件(3):实现HeaderedContentControl

1. 概述

来看看这段XMAL:

<StackPanel Width="300">
    <TextBox Header="TextBox" />
    <ComboBox Header="ComboBox" HorizontalAlignment="Stretch"/>
    <AutoSuggestBox Header="AutoSuggestBox" />
    <TextBlock Text="ListBox" />
    <ListBox>
        <ListBoxItem Content="ListBoxItem 1" />
        <ListBoxItem Content="ListBoxItem 2" />
        <ListBoxItem Content="ListBoxItem 3" />
    </ListBox>
</StackPanel>

img_d69fe20f518c761bc3dcc17fec58b821.png

是不是觉得它们中出了一个叛徒?这个示例中除了ListBox控件其它都自带Header,但是ListBox没有Header属性,只好用一个TextBlock模仿它的Header。这样就带来一个问题:只有ListBox的Header高度和其它控件不一致。

既然现在讨论的是自定义控件,这里就用自定义控件的方式解决这个问题。首先想到最简单的方法,就是自定义一个HeaderedContentControl,如名字所示,这个控件继承自ContentControl并拥有Header属性,用起来大概是这样:

<HeaderedContentControl Header="ListBox">
    <ListBox/>
</HeaderedContentControl>

这样,只要在HeaderedContentControl的样式中模仿其它含Header属性的控件,就能统一Header的外观。

WPF中本来就有这个控件,它是Expander、GroupBox、TabItem等诸多拥有Header属性的控件的基类,十分方便好用。UWP中模仿这个控件很简单,而且很适合用来学习自定义控件的进阶知识。

2. 定义HeaderedContentControl结构

比起WPF,借鉴Silverlight的HeaderedContentControl比较好,因为Silverlight的比较简单。HeaderedContentControl只需要在继承ContentControl后添加两个属性:Header和HeaderTemplate。

public class HeaderedContentControl : ContentControl
{
    public HeaderedContentControl()
    {
        this.DefaultStyleKey = typeof(HeaderedContentControl);
    }

    /// <summary>
    /// 获取或设置Header的值
    /// </summary>  
    public object Header
    {
        get { return (object)GetValue(HeaderProperty); }
        set { SetValue(HeaderProperty, value); }
    }

    /// <summary>
    /// 标识 Header 依赖属性。
    /// </summary>
    public static readonly DependencyProperty HeaderProperty =
        DependencyProperty.Register("Header", typeof(object), typeof(HeaderedContentControl), new PropertyMetadata(null, OnHeaderChanged));

    private static void OnHeaderChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        HeaderedContentControl target = obj as HeaderedContentControl;
        object oldValue = (object)args.OldValue;
        object newValue = (object)args.NewValue;
        if (oldValue != newValue)
            target.OnHeaderChanged(oldValue, newValue);
    }

    /// <summary>
    /// 获取或设置HeaderTemplate的值
    /// </summary>  
    public DataTemplate HeaderTemplate
    {
        get { return (DataTemplate)GetValue(HeaderTemplateProperty); }
        set { SetValue(HeaderTemplateProperty, value); }
    }

    /// <summary>
    /// 标识 HeaderTemplate 依赖属性。
    /// </summary>
    public static readonly DependencyProperty HeaderTemplateProperty =
        DependencyProperty.Register("HeaderTemplate", typeof(DataTemplate), typeof(HeaderedContentControl), new PropertyMetadata(null, OnHeaderTemplateChanged));

    private static void OnHeaderTemplateChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        HeaderedContentControl target = obj as HeaderedContentControl;
        DataTemplate oldValue = (DataTemplate)args.OldValue;
        DataTemplate newValue = (DataTemplate)args.NewValue;
        if (oldValue != newValue)
            target.OnHeaderTemplateChanged(oldValue, newValue);
    }

    protected virtual void OnHeaderChanged(object oldValue, object newValue)
    {
    }

    protected virtual void OnHeaderTemplateChanged(DataTemplate oldValue, DataTemplate newValue)
    {
    }
}

3. 设计样式

在C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml中找到ContentControl的样式。

img_7b78649c5b041eabf2fbf55d60d0b6c2.png

再从TextBox的Style中找到HeaderContentPresenter
img_c78c743352ac37f98de87d5443b326b8.png

提示: 随便找个有ThemeResource的XAML,譬如Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}",在资源名称(ApplicationPageBackgroundThemeBrush)上按"F12",即可导航到存放ThemeResource的generic.xaml。

组合起来,HeaderedContentControl的默认样式就完成了。

<Style TargetType="local:HeaderedContentControl">
    <Setter Property="HorizontalContentAlignment"
            Value="Left" />
    <Setter Property="VerticalContentAlignment"
            Value="Top" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:HeaderedContentControl">
                <StackPanel>
                    <ContentPresenter x:Name="HeaderContentPresenter"
                                      Foreground="{ThemeResource TextControlHeaderForeground}"
                                      Margin="0,0,0,8"
                                      Content="{TemplateBinding Header}"
                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
                                      FontWeight="Normal" />
                    <ContentPresenter Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Margin="{TemplateBinding Padding}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

4. 使用

 <StackPanel Visibility="Collapsed">
    <TextBox Header="TextBox" />
    <ComboBox Header="ComboBox"
              HorizontalAlignment="Stretch" />
    <AutoSuggestBox Header="AutoSuggestBox" />
    <local:HeaderedContentControl Header="ListBox">
        <ListBox>
            <ListBoxItem Content="ListBoxItem 1" />
            <ListBoxItem Content="ListBoxItem 2" />
            <ListBoxItem Content="ListBoxItem 3" />
        </ListBox>
    </local:HeaderedContentControl>
</StackPanel>

img_93e13a22b0588d7f11f17d8d333edb6c.png

调用代码及效果。这样外观就统一了。

注意: 我移除了 x:DeferLoadStrategy="Lazy"这句,这个知识点比较适合放在有关性能的主题里讨论。

目录
相关文章
|
C# 容器
WPF技术之StatusBar控件
WPF StatusBar控件用于在应用程序底部显示状态信息。它提供了一个容器,用于展示与应用程序相关的各种状态信息。
622 0
|
Web App开发 C#
WPF自定义控件08:FlatRoundImage
在不少的应用程序中,用户中心的个人页面经常需要显示头像,这个当前主流的做法就是用户上传一个图片,系统进行截取并显示为一个圆形的轮廓,即圆形的照片。本文将介绍一下自定义的图片控件FlatRoundImage,它是一个UserControl控件,自身携带UI样式和后台逻辑。
655 0
WPF自定义控件08:FlatRoundImage
WPF自定义控件03:FlatCheckBox
本文通过在WPF中引入Font Awesome图标字体来实现自定义FlatCheckBox控件的UI绘图。用户只需要在窗体上引入自定义的FlatCheckBox控件即可使用具有Flat UI效果的控件,非常方便。
728 0
WPF自定义控件03:FlatCheckBox
WPF自定义控件06:FlatComboBox
在不少的应用程序中,经常需要使用下拉框(ComboBox)控件来从类别字段中选择,这样可以限定值的范围,让数据更加的规范,便于统计和分析。本文将介绍一下自定义的下拉框控件FlatComboBox,它与FlatCheckBox实现过程非常类似,它是继承自ComboBox,但使用自定义的UI样式来美化界面。下面将详细介绍具体的实现细节。
835 0
WPF自定义控件06:FlatComboBox
|
前端开发 C# Windows
WPF自定义控件01:FlatButton
主要介绍一下WPF如何实现自定义控件,通过继承Button控件,和自定义样式来实现Flat样式的漂亮Button。虽然这个FlatButton也可以通过内置的样式达到同样的效果,但自定义控件可以更好的封装和重用,使用起来更加的方便。
870 0
WPF自定义控件01:FlatButton
|
C# 开发工具 Windows
WindowsXamlHost:在 WPF 中使用 UWP 控件库中的控件
原文 WindowsXamlHost:在 WPF 中使用 UWP 控件库中的控件 在 WindowsXamlHost:在 WPF 中使用 UWP 的控件(Windows Community Toolkit) 一文中,我们说到了在 WPF 中引入简单的 UWP 控件以及相关的注意事项。
1474 0
|
C# Android开发
Wpf 抽屉效果
原文:Wpf 抽屉效果 在android开发中有抽屉效果,就是在页面的边上有一个按钮,可以通过点击或者拖拽这个按钮,让页面显示。Wpf也可以实现相同的效果。   主要是通过一个DoubleAnimation和RectAnimation动画实现 ...
1432 0
|
C# Windows
WPF实现抽屉效果
原文:WPF实现抽屉效果 界面代码(xaml): ...
1548 0
|
前端开发 JavaScript C#
WPF中使用cefsharp
原文:WPF中使用cefsharp 新入职一家公司,由写服务端接口变成了软硬件通信、服务器、客户端、C/S、B/S乱七八糟各种打杂。
2029 0
|
UED 容器
[UWP]了解模板化控件(2.1):理解ContentControl
原文:[UWP]了解模板化控件(2.1):理解ContentControl UWP的UI主要由布局容器和内容控件(ContentControl)组成。布局容器是指Grid、StackPanel等继承自Panel,可以拥有多个子元素的类。
1245 0