重新想象 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的更多相关文章
- 重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar
[源码下载] 重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...
- 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker
[源码下载] 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker 作者:webabcd 介绍重新想象 Windows 8.1 ...
- 重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout
[源码下载] 重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout 作者:webabcd 介绍重新想象 ...
- 重新想象 Windows 8.1 Store Apps (76) - 新增控件: SearchBox
[源码下载] 重新想象 Windows 8.1 Store Apps (76) - 新增控件: SearchBox 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之 ...
- 重新想象 Windows 8.1 Store Apps 系列文章索引
[源码下载] [重新想象 Windows 8 Store Apps 系列文章] 重新想象 Windows 8.1 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...
- 重新想象 Windows 8.1 Store Apps (85) - 警报通知(闹钟), Tile 的新特性
[源码下载] 重新想象 Windows 8.1 Store Apps (85) - 警报通知(闹钟), Tile 的新特性 作者:webabcd 介绍重新想象 Windows 8.1 Store Ap ...
- 重新想象 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 ...
- 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性
[源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件 ...
- 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup
[源码下载] 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup 作者:webabcd 介绍重新想象 Wind ...
随机推荐
- 没有公网IP的服务器如何通过有公网的服务器实现远程管理的功能?即VPN服务器搭建过程
由于很多PPPoE帐号都没有公网IP了,那我们如何实现远程管理呢? 答案是比较简单的,首先,你要拥有一台有公网IP的路由器,其他品牌的也可以,但是下面我以WayOs作为VPN服务器,给大家一个教程. ...
- ASP.NET 4.0 potentially dangerous Request.Form value was detected
A few days ago, while working on an ASP.NET 4.0 Web project, I got an issue. The issue was, when use ...
- [GraphQL] Serve a GraphQL Schema as Middleware in Express
If we have a GraphQL Schema expressed in terms of JavaScript, then we have a convenient package avai ...
- Solr 5.x集成中文分词word,mmseg4j
使用标准分词器,如图: 使用word分词器 下载word-1.3.jar,注意solr的版本和word分词的版本 将文件word-1.3.jar拷贝至文件夹C:\workspace\Tomcat7.0 ...
- awstats 日志分析工具linux下的安装和使用
合并日志文件可以使用 bash 的sort命令: -o log_all access*.log 也可以使用 awstats 提供的 logresolvemerge.pl -showsteps acc ...
- sizeof()用法汇总
sizeof()功能:计算数据空间的字节数 1.与strlen()比较 strlen()计算字符数组的字符数,以"\0"为结束判断,不计算为'\0'的数组元素. ...
- dialog横竖屏切换时消失的解决方法
声明 本文原创,转载请注明来自xiaoQLu http://www.cnblogs.com/xiaoQLu/p/3324764.html dialog的生命周期依赖创建他的activity,怎么设置横 ...
- SNF开发平台WinForm之六-上传下载组件使用-SNF快速开发平台3.3-Spring.Net.Framework
6.1运行效果: 6.2开发实现: 1.先在要使用的项目进行引用,SNF.WinForm.Attachments.dll文件. 2.在工具箱内新建选项卡->选择项,浏览找到文件SNF.WinFo ...
- 超实用的JavaScript技巧及最佳实践(下)
1.使用逻辑符号&&或者||进行条件判断 1 2 3 var foo = 10; foo == 10 && doSomething(); // is the same ...
- 解决rspec 生成报告时报utf-8错误的方法
找到gems\1.9.1\gems\rspec-core-2.14.3\lib\rspec\core\formatters\snippet_extractor.rb文件中的第27行: 在这边记录一下, ...