[源码下载]

重新想象 Windows 8.1 Store Apps (75) - 新增控件: Hub, Hyperlink

作者：webabcd

介绍
重新想象 Windows 8.1 Store Apps 之新增控件

  • Hub - 中心控件（由一个 header 和多个 section 组成）
  • Hyperlink - 超链接控件（在 RichEditBox, RichTextBlock, RichTextBlockOverflow 内使用）

示例
1、演示 Hub 的应用
HubDemo.xaml

<Page

    x:Name="pageRoot"

    x:Class="Windows81.Controls.HubDemo"

    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows81.Controls"

    xmlns:common="using:Windows81.Common"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.Resources>

        <x:String x:Key="AppName">我的 hub</x:String>

    </Page.Resources>

    <Grid Background="Transparent">

        <Grid.ChildrenTransitions>

            <TransitionCollection>

                <EntranceThemeTransition/>

            </TransitionCollection>

        </Grid.ChildrenTransitions>

        <!--

            Hub - 中心控件（本例是通过 Hub 模板创建的）

                Header - Hub 的 Header（注：其是固定不动的）

                HubSection - Hub 的 Section

                    Header - HubSection 的 Header

                    DataTemplate - HubSection 的 DataTemplate

                    IsHeaderInteractive - 指定 HubSection 的 Header 是否是可点击的，如果是可点击的则 header 的右侧有一个“>”符号

                SectionHeaderClick - Hub 的 HubSection 的 Header 被点击后所触发的事件

                Orientation - Hub 内 Section 的排列方式（Horizontal 或 Vertical）

                DefaultSectionIndex - Hub 中被选中的 Section

            另：Hub 实现了 ISemanticZoomInformation 接口，关于 ISemanticZoomInformation 请参见：http://www.cnblogs.com/webabcd/archive/2013/03/21/2972537.html

        -->

        <Hub DefaultSectionIndex="1" SectionHeaderClick="Hub_SectionHeaderClick">

            <Hub.Header>

                <!--

                    后退按钮和页标题

                -->

                <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="80"/>

                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>

                    <Button  x:Name="backButton" Margin="-1,-1,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"

                        Style="{StaticResource NavigationBackButtonNormalStyle}"

                        VerticalAlignment="Top"

                        AutomationProperties.Name="Back"

                        AutomationProperties.AutomationId="BackButton"

                        AutomationProperties.ItemType="Navigation Button"/>

                    <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"

                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>

                </Grid>

            </Hub.Header>

            <!--hub 的第 1 个 section-->

            <HubSection Width="780" Margin="0,0,80,0">

                <HubSection.Background>

                    <ImageBrush Stretch="UniformToFill" ImageSource="/Assets/Son.jpg" />

                </HubSection.Background>

            </HubSection>

            <!--hub 的第 2 个 section-->

            <HubSection Width="500" Header="Section 2" Name="s2" IsHeaderInteractive="True">

                <DataTemplate>

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="*" />

                        </Grid.RowDefinitions>

                        <Image Stretch="Fill" Width="420" Height="280"/>

                        <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"

                                   Text="Lorem ipsum dolor sit nonumy sed consectetuer ising elit, sed diam"/>

                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Margin="0,10,0,0"

                                   Text="Description text:"/>

                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3"

                                   Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. "/>

                    </Grid>

                </DataTemplate>

            </HubSection>

            <!--hub 的第 3 个 section-->

            <HubSection Width="520" Header="Section 3" Name="s3" IsHeaderInteractive="True">

                <DataTemplate>

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="*" />

                        </Grid.RowDefinitions>

                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Margin="0,0,0,10"

                                   Text="Item Title" />

                        <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1"

                                   Text="Quisque in porta lorem dolor amet sed consectetuer ising elit, sed diam non my nibh uis mod wisi quip."/>

                        <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Grid.Row="2" Margin="0,20,0,0"

                                   Text="Item Sub Title"/>

                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3"

                                   Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper."/>

                    </Grid>

                </DataTemplate>

            </HubSection>

            <!--hub 的第 4 个 section-->

            <HubSection Header="Section 4">

                <DataTemplate>

                    <StackPanel Orientation="Vertical">

                        <Grid>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="130"/>

                                <ColumnDefinition Width="5"/>

                                <ColumnDefinition Width="130"/>

                                <ColumnDefinition Width="5"/>

                                <ColumnDefinition Width="130"/>

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="270"/>

                                <RowDefinition Height="95"/>

                                <RowDefinition Height="Auto" />

                                <RowDefinition Height="*" />

                            </Grid.RowDefinitions>

                            <Image Grid.ColumnSpan="5" Stretch="Fill" Margin="0,0,0,10"/>

                            <Image Grid.Row="1" Stretch="Fill"/>

                            <Image Grid.Row="1" Grid.Column="2" Stretch="Fill"/>

                            <Image Grid.Row="1" Grid.Column="4" Stretch="Fill"/>

                            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Grid.ColumnSpan="5" Margin="0,15,0,0"

                                       Text="Description Text:"/>

                            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3" Grid.ColumnSpan="5"

                                       Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper."/>

                        </Grid>

                    </StackPanel>

                </DataTemplate>

            </HubSection>

        </Hub>

    </Grid>

</Page>

HubDemo.xaml.cs

/*

 * Hub - 中心控件（由一个 header 和多个 section 组成）

 */

using System;

using Windows.UI.Popups;

using Windows.UI.Xaml.Controls;

namespace Windows81.Controls

{

