背水一战 Windows 10 (77) - 控件（控件基类）: ContentControl, UserControl, Page

作者：webabcd

介绍
背水一战 Windows 10 之控件（控件基类 - ContentControl, UserControl, Page）

ContentPresenter
ContentControl
UserControl
Page

示例
1、演示 ContentPresenter 的基础知识
Controls/BaseControl/ContentControlDemo/ContentPresenterDemo.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.ContentControlDemo.ContentPresenterDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.BaseControl.ContentControlDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <ContentControl Width="400" Margin="5" Content="我是 ContentControl" HorizontalAlignment="Left">
                <ContentControl.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Red" BorderThickness="1">
                            <Grid Background="Yellow">
                                <!--
                                    ContentPresenter - 用来呈现 ContentControl 的 Content
                                        有一堆属性，相关说明请参见文档
                                -->
                                <ContentPresenter HorizontalAlignment="Right" Foreground="Black" FontSize="24" Padding="20" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </ContentControl.Template>
            </ContentControl>

        </StackPanel>
    </Grid>
</Page>

Controls/BaseControl/ContentControlDemo/ContentPresenterDemo.xaml.cs

/*
 * ContentPresenter - 用来呈现 ContentControl 的 Content（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/）
 * 
 * 
 * 注：关于如何创建自定义的 ContentPresenter 请参见 /Controls/CollectionControl/ItemsControlDemo/MyItemPresenterDemo.xaml
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.BaseControl.ContentControlDemo
{
    public sealed partial class ContentPresenterDemo : Page
    {
        public ContentPresenterDemo()
        {
            this.InitializeComponent();
        }
    }
}

2、演示 ContentControl 的基础知识
Controls/BaseControl/ContentControlDemo/ContentControlDemo.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.ContentControlDemo.ContentControlDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.BaseControl.ContentControlDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    xmlns:common="using:Windows10.Common">

    <Page.Resources>
        <!--
            DataTemplate - 数据模板（其是 xaml 语言使用的一种方案，无法在 c# 中定义）
        -->
        <DataTemplate x:DataType="common:Employee" x:Key="DataTemplateMale">
            <Grid Background="Blue">
                <TextBlock Text="{x:Bind Name}" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:DataType="common:Employee" x:Key="DataTemplateFemale">
            <Grid Background="Pink">
                <TextBlock Text="{x:Bind Name}" />
            </Grid>
        </DataTemplate>

        <!--
            自定义数据模板选择器（参见 code-behind 中的代码）
        -->
        <local:MyDataTemplateSelector x:Key="MyDataTemplateSelector" 
                                      DataTemplate1="{StaticResource DataTemplateMale}"
                                      DataTemplate2="{StaticResource DataTemplateFemale}" />
    </Page.Resources>

    
    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <Button Name="button" Content="换个人" Click="button_Click" Margin="5" />

            <ContentControl Name="contentControl" Width="400" Margin="5" HorizontalAlignment="Left"
                            ContentTemplateSelector="{StaticResource MyDataTemplateSelector}">
                <ContentControl.ContentTransitions>
                    <TransitionCollection>
                        <ContentThemeTransition/>
                    </TransitionCollection>
                </ContentControl.ContentTransitions>
            </ContentControl>

        </StackPanel>
    </Grid>
</Page>

Controls/BaseControl/ContentControlDemo/ContentControlDemo.xaml.cs

/*
 * ContentControl - ContentControl（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）
 *     Content - 呈现的内容
 *     ContentTemplate - 数据模板（DataTemplate）
 *     ContentTemplateSelector - 数据模板选择器（如果指定了 ContentTemplate 则此配置无效）
 *     ContentTemplateRoot - 用于获取当前数据模板的根元素（写自定义 ContentControl 时会用到）
 *     ContentTransitions - Content 发生变化时的过度效果
 */

using System;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows10.Common;

namespace Windows10.Controls.BaseControl.ContentControlDemo
{
    public sealed partial class ContentControlDemo : Page
    {
        private IList<Employee> Employees { get; set; } = TestData.GetEmployees(100);

        public ContentControlDemo()
        {
            this.InitializeComponent();
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            // 注：
            // 在 Content 发生变化时会触发 ContentTemplateSelector 和 ContentTransitions（如果只是 DataContext 发生变化则不会有此效果）
            // 所以如果需要 ContentTemplateSelector 和 ContentTransitions 的话，则应该直接设置 ContentControl 的 Content 而不是 DataContext
            contentControl.Content =  Employees[new Random().Next(0, 100)];
        }
    }

