重新想象 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 studio 翻译插件
插件下载地址 https://github.com/Skykai521/ECTranslation/releases 使用说明: http://gold.xitu.io/entry/573d8d92a ...
- EntityFramework Code First 添加唯一键
在EntityFramework 6.1后可以直接使用 [Index("TitleIndex", IsUnique = true)] public string Title { g ...
- 使用https协议解决掉顽固不化的已解密的登录请求
1.1 已解密的登录请求概述 在应用程序测试过程中,检测到将未加密的登录请求发送到服务器.由于登录过程所用的部分输入字段(例如:用户名.密码.电子邮件地址.社会保险号码,等等)是个人敏感信息,建议通过 ...
- makeJar
task makeJar(type: Jar) { //指定生成的jar名 baseName 'plugin' //从哪里打包class文件 from('build/intermediates/cla ...
- 【译文】 C#面向对象的基本概念 (Basic C# OOP Concept) 第一部分(类,对象,变量,方法,访问修饰符)
译文出处:http://www.codeproject.com/Articles/838365/Basic-Csharp-OOP-Concept 相关文档:http://files.cnblogs.c ...
- HP P1008打印机如何打印特殊纸张
一.问题的提出 HP P1008中间有一个进纸槽,这是干什么的? 二.问题的分析 查说明,说这个进纸槽是叫做优先进纸槽,用于各种非常规的纸张的打印. 三.问题的解决 弄一张特殊尺寸的纸张,打开要编辑的 ...
- 【Thinking in Java-CHAPTER 1&&2】对象导论&&一切都是对象
JAVA起源 从JDK诞生到现在已经有11年的时间了.沧海桑田一瞬间.转眼11年过去了,JDK已经发布了6个版本.在这11年里诞生了无数和Java相关的技术和标准.现在让我们进入时间隧道,重新回到19 ...
- ORA-12170:TNS:连接超时
本文转自 http://www.cnblogs.com/kerrycode/archive/2012/12/14/2818421.html 1:首先检查网络是否能ping通 2:检查TNS配置(TNS ...
- java实例练习
1.不使用中间变量交换两个数 public class Exchange { public static void main(String[] args) { Scanner scanner = ne ...
- 实战:ASP.NET MVC中把Views下面的视图放到Views文件夹外
园子里写的文章的都是把控制器从传统的项目中的Controllers拿出来单独放,但很少几乎没有把视图从Views拿出去这样的文章,今天来写一个. 其实很简单!一步步解决问题就行了,下面记录如下,供需要 ...