[源码下载]

背水一战 Windows 10 (49) - 控件(集合类): Pivot, Hub

作者:webabcd

介绍
背水一战 Windows 10 之 控件(集合类)

  • Pivot
  • Hub

示例
1、Pivot 的示例
Controls/CollectionControl/PivotDemo.xaml

  1. <Page
  2. x:Class="Windows10.Controls.CollectionControl.PivotDemo"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:Windows10.Controls.CollectionControl"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d">
  9.  
  10. <Grid Background="Transparent">
  11. <StackPanel Margin="10 0 10 10">
  12.  
  13. <!--
  14. Pivot - Pivot 控件
  15. Title, TitleTemplate - 标题
  16. LeftHeader, LeftHeaderTemplate - 左侧 header
  17. RightHeader, RightHeaderTemplate - 右侧 header
  18. HeaderTemplate - PivotItem 的 Header 的 DataTemplate
  19. SelectionChanged - 选中的 item 发生变化时触发的事件
  20. PivotItemUnloading - Pivot 内的某个 PivotItem 准备变成选中项时触发的事件
  21. PivotItemLoaded - Pivot 内的某个 PivotItem 已经变成选中项时触发的事件
  22. PivotItemUnloading - Pivot 内的某个 PivotItem 准备从选中项变为非选中项时触发的事件
  23. PivotItemUnloaded - Pivot 内的某个 PivotItem 已经从选中项变为非选中项时触发的事件
  24.  
  25. PivotItem - PivotItem 控件
  26. Header - 用于指定 PivotItem 的 Header,需要通过 Pivot.HeaderTemplate 来设置其 DataTemplate
  27. -->
  28.  
  29. <Pivot Name="pivot" Title="pivot title" Margin="5"
  30. SelectionChanged="pivot_SelectionChanged"
  31. PivotItemLoading="pivot_PivotItemLoading" PivotItemLoaded="pivot_PivotItemLoaded" PivotItemUnloading="pivot_PivotItemUnloading" PivotItemUnloaded="pivot_PivotItemUnloaded">
  32. <Pivot.HeaderTemplate>
  33. <DataTemplate>
  34. <TextBlock Text="{Binding}" Foreground="Red" />
  35. </DataTemplate>
  36. </Pivot.HeaderTemplate>
  37. <Pivot.LeftHeader>
  38. <TextBlock Text="left header" />
  39. </Pivot.LeftHeader>
  40. <Pivot.RightHeader>
  41. <TextBlock Text="right header" />
  42. </Pivot.RightHeader>
  43.  
  44. <PivotItem Header="pivot item header 1">
  45. <TextBlock Text="pivot item content 1" />
  46. </PivotItem>
  47. <PivotItem Header="pivot item header 2">
  48. <TextBlock Text="pivot item content 2" />
  49. </PivotItem>
  50. <PivotItem Header="pivot item header 3">
  51. <TextBlock Text="pivot item content 3" />
  52. </PivotItem>
  53. </Pivot>
  54.  
  55. <Button Name="btnLock" Content="对 pivot 锁定或解除锁定" Margin="5" Click="btnLock_Click" />
  56.  
  57. <StackPanel Orientation="Horizontal">
  58. <TextBlock Name="lblMsg1" Margin="5" />
  59. <TextBlock Name="lblMsg2" Margin="5" />
  60. </StackPanel>
  61.  
  62. </StackPanel>
  63. </Grid>
  64. </Page>

