重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup
重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup
作者：webabcd
介绍
重新想象 Windows 8.1 Store Apps 之控件增强
- ScrollViewer - 滚动视图控件的增强
- FlipView - 滑动视图控件的增强
- Popup - 弹出框控件的增强
示例
1、演示 ScrollViewer 的新特性
ScrollViewerDemo.xaml
<Page
x:Class="Windows81.Controls.ScrollViewerDemo"
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"> <TextBlock Name="lblMsg" /> <!--
ScrollViewer - 滚动视图控件，新增功能如下
TopHeader - 水平可滚动，垂直不动
LeftHeader - 垂直可滚动，水平不动
TopLeftHeader - 固定不动 注：如果要使用 TopHeader, LeftHeader, TopLeftHeader 则 ScrollViewer.Content 中的内容必须是 HorizontalAlignment="Left" VerticalAlignment="Top"
-->
<ScrollViewer Name="scrollViewer" Width="400" Height="400" Margin="0 10 0 0"
HorizontalAlignment="Left" VerticalAlignment="Top"
HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"> <ScrollViewer.Content>
<Image Source="/Assets/Son.jpg" Width="1000" HorizontalAlignment="Left" VerticalAlignment="Top" />
</ScrollViewer.Content> <ScrollViewer.TopHeader>
<TextBlock Text="TopHeader" />
</ScrollViewer.TopHeader> <ScrollViewer.LeftHeader>
<TextBlock Text="LeftHeader" />
</ScrollViewer.LeftHeader> <ScrollViewer.TopLeftHeader>
<TextBlock Text="TopLeftHeader" />
</ScrollViewer.TopLeftHeader> </ScrollViewer> <Button Name="btnChangeView" Content="Change View" Click="btnChangeView_Click" Margin="0 10 0 0" /> </StackPanel>
</Grid>
</Page>
ScrollViewerDemo.xaml.cs
/*
* ScrollViewer - 滚动视图控件
*
*
* 关于 ScrollViewer 的基础请参见：
* http://www.cnblogs.com/webabcd/archive/2013/03/07/2947313.html
* http://www.cnblogs.com/webabcd/archive/2013/03/11/2953402.html
*/ using Windows.UI.Xaml.Controls; namespace Windows81.Controls
{
public sealed partial class ScrollViewerDemo : Page
{
public ScrollViewerDemo()
{
this.InitializeComponent();
} private void btnChangeView_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
// ScrollToHorizontalOffset 和 ScrollToVerticalOffset 都舍弃了
// ChangeView() - 可以设置水平平移，垂直平移和缩放比例，并且可以指定是否使用动画过渡
bool result = scrollViewer.ChangeView(100f, 100f, 1f, false);
}
}
}
2、演示 FlipView 的新特性
FlipViewDemo.xaml
<Page
x:Class="Windows81.Controls.FlipViewDemo"
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"> <!--
本例是一个 FlipView 和 ListBox（用于显示小点点）联动的 Demo FlipView 在 win8.1 中新增了一个属性 UseTouchAnimationsForAllNavigation，将其设置为 true 可以保证无论是基于触控的模式，还是基于按钮的模式，还是编程的模式，FlipView 都会有一致的动画体验
--> <!--定义 ListBox（用于显示小点点）的样式-->
<Page.Resources>
<Style x:Key="ItemContainerStyle" TargetType="ListBoxItem">
<Setter Property="Width" Value="32"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates" >
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates" >
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0" To="#FF58CC0C" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0" To="#FF58CC0C" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0" To="#FF58CC0C" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0" To="#FF58CC0C" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" IsHitTestVisible="False" Width="32" Height="20" Fill="#FFBFBFBF" Margin="5,0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyle" TargetType="ListBox">
<Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}"/>
<Setter Property="Background" Value="{StaticResource ListBoxBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="ScrollViewer" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources> <Grid Background="Transparent">
<StackPanel Margin="120 0 0 0"> <!--
FlipView - 滑动视图控件
UseTouchAnimationsForAllNavigation - true 代表无论是基于触控的模式，还是基于按钮的模式，还是编程的模式，FlipView 都会有一致的动画体验
-->
<FlipView x:Name="flipView" Width="480" Height="270" BorderBrush="Black" BorderThickness="1" UseTouchAnimationsForAllNavigation="True">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
<Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
<TextBlock Text="{Binding Title}" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20"/>
</Border>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
</FlipView> <ListBox x:Name="listBox" Width="478" Height="40" Background="#A5000000" HorizontalAlignment="Center" Margin="0,-5,0,0"
SelectedItem="{Binding SelectedItem, ElementName=flipView, Mode=TwoWay}"
ItemContainerStyle="{StaticResource ItemContainerStyle}"
Style="{StaticResource ListBoxStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox> </StackPanel>
</Grid>
</Page>
FlipViewDemo.xaml.cs
/*
* FlipView - 滑动视图控件
* FlipView 在 win8.1 中新增了一个属性 UseTouchAnimationsForAllNavigation，将其设置为 true 可以保证无论是基于触控的模式，还是基于按钮的模式，还是编程的模式，FlipView 都会有一致的动画体验
*
* 提示：本例是一个 FlipView 和 ListBox（用于显示小点点）联动的 Demo
*
* 关于 FlipView 的基础请参见：http://www.cnblogs.com/webabcd/archive/2013/01/21/2869167.html
*/ using System;
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using Windows81.Common; namespace Windows81.Controls
{
public sealed partial class FlipViewDemo : Page
{
public FlipViewDemo()
{
this.InitializeComponent();
} protected override void OnNavigatedTo(NavigationEventArgs e)
{
// 设置 FlipView 和 ListBox 的数据源
var flipViewData = new FlipViewDataSource();
flipView.ItemsSource = flipViewData.Items;
listBox.ItemsSource = flipViewData.Items;
listBox.SelectionChanged += listBox_SelectionChanged;
} void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// 确保在按钮模式下，FlipView 能正确地显示箭头按钮
flipView.Focus(Windows.UI.Xaml.FocusState.Pointer);
}
} // 用于提供数据
public sealed class FlipViewDataSource : BindableBase
{
private static Uri _baseUri = new Uri("ms-appx:///"); public FlipViewDataSource(String title, String picture)
{
this._title = title;
this._picture = picture;
} private string _title = string.Empty;
public string Title
{
get { return this._title; }
set { this.SetProperty(ref this._title, value); }
} private Uri _image = null;
private String _picture = null;
public Uri Image
{
get
{
return new Uri(_baseUri, this._picture);
} set
{
this._picture = null;
this.SetProperty(ref this._image, value);
}
} private ObservableCollection<object> _items = new ObservableCollection<object>();
public ObservableCollection<object> Items
{
get { return this._items; }
} public FlipViewDataSource()
{
Items.Add(new FlipViewDataSource("aaa", "Assets/Son.jpg"));
Items.Add(new FlipViewDataSource("bbb", "Assets/Son.jpg"));
Items.Add(new FlipViewDataSource("ccc", "Assets/Son.jpg"));
Items.Add(new FlipViewDataSource("ddd", "Assets/Son.jpg"));
Items.Add(new FlipViewDataSource("eee", "Assets/Son.jpg"));
}
}
}
3、演示 Popup 的新特性
PopupDemo.xaml
<Page
x:Class="Windows81.Controls.PopupDemo"
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"> <Button Name="btnClose" Content="关闭全部 Popup" Click="btnClose_Click" /> <Popup HorizontalOffset="0" VerticalOffset="50" IsLightDismissEnabled="False" IsOpen="True">
<Popup.Child>
<Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="200">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
</StackPanel>
</Border>
</Popup.Child>
</Popup> <Popup HorizontalOffset="250" VerticalOffset="50" IsLightDismissEnabled="False" IsOpen="True">
<Popup.Child>
<Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="200">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
</StackPanel>
</Border>
</Popup.Child>
</Popup> </StackPanel>
</Grid>
</Page>
PopupDemo.xaml.cs
/*
* Popup - 弹出框控件
*
*
* 关于 Popup 的基础请参见：
* http://www.cnblogs.com/webabcd/archive/2013/01/14/2859153.html
*/ using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media; namespace Windows81.Controls
{
public sealed partial class PopupDemo : Page
{
public PopupDemo()
{
this.InitializeComponent();
} private void btnClose_Click(object sender, RoutedEventArgs e)
{
// VisualTreeHelper 中新增了 GetOpenPopups() 方法，可以获取可视树中的全部 Popup 对象
var popups = VisualTreeHelper.GetOpenPopups(Window.Current);
foreach (var popup in popups)
{
popup.IsOpen = false;
}
}
}
}
OK
[源码下载]
重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup的更多相关文章
- 重新想象 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 (79) - 控件增强: MediaElement, Frame
[源码下载] 重新想象 Windows 8.1 Store Apps (79) - 控件增强: MediaElement, Frame 作者:webabcd 介绍重新想象 Windows 8.1 St ...
- 重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互
[源码下载] 重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互 作者:webabcd 介 ...
- 重新想象 Windows 8.1 Store Apps (93) - 控件增强: GridView, ListView
[源码下载] 重新想象 Windows 8.1 Store Apps (93) - 控件增强: GridView, ListView 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...
- 重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图
原文:重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 Web ...
- 重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom
原文:重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom [源码下载] ...
- 重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础
原文:重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础 [源码下载] 重新想象 Windows 8 Store Apps (9) - 控件之 Sc ...
- 重新想象 Windows 8.1 Store Apps 系列文章索引
[源码下载] [重新想象 Windows 8 Store Apps 系列文章] 重新想象 Windows 8.1 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...
随机推荐
- android OOM分析工具LeakCanary
http://my.oschina.net/u/255456/blog/523659?fromerr=oGosxKBf LeakCanary 只是探测到可能出现内存泄露,然后dump 一个java h ...
- 用Eclipse运行Android版APP（PhoneGap）时出现：Unable to execute dex: Multiple dex files define
这两天遇到点小问题,做个记录: 症状:运行,调试时都报:Unable to execute dex: Multiple dex files define错误,发布后的APP安装到手机后一运行,就提示: ...
- 【android原生态RPG游戏框架源码】
转载请注明原创地址:http://www.cnblogs.com/zisou/p/android-RPG.html 这份源码是在今年6月份写的,当时公司有一个技术部们的学习讨论的讲座,然后我自己就写了 ...
- Mac mongodb 配置安装
简单总结就几条,比较简单配置mongodb. 1,首先下载安装包:百度云下载地址 2,下载之后解压到自己常放的工作目录下,然后开始配置一下你的Mac环境 vim ~/.bash_profile 添加m ...
- PowerShell定时记录操作系统行为
作为系统管理员,有些时候是需要记录系统中的其他用户的一些操作行为的,例如:当系统管理员怀疑系统存在漏洞,且已经有被植入后门或者创建隐藏账户时,就需要对曾经登陆的用户进行监控,保存其打开或者操作过的文件 ...
- [转]silverlight Datagrid 行上增加ToolTip
有两种办法: 1. 直接在后台处理在数据绑定后 ,注册LoadingRow 事件this.DataGrid.LoadingRow += new EventHandler<DataGridRowE ...
- BZOJ 1001 [BeiJing2006] 狼抓兔子（平面图最大流）
题目大意 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的.而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形: ...
- python 教程_【python 基础教程详解】
Lesson 1 准备好学习Python的环境下载的地址是:www.python.org为了大家的方便,我在校内作了copy:http://10.1.204.2/tool/compiler&I ...
- CSS的sprite和单位
(1).关于css sprite技术 比方说: 有个论坛频道,其中有个一些论坛特有的小图标(火啊,顶啊之类),基于整站小图标大团结的思想,这些小图标也放在了那个icon背景图片上了.然而,数年下来,我 ...
- eclipse项目导入androidstudio
1.添加build.gradle buildscript { repositories { jcenter() } dependencies { classpath 'com.android.tool ...