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

posted @   webabcd  阅读(2644)  评论(7)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
历史上的今天：
2009-05-21 返璞归真 asp.net mvc (5) - Action Filter, UpdateModel, ModelBinder, Ajax, Unit Test
点击右上角即可分享
微信分享提示