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

2022-10-23 16:48:44

介绍
背水一战 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();

        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(, )];

        }

    }

    // 自定义 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
[源码下载]

码农公寓

相关文章