WinUI-Gallery/WinUIGallery/Samples/ControlPages/FlipViewPage.xaml at 9bb8b0ff520bcbddd9beecba68247ae5b714b6b3 · microsoft/WinUI-Gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!--
    //*********************************************************
    //
    // Copyright (c) Microsoft. All rights reserved.
    // THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
    // ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
    // IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
    // PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
    //
    //*********************************************************
-->
<pages:ItemsPageBase
    x:Class="WinUIGallery.ControlPages.FlipViewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinUIGallery.Controls"
    xmlns:models="using:WinUIGallery.Models"
    xmlns:pages="using:WinUIGallery.Pages">
    <StackPanel>
        <controls:ControlExample
            x:Name="Example1"
            ExampleHeight="Auto"
            HeaderText="A simple FlipView with items declared inline.">
            <controls:ControlExample.Example>
                <FlipView Height="270" MaxWidth="400" AutomationProperties.LocalizedControlType="FlipView">
                    <Image AutomationProperties.Name="Cliff" Source="ms-appx:///Assets/SampleMedia/cliff.jpg" />
                    <Image AutomationProperties.Name="Grapes" Source="ms-appx:///Assets/SampleMedia/grapes.jpg" />
                    <Image AutomationProperties.Name="Rainier" Source="ms-appx:///Assets/SampleMedia/rainier.jpg" />
                    <Image AutomationProperties.Name="Sunset" Source="ms-appx:///Assets/SampleMedia/sunset.jpg" />
                    <Image AutomationProperties.Name="Valley" Source="ms-appx:///Assets/SampleMedia/valley.jpg" />
                </FlipView>
            </controls:ControlExample.Example>
            <controls:ControlExample.Xaml>
                <x:String xml:space="preserve">
&lt;FlipView MaxWidth="400" Height="270"&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/cliff.jpg" AutomationProperties.Name="Cliff"/&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/grapes.jpg" AutomationProperties.Name="Grapes"/&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/rainier.jpg" AutomationProperties.Name="Rainier"/&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/sunset.jpg" AutomationProperties.Name="Sunset"/&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/valley.jpg" AutomationProperties.Name="Valley"/&gt;
&lt;/FlipView&gt;
                </x:String>
            </controls:ControlExample.Xaml>
        </controls:ControlExample>
        <controls:ControlExample x:Name="Example2" HeaderText="A FlipView showing bound data with a data template.">
            <controls:ControlExample.Example>
                <FlipView
                    Height="180"
                    MaxWidth="400"
                    BorderBrush="Black"
                    BorderThickness="1"
                    AutomationProperties.LocalizedControlType="FlipView"
                    ItemsSource="{x:Bind Items, Mode=OneWay}">
                    <FlipView.ItemTemplate>
                        <DataTemplate x:DataType="models:ControlInfoDataItem">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Image
                                    Width="36"
                                    VerticalAlignment="Center"
                                    Source="{x:Bind ImagePath}"
                                    Stretch="Uniform" />
                                <Border
                                    Grid.Row="1"
                                    Height="60"
                                    Background="#A5FFFFFF">
                                    <TextBlock
                                        x:Name="Control2Text"
                                        Padding="12,12"
                                        HorizontalAlignment="Center"
                                        Foreground="Black"
                                        Style="{StaticResource TitleTextBlockStyle}"
                                        Text="{x:Bind Title}" />
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>
            </controls:ControlExample.Example>
            <controls:ControlExample.Xaml>
                <x:String xml:space="preserve">
&lt;FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1" ItemsSource="{x:Bind Items, Mode=OneWay}"&gt;
    &lt;FlipView.ItemTemplate&gt;
        &lt;DataTemplate x:DataType="data:ControlInfoDataItem"&gt;
            &lt;Grid&gt;
                &lt;Image Height="120" Source="{x:Bind ImagePath}" Stretch="Uniform" VerticalAlignment="Top"/&gt;
                &lt;Border Background="#A5FFFFFF" Height="60" VerticalAlignment="Bottom"&gt;
                &lt;TextBlock Text="{x:Bind Title}" Foreground="#CCFFFFFF" Padding="12,12" Style="{StaticResource TitleTextBlockStyle}" HorizontalAlignment="Center"/&gt;
                &lt;/Border&gt;
            &lt;/Grid&gt;
        &lt;/DataTemplate&gt;
    &lt;/FlipView.ItemTemplate&gt;
&lt;/FlipView&gt;
                </x:String>
            </controls:ControlExample.Xaml>
        </controls:ControlExample>
        <controls:ControlExample x:Name="Example3" HeaderText="Vertical FlipView">
            <controls:ControlExample.Example>
                <FlipView Height="270" MaxWidth="400" AutomationProperties.LocalizedControlType="FlipView">
                    <Image AutomationProperties.Name="Cliff" Source="ms-appx:///Assets/SampleMedia/cliff.jpg" />
                    <Image AutomationProperties.Name="Grapes" Source="ms-appx:///Assets/SampleMedia/grapes.jpg" />
                    <Image AutomationProperties.Name="Rainier" Source="ms-appx:///Assets/SampleMedia/rainier.jpg" />
                    <Image AutomationProperties.Name="Sunset" Source="ms-appx:///Assets/SampleMedia/sunset.jpg" />
                    <Image AutomationProperties.Name="Valley" Source="ms-appx:///Assets/SampleMedia/valley.jpg" />
                    <FlipView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </FlipView.ItemsPanel>
                </FlipView>
            </controls:ControlExample.Example>
            <controls:ControlExample.Xaml>
                <x:String xml:space="preserve">
&lt;FlipView MaxWidth="400" Height="270"&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/cliff.jpg" AutomationProperties.Name="Cliff"/&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/grapes.jpg" AutomationProperties.Name="Grapes"/&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/rainier.jpg" AutomationProperties.Name="Rainier"/&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/sunset.jpg" AutomationProperties.Name="Sunset"/&gt;
    &lt;Image Source="ms-appx:///Assets/SampleMedia/valley.jpg" AutomationProperties.Name="Valley"/&gt;
        &lt;FlipView.ItemsPanel &gt;
            &lt;ItemsPanelTemplate&gt;
                &lt;VirtualizingStackPanel Orientation="Vertical"/&gt;
            &lt;/ItemsPanelTemplate&gt;
        &lt;/FlipView.ItemsPanel&gt;
&lt;/FlipView&gt;
                </x:String>
            </controls:ControlExample.Xaml>
        </controls:ControlExample>
    </StackPanel>
</pages:ItemsPageBase>