Controls/CollectionControl/PivotDemo.xaml.cs

  1. /*
  2. * Pivot - Pivot 控件(继承自 ItemsControl, 请参见 /Controls/CollectionControl/ItemsControlDemo/)
  3. * IsLocked - 是否锁定 Pivot,锁定后只会显示当前选中的 item,而不能切换
  4. * SelectedItem - 当前选中的 item
  5. * SelectedIndex - 当前选中的 item 的索引位置
  6. *
  7. * PivotItem - PivotItem 控件(继承自 ContentControl, 请参见 /Controls/BaseControl/ContentControlDemo/)
  8. */
  9.  
  10. using System;
  11. using Windows.UI.Xaml;
  12. using Windows.UI.Xaml.Controls;
  13.  
  14. namespace Windows10.Controls.CollectionControl
  15. {
  16. public sealed partial class PivotDemo : Page
  17. {
  18. public PivotDemo()
  19. {
  20. this.InitializeComponent();
  21. }
  22.  
  23. private void btnLock_Click(object sender, RoutedEventArgs e)
  24. {
  25. pivot.IsLocked ^= true;
  26. }
  27.  
  28. private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
  29. {
  30. // e.RemovedItems - 本次事件中,被取消选中的项
  31. // e.AddedItems - 本次事件中,新被选中的项
  32.  
  33. lblMsg1.Text = "SelectionChangedEventArgs.AddedItems: " + (e.AddedItems[] as PivotItem).Header.ToString();
  34. lblMsg1.Text += Environment.NewLine;
  35. lblMsg1.Text += "Pivot.SelectedIndex: " + pivot.SelectedIndex;
  36. lblMsg1.Text += Environment.NewLine;
  37. lblMsg1.Text += "Pivot.SelectedItem: " + (pivot.SelectedItem as PivotItem).Header.ToString();
  38. }
  39.  
  40. // 某 PivotItem 准备变成选中项
  41. private void pivot_PivotItemLoading(Pivot sender, PivotItemEventArgs args)
  42. {
  43. // args.Item - 相关的 PivotItem 对象
  44.  
  45. lblMsg2.Text += "pivot_PivotItemLoading: " + args.Item.Header.ToString();
  46. lblMsg2.Text += Environment.NewLine;
  47. }
  48.  
  49. // 某 PivotItem 已经变成选中项
  50. private void pivot_PivotItemLoaded(Pivot sender, PivotItemEventArgs args)
  51. {
  52. lblMsg2.Text += "pivot_PivotItemLoaded: " + args.Item.Header.ToString();
  53. lblMsg2.Text += Environment.NewLine;
  54. }
  55.  
  56. // 某 PivotItem 准备从选中项变为非选中项
  57. private void pivot_PivotItemUnloading(Pivot sender, PivotItemEventArgs args)
  58. {
  59. lblMsg2.Text += "pivot_PivotItemUnloading: " + args.Item.Header.ToString();
  60. lblMsg2.Text += Environment.NewLine;
  61. }
  62.  
  63. // 某 PivotItem 已经从选中项变为非选中项
  64. private void pivot_PivotItemUnloaded(Pivot sender, PivotItemEventArgs args)
  65. {
  66. lblMsg2.Text += "pivot_PivotItemUnloaded: " + args.Item.Header.ToString();
  67. lblMsg2.Text += Environment.NewLine;
  68. }
  69. }
  70. }

