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