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

介绍
重新想象 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的更多相关文章

重新想象 Windows 8&period;1 Store Apps (72) - 新增控件&colon; AppBar, CommandBar
[源码下载] 重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...
重新想象 Windows 8&period;1 Store Apps (73) - 新增控件&colon; DatePicker, TimePicker
[源码下载] 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker 作者:webabcd 介绍重新想象 Windows 8.1 ...
重新想象 Windows 8&period;1 Store Apps (74) - 新增控件&colon; Flyout, MenuFlyout, SettingsFlyout
[源码下载] 重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout 作者:webabcd 介绍重新想象 ...
重新想象 Windows 8&period;1 Store Apps (76) - 新增控件&colon; SearchBox
[源码下载] 重新想象 Windows 8.1 Store Apps (76) - 新增控件: SearchBox 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之 ...
重新想象 Windows 8&period;1 Store Apps 系列文章索引
[源码下载] [重新想象 Windows 8 Store Apps 系列文章] 重新想象 Windows 8.1 Store Apps 系列文章索引作者:webabcd 1.重新想象 Windows ...
重新想象 Windows 8&period;1 Store Apps (85) - 警报通知（闹钟）, Tile 的新特性
[源码下载] 重新想象 Windows 8.1 Store Apps (85) - 警报通知(闹钟), Tile 的新特性作者:webabcd 介绍重新想象 Windows 8.1 Store Ap ...
重新想象 Windows 8&period;1 Store Apps (81) - 控件增强&colon; WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图
[源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...
重新想象 Windows 8&period;1 Store Apps (77) - 控件增强&colon; 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性
[源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件 ...
重新想象 Windows 8&period;1 Store Apps (78) - 控件增强&colon; ScrollViewer, FlipView, Popup
[源码下载] 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup 作者:webabcd 介绍重新想象 Wind ...

随机推荐

javascript、正则的验证
js验证.手机.固话.邮箱.身份证.网址.日期等 Verification.js文件 /* * 手机号码格式 * 只允许以13.15.18开头的号码 * 如:13012345678.159292243 ...
Java 16进制、unicode互转
package service; import java.util.regex.Matcher; import java.util.regex.Pattern; public class CodeCh ...
mysql死锁问题
形成死锁的条件我们mysql用的存储引擎是innodb,从日志来看,innodb主动探知到死锁,并回滚了某一苦苦等待的事务. 问题来了,innodb是怎么探知死锁的? 直观方法是在两个事务相互等待时 ...
Windbg 线程状态笔记
1.ntdll!ZwWaitForSingleObject 线程被挂起,如果下面跟着是这样子: RetAddr : Args to Child : Call Site `7766e518 : `fff ...
terminal bash 颜色的详细解释
http://evadeflow.com/2010/06/sane-terminal-colors/ Sane Terminal Colors June 26, 2010 I recently cre ...
Qt零基础教程(四) QWidget详解篇
在博客园里面转载我自己写的关于Qt的基础教程,没次写一篇我会在这里更新一下目录: Qt零基础教程(四) QWidget详解(1):创建一个窗口 Qt零基础教程(四) QWidget详解(2):QWid ...
HDOJ 5147 Sequence II 树阵
树阵: 每个号码的前面维修比其数数少,和大量的这后一种数比他的数字再枚举每一个位置组合一下 Sequence II Time Limit: 5000/2500 MS (Java/Others) ...
LG1912 [NOI2009]诗人小G
题意题目描述小G是一个出色的诗人,经常作诗自娱自乐.但是,他一直被一件事情所困扰,那就是诗的排版问题. 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并放在一行中,注意一行中可以 ...
beta冲刺7/7
队名:Boy Next Door 燃尽图代码写入 https://github.com/mangoqiqi/paybook/tree/master/Desktop/Web%E8%B4%A6%E5%8 ...
963 AlvinZH打怪刷经验（背包DP大作战R）
963 AlvinZH打怪刷经验思路这不是一道普通的01背包题.大家仔细观察数据的范围,可以发现如果按常理来的话,背包容量特别大,你也会TLE. 方法一:考虑01背包的一个常数优化----作用甚微 ...