背水一戰 Windows 10 之 控制項（集合類）: 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
[源碼下載]