    // 自定义 DataTemplateSelector（数据模板选择器）
    // 可以实现在 runtime 时，根据 item 的不同选择不同的数据模板
    public class MyDataTemplateSelector : DataTemplateSelector
    {
        // 数据模板 1（配置在 xaml 端）
        public DataTemplate DataTemplate1 { get; set; }

        // 数据模板 2（配置在 xaml 端）
        public DataTemplate DataTemplate2 { get; set; }

        // 根据 item 的数据的不同，指定的不同的模板
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            var employee = item as Employee;
            if (employee == null || employee.IsMale)
                return DataTemplate1; // 男员工用数据模板 1
            return DataTemplate2; // 女员工用数据模板 2

            // 如果想直接返回指定的资源也是可以的（但是不灵活），类似：return (DataTemplate)Application.Current.Resources["DataTemplateMale"];
        }
    }
}

3、演示 UserControl 的基础知识
Controls/BaseControl/UserControlDemo/UserControlDemo.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.UserControlDemo.UserControlDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.BaseControl.UserControlDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <UserControl Margin="10 0 10 10" HorizontalAlignment="Left" VerticalAlignment="Top">
            <UserControl.Content>
                <Rectangle Width="300" Height="100" Fill="Orange" />
            </UserControl.Content>
        </UserControl>

        <!--
            UserControl 有一个 [ContentProperty(Name = "Content")] 声明，所以在写 xaml 的时候可以省略掉 UserControl.Content
        -->
        <UserControl Margin="10 130 10 10" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Rectangle Width="300" Height="100" Fill="Orange" />
        </UserControl>

    </Grid>
</Page>

Controls/BaseControl/UserControlDemo/UserControlDemo.xaml.cs

/*
 * UserControl - UserControl（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）
 *     Content - 呈现的内容
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.BaseControl.UserControlDemo
{
    public sealed partial class UserControlDemo : Page
    {
        public UserControlDemo()
        {
            this.InitializeComponent();
        }
    }
}

4、演示 Page 的基础知识
Controls/BaseControl/PageDemo/PageDemo.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.PageDemo.PageDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.BaseControl.PageDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" TextWrapping="Wrap" />

        </StackPanel>
    </Grid>
</Page>

Controls/BaseControl/PageDemo/PageDemo.xaml.cs

/*
 * Page - Page（继承自 UserControl, 请参见 /Controls/BaseControl/UserControlDemo/）
 *     TopAppBar, BottomAppBar - 参见 /Controls/NavigationControl/AppBarDemo.xaml 和 /Controls/NavigationControl/CommandBarDemo.xaml
 *     NavigationCacheMode, OnNavigatedFrom(), OnNavigatingFrom(), OnNavigatingFrom() - 参见 /Controls/NavigationControl/FrameDemo.xaml
 *     Frame - 获取当前 Page 的所属 Frame
 */

using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace Windows10.Controls.BaseControl.PageDemo
{
    public sealed partial class PageDemo : Page
    {
        public PageDemo()
        {
            this.InitializeComponent();

            this.Loading += page_Loading;
            this.Loaded += page_Loaded;
            this.Unloaded += page_Unloaded;
        }


        // 在 OnNavigatedTo 之后，由外到内触发 Loading 事件，由内到外触发 Loaded 事件；在 OnNavigatedFrom 之后，由外到内触发 Unloaded 事件（参见 /Controls/BaseControl/FrameworkElementDemo/Demo2.xaml.cs）
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            lblMsg.Text += "OnNavigatedTo";
            lblMsg.Text += Environment.NewLine;
        }
        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            Debug.WriteLine("OnNavigatingFrom");
        }
        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            Debug.WriteLine("OnNavigatedFrom");
        }


        // 在 OnNavigatedTo 之后，由外到内触发 Loading 事件，由内到外触发 Loaded 事件；在 OnNavigatedFrom 之后，由外到内触发 Unloaded 事件（参见 /Controls/BaseControl/FrameworkElementDemo/Demo2.xaml.cs）
        private void page_Loading(FrameworkElement sender, object args)
        {
            lblMsg.Text += "page_Loading";
            lblMsg.Text += Environment.NewLine;
        }
        private void page_Loaded(object sender, RoutedEventArgs e)
        {
            lblMsg.Text += "page_Loaded";
            lblMsg.Text += Environment.NewLine;
        }
        private void page_Unloaded(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("page_Unloaded");
        }
    }
}

OK
[源码下载]

posted @ 2017-12-11 09:07 webabcd 阅读(1618) 评论(0) 编辑收藏举报

刷新页面返回顶部

背水一战 Windows 10 (77) - 控件（控件基类）: ContentControl, UserControl, Page

公告