原文:
重新想象 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> </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(); } } }
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
[源码下载]
