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;
/// 文字在图片的左下角，请看上面的布局