背水一战 Windows 10 (49) - 控件(集合类): Pivot, Hub
作者:webabcd
介绍
背水一战 Windows 10 之 控件(集合类)
- Pivot
- Hub
示例
1、Pivot 的示例
Controls/CollectionControl/PivotDemo.xaml
- <Page
- x:Class="Windows10.Controls.CollectionControl.PivotDemo"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:local="using:Windows10.Controls.CollectionControl"
- 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">
- <!--
- Pivot - Pivot 控件
- Title, TitleTemplate - 标题
- LeftHeader, LeftHeaderTemplate - 左侧 header
- RightHeader, RightHeaderTemplate - 右侧 header
- HeaderTemplate - PivotItem 的 Header 的 DataTemplate
- SelectionChanged - 选中的 item 发生变化时触发的事件
- PivotItemUnloading - Pivot 内的某个 PivotItem 准备变成选中项时触发的事件
- PivotItemLoaded - Pivot 内的某个 PivotItem 已经变成选中项时触发的事件
- PivotItemUnloading - Pivot 内的某个 PivotItem 准备从选中项变为非选中项时触发的事件
- PivotItemUnloaded - Pivot 内的某个 PivotItem 已经从选中项变为非选中项时触发的事件
- PivotItem - PivotItem 控件
- Header - 用于指定 PivotItem 的 Header,需要通过 Pivot.HeaderTemplate 来设置其 DataTemplate
- -->
- <Pivot Name="pivot" Title="pivot title" Margin="5"
- SelectionChanged="pivot_SelectionChanged"
- PivotItemLoading="pivot_PivotItemLoading" PivotItemLoaded="pivot_PivotItemLoaded" PivotItemUnloading="pivot_PivotItemUnloading" PivotItemUnloaded="pivot_PivotItemUnloaded">
- <Pivot.HeaderTemplate>
- <DataTemplate>
- <TextBlock Text="{Binding}" Foreground="Red" />
- </DataTemplate>
- </Pivot.HeaderTemplate>
- <Pivot.LeftHeader>
- <TextBlock Text="left header" />
- </Pivot.LeftHeader>
- <Pivot.RightHeader>
- <TextBlock Text="right header" />
- </Pivot.RightHeader>
- <PivotItem Header="pivot item header 1">
- <TextBlock Text="pivot item content 1" />
- </PivotItem>
- <PivotItem Header="pivot item header 2">
- <TextBlock Text="pivot item content 2" />
- </PivotItem>
- <PivotItem Header="pivot item header 3">
- <TextBlock Text="pivot item content 3" />
- </PivotItem>
- </Pivot>
- <Button Name="btnLock" Content="对 pivot 锁定或解除锁定" Margin="5" Click="btnLock_Click" />
- <StackPanel Orientation="Horizontal">
- <TextBlock Name="lblMsg1" Margin="5" />
- <TextBlock Name="lblMsg2" Margin="5" />
- </StackPanel>
- </StackPanel>
- </Grid>
- </Page>
Controls/CollectionControl/PivotDemo.xaml.cs
- /*
- * Pivot - Pivot 控件(继承自 ItemsControl, 请参见 /Controls/CollectionControl/ItemsControlDemo/)
- * IsLocked - 是否锁定 Pivot,锁定后只会显示当前选中的 item,而不能切换
- * SelectedItem - 当前选中的 item
- * SelectedIndex - 当前选中的 item 的索引位置
- *
- * PivotItem - PivotItem 控件(继承自 ContentControl, 请参见 /Controls/BaseControl/ContentControlDemo/)
- */
- using System;
- using Windows.UI.Xaml;
- using Windows.UI.Xaml.Controls;
- namespace Windows10.Controls.CollectionControl
- {
- public sealed partial class PivotDemo : Page
- {
- public PivotDemo()
- {
- this.InitializeComponent();
- }
- private void btnLock_Click(object sender, RoutedEventArgs e)
- {
- pivot.IsLocked ^= true;
- }
- private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
- {
- // e.RemovedItems - 本次事件中,被取消选中的项
- // e.AddedItems - 本次事件中,新被选中的项
- lblMsg1.Text = "SelectionChangedEventArgs.AddedItems: " + (e.AddedItems[] as PivotItem).Header.ToString();
- lblMsg1.Text += Environment.NewLine;
- lblMsg1.Text += "Pivot.SelectedIndex: " + pivot.SelectedIndex;
- lblMsg1.Text += Environment.NewLine;
- lblMsg1.Text += "Pivot.SelectedItem: " + (pivot.SelectedItem as PivotItem).Header.ToString();
- }
- // 某 PivotItem 准备变成选中项
- private void pivot_PivotItemLoading(Pivot sender, PivotItemEventArgs args)
- {
- // args.Item - 相关的 PivotItem 对象
- lblMsg2.Text += "pivot_PivotItemLoading: " + args.Item.Header.ToString();
- lblMsg2.Text += Environment.NewLine;
- }
- // 某 PivotItem 已经变成选中项
- private void pivot_PivotItemLoaded(Pivot sender, PivotItemEventArgs args)
- {
- lblMsg2.Text += "pivot_PivotItemLoaded: " + args.Item.Header.ToString();
- lblMsg2.Text += Environment.NewLine;
- }
- // 某 PivotItem 准备从选中项变为非选中项
- private void pivot_PivotItemUnloading(Pivot sender, PivotItemEventArgs args)
- {
- lblMsg2.Text += "pivot_PivotItemUnloading: " + args.Item.Header.ToString();
- lblMsg2.Text += Environment.NewLine;
- }
- // 某 PivotItem 已经从选中项变为非选中项
- private void pivot_PivotItemUnloaded(Pivot sender, PivotItemEventArgs args)
- {
- lblMsg2.Text += "pivot_PivotItemUnloaded: " + args.Item.Header.ToString();
- lblMsg2.Text += Environment.NewLine;
- }
- }
- }
2、Hub 的示例
Controls/CollectionControl/HubDemo.xaml
- <Page
- x:Class="Windows10.Controls.CollectionControl.HubDemo"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:local="using:Windows10.Controls.CollectionControl"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- mc:Ignorable="d">
- <Grid Background="Transparent">
- <TextBlock Name="lblMsg" Margin="10 0 10 10" Width="200" TextWrapping="Wrap" HorizontalAlignment="Left" />
- <SemanticZoom Margin="210 0 10 10">
- <SemanticZoom.ZoomedInView>
- <!--
- Hub - Hub 控件
- DefaultSectionIndex - hub 初始化时,被选中的 HubSection 的索引位置
- Header, HeaderTemplate - hub 的 header
- Orientation - hub 的子元素们的排列方式(Horizontal, Vertical)
- Sections - hub 的 HubSection([ContentProperty(Name = "Sections")])
- SectionHeaderClick - 点击 HubSection 右上角的“查看更多”按钮时触发的事件
- SectionsInViewChanged - 可视区中的 HubSection 发生变化时触发的事件
- HubSection - HubSection 控件
- Header, HeaderTemplate - HubSection 的 header
- ContentTemplate - HubSection 的控件模板([ContentProperty(Name = "ContentTemplate")])
- IsHeaderInteractive - 是否显示 HubSection 右上角的“查看更多”按钮
- -->
- <Hub Name="hub" Orientation="Horizontal" Header="hub title" DefaultSectionIndex="1" SectionHeaderClick="hub_SectionHeaderClick" SectionsInViewChanged="hub_SectionsInViewChanged">
- <HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 1">
- <DataTemplate>
- <TextBlock Text="hub section content 1" />
- </DataTemplate>
- </HubSection>
- <HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 2">
- <DataTemplate>
- <TextBlock Text="hub section content 2" />
- </DataTemplate>
- </HubSection>
- <HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 3">
- <DataTemplate>
- <TextBlock Text="hub section content 3" />
- </DataTemplate>
- </HubSection>
- <HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 4">
- <DataTemplate>
- <TextBlock Text="hub section content 4" />
- </DataTemplate>
- </HubSection>
- <HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 5">
- <DataTemplate>
- <TextBlock Text="hub section content 5" />
- </DataTemplate>
- </HubSection>
- <HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 6">
- <DataTemplate>
- <TextBlock Text="hub section content 6" />
- </DataTemplate>
- </HubSection>
- </Hub>
- </SemanticZoom.ZoomedInView>
- <SemanticZoom.ZoomedOutView>
- <ListView x:Name="listView"/>
- </SemanticZoom.ZoomedOutView>
- </SemanticZoom>
- </Grid>
- </Page>
Controls/CollectionControl/HubDemo.xaml.cs
- /*
- * Hub - Hub 控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
- * SectionsInView - 用于获取当前可视区中显示的全部 HubSection 集合
- * SectionHeaders - 用于获取当前可视区中显示的全部 HubSection 对象的 Header 集合
- *
- * HubSection - HubSection 控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
- *
- *
- * 注:
- * Hub 实现了 ISemanticZoomInformation 接口,所以可以在 SemanticZoom 的两个视图间有关联地切换。关于 ISemanticZoomInformation 请参见 /Controls/CollectionControl/SemanticZoomDemo/ISemanticZoomInformationDemo.xaml
- */
- using System;
- using System.Collections.Generic;
- using Windows.UI.Xaml;
- using Windows.UI.Xaml.Controls;
- namespace Windows10.Controls.CollectionControl
- {
- public sealed partial class HubDemo : Page
- {
- public HubDemo()
- {
- this.InitializeComponent();
- this.Loaded += HubDemo_Loaded;
- }
- private void HubDemo_Loaded(object sender, RoutedEventArgs e)
- {
- // 拿到所有 HubSection 的 header 集合
- List<string> headers = new List<string>();
- foreach (HubSection section in hub.Sections)
- {
- if (section.Header != null)
- {
- headers.Add(section.Header.ToString());
- }
- }
- listView.ItemsSource = headers;
- }
- private void hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
- {
- // 获取通过点击 HubSection 右上角的“查看更多”按钮而被选中的 HubSection 对象
- lblMsg.Text = "hub_SectionHeaderClick: " + e.Section.Header.ToString();
- }
- private void hub_SectionsInViewChanged(object sender, SectionsInViewChangedEventArgs e)
- {
- lblMsg.Text = "";
- // 此次在 hub 中移出的 HubSection
- if (e.RemovedSections.Count > )
- {
- lblMsg.Text += "hub_SectionsInViewChanged RemovedSections: " + e.RemovedSections[].Header.ToString();
- lblMsg.Text += Environment.NewLine;
- }
- // 此次在 hub 中移入的 HubSection
- if (e.AddedSections.Count > )
- {
- lblMsg.Text += "hub_SectionsInViewChanged AddedSections: " + e.AddedSections[].Header.ToString();
- lblMsg.Text += Environment.NewLine;
- }
- lblMsg.Text += "hub.SectionsInView: ";
- lblMsg.Text += Environment.NewLine;
- // 可视区中显示的全部 HubSection
- foreach (var item in hub.SectionsInView)
- {
- lblMsg.Text += item.Header.ToString();
- lblMsg.Text += Environment.NewLine;
- }
- }
- }
- }
OK
[源码下载]
背水一战 Windows 10 (49) - 控件(集合类): Pivot, Hub的更多相关文章
- 背水一战 Windows 10 (48) - 控件(集合类): FlipView
[源码下载] 背水一战 Windows 10 (48) - 控件(集合类): FlipView 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类) FlipView 示例Fl ...
- 背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter
[源码下载] 背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresen ...
- 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组
[源码下载] 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 作者:webabcd 介绍背水一战 Windows 10 之 控件 ...
- 背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter
[源码下载] 背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter 作者:weba ...
- 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid
[源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabc ...
- 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid
[源码下载] 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingS ...
- 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation
[源码下载] 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation 作者:webabcd 介绍背水一战 Wind ...
- 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项
[源码下载] 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合 ...
- 背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制
[源码下载] 背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制 作者:webabcd 介绍背水一战 Windows 10 之 控件(集 ...
随机推荐
- 使用mysql proxy对数据库进行读写分离
服务器安排如下: 192.168.100.128 主 192.168.100.129 从 192.168.100.130 mysql-proxy 1.在100.130中下载安装mysql-proxy ...
- mysql之索引查询1
一 备份数据 备份库: mysqldump:拷贝数据 --database:数据库 基本语法是:mysqldump -h服务器名 -u用户名 -p密码 --database 库名 > 备份路径. ...
- 824. Goat Latin
class Solution { public: string toGoatLatin(string S) { S.push_back(' '); //add a space that the loo ...
- Bayes’s formula for Conditional Probability
Conditional Probability Example:In a batch, there are 80% C programmers, and 40% are Java and C prog ...
- Win7 VS2015环境使用SDL2-2.0.4
之前在VS中使用SDL2,如果只链接SDL2.lib,会提示 error LNK2019: unresolved external symbol _main referenced in functio ...
- 安装了nodejs后在命令行运行npm报错:Error: Cannot find module 'internal/util/types'
报错如下图所示: 解决方法:删除目录“C:\Users\wls\AppData\Roaming\npm\node_modules”下的npm文件夹
- 作用域的一些说明,static关键词
作用域的一些说明 变量分为全局变量和局部变量.学过C语言的童鞋都知道,全局变量的作用域是整个整个文件.在即使在函数内部也有效,但在php中,如果在函数中使用全局变量,php会认为这个变量没有定义.如果 ...
- SVN安装配置与使用
http://www.cnblogs.com/skyway/archive/2011/08/10/2133399.html http://www.cnblogs.com/lidabo/archive/ ...
- s4-3 CSMA
载波侦听多路访问协议 CSMA:Carrier Sense Multiple Access 特点:"先听后发" 改进ALOHA协议的侦听/发送策略 分类 非持续式 持 ...
- 学习刘伟择优excel视频
for each 字符串函数: 默认参数,在子函数中必须要有默认值. 在工作表输入时,F9的功能是把区域编程数组,shift+ctrl+enter功能是把数组分开填入单元格. 创建数组: 1. 2. ...