[源码下载]

背水一战 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(); 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
[源码下载]

背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page的更多相关文章

  1. 背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画)

    [源码下载] 背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画) 作者:webabcd 介绍背水一战 Windows 10 之 动画 PopInThemeA ...

  2. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  3. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  4. 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

    [源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...

  5. 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing

    [源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...

  6. 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch

    [源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...

  7. 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox

    [源码下载] 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Sel ...

  8. 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    [源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...

  9. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    [源码下载] 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) AutoSug ...

随机推荐

  1. Android下的几种时间格式转换

    更多更全的工具类,请参考github上的Blankj/AndroidUtilCode 将毫秒转换为小时:分钟:秒格式 public static String ms2HMS(int _ms){ Str ...

  2. Spring4新特性

    参考 : https://jinnianshilongnian.iteye.com/blog/1990081

  3. python_06 函数、全局变量与局部变量、函数递归

    函数 1.函数的定义: def 函数名(参数): #解释函数的功能 代码块 返回值 函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日后根据函数名调用函数 函数体:函数中进行 ...

  4. 尚硅谷springboot学习26-嵌入式servlet容器自动配置、启动原理

    EmbeddedServletContainerAutoConfiguration:嵌入式的Servlet容器自动配置 @AutoConfigureOrder(Ordered.HIGHEST_PREC ...

  5. 微信小程序--getLocation需要在app.json中声明permission字段

    在微信小程序开发中,需要获取用户所在地理位置,结果提示‘getLocation需要在app.json中声明permission字段’ 这是因为开发者需要填写获取用户地理位置的用途说明. 具体解决方法: ...

  6. cdnbest节点动态ip配置教程

    1.安装节点后,在未初始化里初始化节点,如下图操作,要选择动态ip(注:动态ip节点不支持添加辅ip) 服务器如果是动态ip,选择了动态ip选项,节点在自动更换了新的ip后,在节点列表里的ip和dns ...

  7. linux 大容量磁盘分区工具parted

    1. Msdos和Gpt的区别 fdisk  :只能分msdos分区parted :可以分msdos和gpt分区 2. MSDOS特点最大支持2TB卷大小.每个磁盘最多只能有4个主分区(或3个主分区, ...

  8. python 删除非空文件夹

    import os import shutil os.remove(path) #删除文件 os.removedirs(path) #删除空文件夹 shutil.rmtree(path) #递归删除文 ...

  9. C++成员函数在内存中的存储方式

    用类去定义对象时,系统会为每一个对象分配存储空间.如果一个类包括了数据和函数,要分别为数据和函数的代码分配存储空间.按理说,如果用同一个类定义了10个对象,那么就需要分别为10个对象的数据和函数代码分 ...

  10. Mac Eclipse 配置 SDK Manager Proxy (代理)

    默认的下载地址非常慢,可以换成东软的代理. 顶部任务栏中选择SDK Manager -> 偏好设置 : 可以看到下载速度快了很多,出现类很多安装选项: 安装好后,在偏好设置窗口中,选择Clear ...