[源码下载]

重新想象 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的更多相关文章

  1. 重新想象 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 ...

  2. 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性

    [源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件 ...

  3. 重新想象 Windows 8.1 Store Apps (79) - 控件增强: MediaElement, Frame

    [源码下载] 重新想象 Windows 8.1 Store Apps (79) - 控件增强: MediaElement, Frame 作者:webabcd 介绍重新想象 Windows 8.1 St ...

  4. 重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互

    [源码下载] 重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互 作者:webabcd 介 ...

  5. 重新想象 Windows 8.1 Store Apps (93) - 控件增强: GridView, ListView

    [源码下载] 重新想象 Windows 8.1 Store Apps (93) - 控件增强: GridView, ListView 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...

  6. 重新想象 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 ...

  7. 重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom

    原文:重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom [源码下载] ...

  8. 重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础

    原文:重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础 [源码下载] 重新想象 Windows 8 Store Apps (9) - 控件之 Sc ...

  9. 重新想象 Windows 8.1 Store Apps 系列文章索引

    [源码下载] [重新想象 Windows 8 Store Apps 系列文章] 重新想象 Windows 8.1 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

随机推荐

  1. 打包时Xcode报：此证书的签发者无效Missing iOS Distribution signing identity

    问题描述 今天准备打包上传AppStore,结果Xcode报以下错误:Missing iOS Distribution signing identity for XXXXXX 查看证书后发现,Deve ...

  2. iOS 语言切换、本地化，国际化

    什么是本地化处理? 本地化处理就是我们的应用程序有可能发布到世界的很多国家去,因为每个国家应用的语言是不一样的,所以我们要把我们的应用程序的语言要进行本地化处理一下. 本地化处理需要处理那些文件? ( ...

  3. 【转】mac/linux终端光标的快捷键操作

    摘自网络:原标题是类似linux/unix命令行终端的光标及字符控制快捷键的东东. 常用的快捷键: Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处 ...

  4. 更新jar包中的MANIFEST.MF

    当前目录存在lib.jar和MANIFEST.MF文件,在当前目录下执行: jar -uvfm lib.jar MANIFEST.MF 如果lib.jar里存在META-INF/MANIFEST.MF ...

  5. WinForm 批量设置指定控件中的控件状态

    在开发中常遇到当点击某个按钮的时候,禁用文本框或按钮的的状态,以防止误操作,下面的代码是我已批量设置指定控件中的按钮状态的代码,同理可以延伸出很多操作. /// <summary> /// ...

  6. EPLAN P8导线颜色的设置

    P8里的导线应称为"连接",连接的颜色代表了其电位的传递路径,如可以给三相电源设置成黑色,PE设为绿色,N设为蓝色等等.  P8中电位在连接和元器件中传递的方法是由元器件的连接点属 ...

  7. Android开发在路上：少去踩坑，多走捷径

    转自:http://djt.qq.com/article/view/1193   最近一朋友提了几个Android问题让我帮忙写个小分享,我觉得对新人还是挺有帮助的,所以有了这个小分享. 1.目前, ...

  8. 移动安全时代，如何保护你的app

    Android系统的安全性历来备受诟病,在强大的反编译工具下,APK中的代码逻辑一览无余:重打包技术使得各种盗版软件层出不穷,充斥着Android市场,特别是对于金融.电商.游戏等产品的盗版应用,严重 ...

  9. 【分享】Matlab R2015a 发布啦！

    本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html Matlab和C#混合编程文章目录:http://www.cnblogs.com ...

  10. static、final、static final 用法

    1.使用范围:类.方法.变量.2.区别和联系:2.1.static 含义:静态的,被 static 修饰的方法和属性只属于类不属于类的任何对象.2.2.static 用法:2.2.1.static 可 ...