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

时间: 2024-09-29 21:54:43

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

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

[源码下载] 重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar 作者:webabcd介绍重新想象 Windows 8.1 Store Apps 之新增控件 AppBar - 应用程序栏控件(新增了 AppBarButton, AppBarToggleButton, AppBarSeparator) CommandBar - 应用程序栏控件(AppBar 简化版) 示例1.演示 AppBar 的应用AppBarDemo.xaml

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

原文:重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker [源码下载] 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之新增控件 DatePicker - 日期选择控件 TimePicker - 时间选择控件 示例1.演示 DatePicker 的应用DatePickerDemo.xaml <Page x:Class="Windows81.Controls.DatePickerD

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

原文:重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout [源码下载] 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之新增控件 Flyout - Flyout 控件 MenuFlyout - 菜单 Flyout 控件 SettingsFlyout - 设置面板 Flyout 控件 示例1.演示 Flyout 的应用FlyoutDemo.xaml <Page x

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

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. www.qidian.com/Bo

重新想象 Windows 8.1 Store Apps (74) - 新增控件

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. www.qidian.com/Bo

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

[源码下载] [重新想象 Windows 8 Store Apps 系列文章] 作者:webabcd 1.重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar 介绍重新想象 Windows 8.1 Store Apps 之新增控件 AppBar - 应用程序栏控件(新增了 AppBarButton, AppBarToggleButton, AppBarSeparator) CommandBar - 应用程序栏控件(AppBar 简

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

原文:重新想象 Windows 8.1 Store Apps (85) - 警报通知(闹钟), Tile 的新特性 [源码下载] 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之通知的新特性 警报通知(闹钟) Tile 的新特性 示例1.演示 win8.1 中新增的警报 toast(闹钟)AlarmToast.xaml <Page x:Class="Windows81.Notification.AlarmToast" xmlns="h

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

[源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性 作者:webabcd介绍重新想象 Windows 8.1 Store Apps 之控件增强 文本类控件的增强 为一些控件增加了 Header 属性和 HeaderTemplate 属性 为一些控件增加了 PlaceholderText 属性 示例1.演示

重新想象 Windows 8.1 Store Apps (82) - 绑定: DataContextChanged, TargetNullValue, FallbackValue, UpdateSourceTrigger

[源码下载] 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之绑定 DataContextChanged - FrameworkElement 的 DataContext 发生变化时触发的事件 TargetNullValue - 当绑定数据为 null 时所需要显示的值 FallbackValue - 当绑定失败(无法返回值)的时候所需要显示的值 UpdateSourceTrigger - UI 上数据更新的触发方式 示例1.演示 DataContextCha