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

[源碼下載]

重新想象 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
[源碼下載]