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

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 HorizontalAlignment="Right" Foreground="Black" FontSize="24" Padding="20" />
                            Grid>
                        Border>
                    ControlTemplate>
                ContentControl.Template>
            ContentControl>

        StackPanel>
    Grid>
Page>

/*
 * 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();
        }
    }
}

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 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>

        
        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>

/*
 * 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 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"];
        }
    }
}

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 Margin="10 130 10 10" HorizontalAlignment="Left" VerticalAlignment="Top">
            Rectangle Width="300" Height="100" Fill="Orange" />
        UserControl>

    Grid>
Page>

/*
 * 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();
        }
    }
}

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>

/*
 * 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");
        }
    }
}