背水一战 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
[源码下载]