    public sealed partial class HubDemo : Page

    {

        public HubDemo()

        {

            this.InitializeComponent();

        }

        // Hub 的 HubSection 的 Header 被点击后所触发的事件

        private async void Hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)

        {

            switch (e.Section.Name)

            {

                case "s2":

                    await new MessageDialog("点击了 Section 2", "提示").ShowAsync();

                    break;

                case "s3":

                    await new MessageDialog("点击了 Section 3", "提示").ShowAsync();

                    break;

                default:

                    break;

            }

        }

    }

}

2、演示 Hyperlink 的应用
HyperlinkDemo.xaml

<Page

    x:Class="Windows81.Controls.HyperlinkDemo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows81.Controls"

    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="120 0 0 0">

            <!--

                Hyperlink - 超链接控件（在 RichEditBox, RichTextBlock, RichTextBlockOverflow 内使用）

                    NavigateUri - 需要链接到的地址

                其他场景使用超链的话通过 HyperlinkButton 实现，参见：http://www.cnblogs.com/webabcd/archive/2013/01/10/2853974.html

            -->

            <RichTextBlock Width="200" Style="{StaticResource BasicRichTextStyle}">

                <Paragraph>

                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

                    <Hyperlink NavigateUri="http://webabcd.cnblogs.com" Foreground="Blue">webabcd blog</Hyperlink>

                    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

                </Paragraph>

            </RichTextBlock>

        </StackPanel>

    </Grid>

</Page>

HyperlinkDemo.xaml.cs

/*

 * Hyperlink - 超链接控件（在 RichEditBox, RichTextBlock, RichTextBlockOverflow 内使用）

 */

using Windows.UI.Xaml.Controls;

namespace Windows81.Controls

{

    public sealed partial class HyperlinkDemo : Page

    {

        public HyperlinkDemo()

        {

            this.InitializeComponent();

        }

    }

}

OK
[源码下载]

重新想象 Windows 8.1 Store Apps (75) - 新增控件: Hub, Hyperlink的更多相关文章

  1. 重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar

    [源码下载] 重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...

  2. 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker

    [源码下载] 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker 作者:webabcd 介绍重新想象 Windows 8.1 ...

  3. 重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout

    [源码下载] 重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout 作者:webabcd 介绍重新想象 ...

  4. 重新想象 Windows 8.1 Store Apps (76) - 新增控件: SearchBox

    [源码下载] 重新想象 Windows 8.1 Store Apps (76) - 新增控件: SearchBox 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之 ...

  5. 重新想象 Windows 8.1 Store Apps 系列文章索引

    [源码下载] [重新想象 Windows 8 Store Apps 系列文章] 重新想象 Windows 8.1 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  6. 重新想象 Windows 8.1 Store Apps (85) - 警报通知（闹钟）, Tile 的新特性

    [源码下载] 重新想象 Windows 8.1 Store Apps (85) - 警报通知(闹钟), Tile 的新特性 作者:webabcd 介绍重新想象 Windows 8.1 Store Ap ...

  7. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    [源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...

  8. 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性

    [源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件 ...

  9. 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup

    [源码下载] 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup 作者:webabcd 介绍重新想象 Wind ...

随机推荐

  1. [转]jQuery.Autocomplete实现自动完成功能（详解）

    本篇文章除了介绍jquery.autocomplete基本参数外,主要说明jquery.autocomplete的数据源的格式问题.     1.jquery.autocomplete参考地址 htt ...

  2. SAP GUI SAPLOGON.INI

    GUI是SAP系统最常用的客户端,在一台客户机上,利用GUI可以连接多套SAP系统(连接方法参见<客户端连接配置(SAP GUI 710)>),也可以设置多个快捷方式登录(参见<用快 ...

  3. const ,static,inline

    const: 1 定义变量 ,如下写法都可以: TYPE const ValueName = value;                  const TYPE ValueName = value; ...

  4. swift 闭包

    闭包可以捕获和存储其所在上下文中任意常量和变量的引用. 这就是所谓的闭合并包裹着 这些常量和变量,俗称闭包. Swift标准库中提供了sort排序函数,sort函数的第二个参数是个闭包.和OC中的bl ...

  5. SQLServer 获得所有表结构（包括表名及字段）

    then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名, ( then '√'else '' end) 标识, (case when (SE ...

  6. Linux 技巧：让进程在后台可靠运行的几种方法(转)

    下面举了一些例子, 您可以针对不同的场景选择不同的方式来处理这个问题. nohup/setsid/& 场景: 如果只是临时有一个命令需要长时间运行,什么方法能最简便的保证它在后台稳定运行呢? ...

  7. 使用word和pdf进行仿书编辑的经验

    一.问题的提出:    一本书扫描好,要将书中的图片转换为文字版的word文档.二.问题的分析:    1.文字的提取    2.文字的编排三.问题的解决    1.如果用的是Adobe Acroba ...

  8. Go语言TCP/UDP Socket编程

    1. TCP编程 TCPClient // TCPClient project main.go package main import ( "fmt" "net" ...

  9. google全球地址大全

    https://github.com/justjavac/Google-IPs http://www.aol.com/依托于google的一个搜索,通过这个搜索

  10. MyBatis知多少（4）MyBatis的优势

    MyBatis是一个混合型解决方案.它汲取了所有这些解决方案中最有价值的思想并将它们融会贯通.下表总结了MyBatis从我们之前讨论的那些方案中所汲取的思想. 方 案 相同的优点 解决的问题 存储过程 ...