<Page    x:Class="Windows10.Controls.CollectionControl.FlipViewDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Controls.CollectionControl"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <!--定义 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="10 0 10 10" Orientation="Horizontal">            <!--                FlipView - 翻转视图控件                    UseTouchAnimationsForAllNavigation - 是否提供一致的动画体验（无论是触控模式，还是按钮模式，还是编程模式）。如果只对触控模式使用过渡动画，才需要设置为 false            -->            <!--                在 XAML 中通过 FlipViewItem 指定 FilpView 的每一项            -->            <FlipView Width="320" Height="240" Margin="5 5 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"                       UseTouchAnimationsForAllNavigation="True">                <FlipView.Items>                    <FlipViewItem>                        <TextBlock Text="我是 TextBlock" />                    </FlipViewItem>                    <FlipViewItem>                        <Image Source="/Assets/StoreLogo.png" Stretch="Fill" />                    </FlipViewItem>                </FlipView.Items>            </FlipView>            <!--                FlipView 和 ListBox（用于显示小点点）联动            -->            <Grid Margin="20 5 0 0">                <FlipView Name="flipView" Width="320" Height="240" HorizontalAlignment="Left" VerticalAlignment="Top"                           UseTouchAnimationsForAllNavigation="True"                          ItemsSource="{x:Bind Data.Items}">                    <FlipView.ItemTemplate>                        <DataTemplate x:DataType="local:FlipViewDataSource">                            <Grid>                                <Image Width="320" Height="240" Source="{Binding Image}" Stretch="Fill"/>                                <TextBlock Text="{x:Bind Title, Mode=OneWay}" FontSize="24" Foreground="White" Padding="5" HorizontalAlignment="Left" VerticalAlignment="Top" />                            </Grid>                        </DataTemplate>                    </FlipView.ItemTemplate>                    <FlipView.ItemsPanel>                        <ItemsPanelTemplate>                            <VirtualizingStackPanel Orientation="Horizontal"/>                        </ItemsPanelTemplate>                    </FlipView.ItemsPanel>                </FlipView>                <ListBox Name="listBox" Width="320" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top" Background="#A5000000" Margin="0 200 0 0 "                          ItemContainerStyle="{StaticResource ItemContainerStyle}"                         Style="{StaticResource ListBoxStyle}"                         SelectedItem="{Binding SelectedItem, ElementName=flipView, Mode=TwoWay}"                         ItemsSource="{x:Bind flipView.ItemsSource}">                    <ListBox.ItemsPanel>                        <ItemsPanelTemplate>                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>                        </ItemsPanelTemplate>                    </ListBox.ItemsPanel>                </ListBox>            </Grid>        </StackPanel>    </Grid></Page>

/* * FlipView - 翻转视图控件（继承自 Selector, 请参见 /Controls/SelectionControl/SelectorDemo.xaml） */using System;using System.Collections.ObjectModel;using Windows.UI.Xaml.Controls;using Windows10.Common;namespace Windows10.Controls.CollectionControl{    public sealed partial class FlipViewDemo : Page    {        public FlipViewDemo()        {            this.InitializeComponent();        }        //  FlipView 和 ListBox 的数据源        public FlipViewDataSource Data { get; set; } = new FlipViewDataSource();    }    // 用于提供数据    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/StoreLogo.png"));            Items.Add(new FlipViewDataSource("bbb", "Assets/StoreLogo.png"));            Items.Add(new FlipViewDataSource("ccc", "Assets/StoreLogo.png"));            Items.Add(new FlipViewDataSource("ddd", "Assets/StoreLogo.png"));            Items.Add(new FlipViewDataSource("eee", "Assets/StoreLogo.png"));        }    }}