2、Hub 的示例
Controls/CollectionControl/HubDemo.xaml

  1. <Page
  2. x:Class="Windows10.Controls.CollectionControl.HubDemo"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:Windows10.Controls.CollectionControl"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d">
  9.  
  10. <Grid Background="Transparent">
  11.  
  12. <TextBlock Name="lblMsg" Margin="10 0 10 10" Width="200" TextWrapping="Wrap" HorizontalAlignment="Left" />
  13.  
  14. <SemanticZoom Margin="210 0 10 10">
  15. <SemanticZoom.ZoomedInView>
  16.  
  17. <!--
  18. Hub - Hub 控件
  19. DefaultSectionIndex - hub 初始化时,被选中的 HubSection 的索引位置
  20. Header, HeaderTemplate - hub 的 header
  21. Orientation - hub 的子元素们的排列方式(Horizontal, Vertical)
  22. Sections - hub 的 HubSection([ContentProperty(Name = "Sections")])
  23. SectionHeaderClick - 点击 HubSection 右上角的“查看更多”按钮时触发的事件
  24. SectionsInViewChanged - 可视区中的 HubSection 发生变化时触发的事件
  25.  
  26. HubSection - HubSection 控件
  27. Header, HeaderTemplate - HubSection 的 header
  28. ContentTemplate - HubSection 的控件模板([ContentProperty(Name = "ContentTemplate")])
  29. IsHeaderInteractive - 是否显示 HubSection 右上角的“查看更多”按钮
  30. -->
  31.  
  32. <Hub Name="hub" Orientation="Horizontal" Header="hub title" DefaultSectionIndex="1" SectionHeaderClick="hub_SectionHeaderClick" SectionsInViewChanged="hub_SectionsInViewChanged">
  33. <HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 1">
  34. <DataTemplate>
  35. <TextBlock Text="hub section content 1" />
  36. </DataTemplate>
  37. </HubSection>
  38. <HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 2">
  39. <DataTemplate>
  40. <TextBlock Text="hub section content 2" />
  41. </DataTemplate>
  42. </HubSection>
  43. <HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 3">
  44. <DataTemplate>
  45. <TextBlock Text="hub section content 3" />
  46. </DataTemplate>
  47. </HubSection>
  48. <HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 4">
  49. <DataTemplate>
  50. <TextBlock Text="hub section content 4" />
  51. </DataTemplate>
  52. </HubSection>
  53. <HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 5">
  54. <DataTemplate>
  55. <TextBlock Text="hub section content 5" />
  56. </DataTemplate>
  57. </HubSection>
  58. <HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 6">
  59. <DataTemplate>
  60. <TextBlock Text="hub section content 6" />
  61. </DataTemplate>
  62. </HubSection>
  63. </Hub>
  64. </SemanticZoom.ZoomedInView>
  65.  
  66. <SemanticZoom.ZoomedOutView>
  67. <ListView x:Name="listView"/>
  68. </SemanticZoom.ZoomedOutView>
  69. </SemanticZoom>
  70.  
  71. </Grid>
  72. </Page>

Controls/CollectionControl/HubDemo.xaml.cs

  1. /*
  2. * Hub - Hub 控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
  3. * SectionsInView - 用于获取当前可视区中显示的全部 HubSection 集合
  4. * SectionHeaders - 用于获取当前可视区中显示的全部 HubSection 对象的 Header 集合
  5. *
  6. * HubSection - HubSection 控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
  7. *
  8. *
  9. * 注:
  10. * Hub 实现了 ISemanticZoomInformation 接口,所以可以在 SemanticZoom 的两个视图间有关联地切换。关于 ISemanticZoomInformation 请参见 /Controls/CollectionControl/SemanticZoomDemo/ISemanticZoomInformationDemo.xaml
  11. */
  12.  
  13. using System;
  14. using System.Collections.Generic;
  15. using Windows.UI.Xaml;
  16. using Windows.UI.Xaml.Controls;
  17.  
  18. namespace Windows10.Controls.CollectionControl
  19. {
  20. public sealed partial class HubDemo : Page
  21. {
  22. public HubDemo()
  23. {
  24. this.InitializeComponent();
  25.  
  26. this.Loaded += HubDemo_Loaded;
  27. }
  28.  
  29. private void HubDemo_Loaded(object sender, RoutedEventArgs e)
  30. {
  31. // 拿到所有 HubSection 的 header 集合
  32. List<string> headers = new List<string>();
  33. foreach (HubSection section in hub.Sections)
  34. {
  35. if (section.Header != null)
  36. {
  37.  
  38. headers.Add(section.Header.ToString());
  39. }
  40. }
  41.  
  42. listView.ItemsSource = headers;
  43. }
  44.  
  45. private void hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
  46. {
  47. // 获取通过点击 HubSection 右上角的“查看更多”按钮而被选中的 HubSection 对象
  48. lblMsg.Text = "hub_SectionHeaderClick: " + e.Section.Header.ToString();
  49. }
  50.  
  51. private void hub_SectionsInViewChanged(object sender, SectionsInViewChangedEventArgs e)
  52. {
  53. lblMsg.Text = "";
  54.  
  55. // 此次在 hub 中移出的 HubSection
  56. if (e.RemovedSections.Count > )
  57. {
  58. lblMsg.Text += "hub_SectionsInViewChanged RemovedSections: " + e.RemovedSections[].Header.ToString();
  59. lblMsg.Text += Environment.NewLine;
  60. }
  61.  
  62. // 此次在 hub 中移入的 HubSection
  63. if (e.AddedSections.Count > )
  64. {
  65. lblMsg.Text += "hub_SectionsInViewChanged AddedSections: " + e.AddedSections[].Header.ToString();
  66. lblMsg.Text += Environment.NewLine;
  67. }
  68.  
  69. lblMsg.Text += "hub.SectionsInView: ";
  70. lblMsg.Text += Environment.NewLine;
  71. // 可视区中显示的全部 HubSection
  72. foreach (var item in hub.SectionsInView)
  73. {
  74. lblMsg.Text += item.Header.ToString();
  75. lblMsg.Text += Environment.NewLine;
  76. }
  77. }
  78. }
  79. }

