背水一战 Windows 10 (48) - 控件（集合类）: FlipView

[源码下载]

背水一战 Windows 10 (48) - 控件（集合类）: FlipView

作者：webabcd

介绍
背水一战 Windows 10 之 控件（集合类）

• FlipView

示例
FlipView 的示例
Controls/CollectionControl/FlipViewDemo.xaml

<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>

Controls/CollectionControl/FlipViewDemo.xaml.cs

/*
 * 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"));
        }
    }
}

OK
[源码下载]