FlipView 知识准备

 <FlipView  x:Name = "flipView1"    Width = "480"  Height = "270"  

              BorderBrush = "Black"  BorderThickness ="1">

            <FlipView.ItemTemplate>

               <DataTemplate>

                    <Grid >

                         <Image  Width = "480"  Height = "270"  Source = "{Binding ImageSrc}"  Stretch = "UniformToFill" />

                        <Border  Background = "#A5000000"  Height = "80"  VerticalAlignment = "Bottom" >

                            <TextBlock  Text = "{Binding Title}"  FontFamily = "Segoe UI"  FontSize = "26.667"  

                                       Foreground = "#CCFFFFFF"  Padding = "15,20" />

                        </Border>

                    </Grid>



                </DataTemplate>

            </FlipView.ItemTemplate>

        </FlipView >///经典布局效果如下， 关键是image 和flipview 大小相同，然后设置border 从底部开始  VerticalAlignment = "Bottom"，向上排列

 this.flipView1.ItemsSource = new ListViewDataSource().ItemGroups;

定FlipView 的方向

根据预设，FlipView是水平翻转。若要让它垂直翻转，请以垂直方向使用StackPanel以做为翻转检视的ItemsPanel。

 < FlipView.ItemsPanel > 

          < ItemsPanelTemplate > 

              < VirtualizingStackPanel  Orientation = " Vertical " /> 

          </ ItemsPanelTemplate > 

      </ FlipView.ItemsPanel >

还有设置flipview 的groupstyle

<UserControl

    x:Class="FlipvIEW.FlipView"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:FlipvIEW"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300"

    d:DesignWidth="400">

    <UserControl.Resources>



        <CollectionViewSource

            x:Name="groupedItemsViewSource"

          

             IsSourceGrouped="true"

            ItemsPath="Items"

         />

    </UserControl.Resources>



    <Grid>

        <FlipView Background="Black" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" Width="500" Height="500">

          

            <FlipView.GroupStyle>               

                <GroupStyle>                   

                    <GroupStyle.HeaderTemplate>                       

                        <DataTemplate>

 <StackPanel Orientation="Horizontal" Width="150" Height="150">                               

<Image Source="{Binding ImageSrc}" Width="150" Height="150"/>                              

<StackPanel >                                   

  <TextBlock Text="{Binding Title}" FontSize="20"/>

<TextBlock Text="{Binding Author}"  />

   <TextBlock Text="{Binding Datetime}"  />

   </StackPanel>

 </StackPanel>

    </DataTemplate>                       

                    </GroupStyle.HeaderTemplate>

                 

                </GroupStyle>              

            </FlipView.GroupStyle>           

    </Grid>

</UserControl>

 groupedItemsViewSource.Source = new ListViewDataSource().ItemGroups;
/// 文字在图片的左下角，请看上面的布局