OK
[源码下载]

背水一战 Windows 10 (49) - 控件(集合类): Pivot, Hub的更多相关文章

  1. 背水一战 Windows 10 (48) - 控件(集合类): FlipView

    [源码下载] 背水一战 Windows 10 (48) - 控件(集合类): FlipView 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类) FlipView 示例Fl ...

  2. 背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter

    [源码下载] 背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresen ...

  3. 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组

    [源码下载] 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 作者:webabcd 介绍背水一战 Windows 10 之 控件 ...

  4. 背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter

    [源码下载] 背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter 作者:weba ...

  5. 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid

    [源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabc ...

  6. 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid

    [源码下载] 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingS ...

  7. 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation

    [源码下载] 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation 作者:webabcd 介绍背水一战 Wind ...

  8. 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项

    [源码下载] 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合 ...

  9. 背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制

    [源码下载] 背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制 作者:webabcd 介绍背水一战 Windows 10 之 控件(集 ...

随机推荐

  1. 使用mysql proxy对数据库进行读写分离

    服务器安排如下: 192.168.100.128 主 192.168.100.129 从 192.168.100.130 mysql-proxy 1.在100.130中下载安装mysql-proxy ...

  2. mysql之索引查询1

    一 备份数据 备份库: mysqldump:拷贝数据 --database:数据库 基本语法是:mysqldump -h服务器名 -u用户名 -p密码 --database 库名 > 备份路径. ...

  3. 824. Goat Latin

    class Solution { public: string toGoatLatin(string S) { S.push_back(' '); //add a space that the loo ...

  4. Bayes’s formula for Conditional Probability

    Conditional Probability Example:In a batch, there are 80% C programmers, and 40% are Java and C prog ...

  5. Win7 VS2015环境使用SDL2-2.0.4

    之前在VS中使用SDL2,如果只链接SDL2.lib,会提示 error LNK2019: unresolved external symbol _main referenced in functio ...

  6. 安装了nodejs后在命令行运行npm报错:Error: Cannot find module 'internal/util/types'

    报错如下图所示: 解决方法:删除目录“C:\Users\wls\AppData\Roaming\npm\node_modules”下的npm文件夹

  7. 作用域的一些说明,static关键词

    作用域的一些说明 变量分为全局变量和局部变量.学过C语言的童鞋都知道,全局变量的作用域是整个整个文件.在即使在函数内部也有效,但在php中,如果在函数中使用全局变量,php会认为这个变量没有定义.如果 ...

  8. SVN安装配置与使用

    http://www.cnblogs.com/skyway/archive/2011/08/10/2133399.html http://www.cnblogs.com/lidabo/archive/ ...

  9. s4-3 CSMA

    载波侦听多路访问协议  CSMA:Carrier Sense Multiple Access 特点:"先听后发" 改进ALOHA协议的侦听/发送策略  分类 非持续式 持 ...

  10. 学习刘伟择优excel视频

    for each 字符串函数: 默认参数,在子函数中必须要有默认值. 在工作表输入时,F9的功能是把区域编程数组,shift+ctrl+enter功能是把数组分开填入单元格. 创建数组: 1. 2. ...