背水一戰 Windows 10 (48) - 控制項（集合類）: FlipView

来源:http://www.cnblogs.com/webabcd/archive/2017/05/15/6854771.html
-Advertisement-
Play Games

背水一戰 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
[源碼下載]


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL查詢本周、上周、本月、上個月份數據的sql代碼
    查詢當前這周的數據 SELECT name,submittime FROM enterprise WHERE YEARWEEK(date_format(submittime,'%Y-%m-%d')) = YEARWEEK(now()); 查詢上周的數據 SELECT name,submittime ...
  • mysql性能優化之優化配置my.cnf文件
    [client]#password = your_passwordport = 3306socket = /opt/mysql/dbdata/mysql.sock # The MySQL server[mysqld]port = 3306socket = /opt/mysql/dbdata/mysq ...
  • 在linux下管理iphone
    場景: linux發行版:ubuntu 14.04 64bit 3.13.0-67-generic(內核版本) iphone型號:iphone 5c (ios 8.1.3 已越獄) 準備工作(一定要先做好這兩步): 1.在iphone彈出信任視窗一定要信任; 2.把iphone的密碼關掉.(掛載上了 ...
  • CentOS6.4 安裝Redis
    按照下麵步驟依次執行1.檢查依賴，安裝依賴 2.進入/user/local/src/ 3.wget下載redis 4.解壓 5.將文件轉存到/usr/local/redis 6.編譯安裝 7.在etc目錄下創建redi文件夾並創建配置文件，並修改配置文件 8.vim編輯/etc/redis/redi ...
  • 51單片機實現按鍵查詢並燈閃爍時間實驗
    No abstract, please look at the body. ...
  • centos 6.6 ios鏡像文件 下載 官網和阿裡雲兩種方式教你下載
    1百度一下：centos 打開打開官網、選擇這一項 CET CENTOS 2選擇 DVD ISO，雙擊下載 直接選擇左鍵點擊下載 這裡需要迅雷 方法 二 打開 https://mirrors.aliyun.com/centos/ 進行下載由於阿裡雲目前沒有上傳6.6版本 就已6.8版本為例 2這裡我 ...
  • Linux命令 用戶管理命令
    groupadd [功能說明] 新建用戶組 [語法格式] Groupadd[-f][-r][-g<GID><-o>][組名] [選項參數] 參數 說明 -f 建立已存在的組，強制系統接收已經存在的組名稱。預設情況下，每個組名在系統中應該是唯一的。若groupadd所給組名稱已經存在，將返回錯誤信息 ...
  • 軟體設計原則-介面隔離原則(Interface Segregation)
    介面隔離原則的意圖就是為了避免我們的代碼依賴一些用不到的介面，介面不應該大而全，而是根據相關功能進行分組。當然介面隔離也不是說要一個行為就定義一個介面，而是更具具體類把共同的行為抽象成一個介面，不同的部分單獨定義成介面。 代碼示例 Bad Code 對於T恤類而言Certification和Runn ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類