如何在通用 Windows 平台中使用多个项目的翻转视图并通过其他按钮翻转

Question

我试图通过翻页视图中的其他按钮更改项目，所以我习惯使用 PointerWheelChanged 的 True 值和 IsHitTestVisible="False"。但是我用按钮tp连接失败，请帮助我正确。

Answer 1

更新

如果想去掉Flip View默认的Button，只需要改变它的样式即可。

首先，您需要创建FlipView默认样式的副本，转到文档大纲 window中的Visual Studio ], 找到 FlipView 控件。右键单击 FlipView 选择 编辑模板->编辑副本。那么Visual Studio会自动创建一个FlipView的默认样式。然后你需要的是删除样式底部的默认按钮。

这里是你可以参考的样式：

    <Page.Resources>
    <Style x:Key="FlipViewStyle1" TargetType="FlipView">
        <Setter Property="Background" Value="{ThemeResource FlipViewBackground}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="TabNavigation" Value="Once"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
        <Setter Property="ScrollViewer.IsHorizontalScrollChainingEnabled" Value="True"/>
        <Setter Property="ScrollViewer.IsVerticalScrollChainingEnabled" Value="True"/>
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
        <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="FlipView">
                    <Grid Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}">
                        <Grid.Resources>
                            <ControlTemplate x:Key="HorizontalNextTemplate" TargetType="Button">
                                <Border x:Name="Root" Background="{ThemeResource FlipViewNextPreviousButtonBackground}" BorderThickness="{ThemeResource FlipViewButtonBorderThemeThickness}" BorderBrush="{ThemeResource FlipViewNextPreviousButtonBorderBrush}">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <FontIcon x:Name="Arrow" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource FlipViewNextPreviousArrowForeground}" FontSize="12" Glyph="&#xE0E3;" HorizontalAlignment="Center" MirroredWhenRightToLeft="True" UseLayoutRounding="False" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                            <ControlTemplate x:Key="HorizontalPreviousTemplate" TargetType="Button">
                                <Border x:Name="Root" Background="{ThemeResource FlipViewNextPreviousButtonBackground}" BorderThickness="{ThemeResource FlipViewButtonBorderThemeThickness}" BorderBrush="{ThemeResource FlipViewNextPreviousButtonBorderBrush}">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <FontIcon x:Name="Arrow" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource FlipViewNextPreviousArrowForeground}" FontSize="12" Glyph="&#xE0E2;" HorizontalAlignment="Center" MirroredWhenRightToLeft="True" UseLayoutRounding="False" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                            <ControlTemplate x:Key="VerticalNextTemplate" TargetType="Button">
                                <Border x:Name="Root" Background="{ThemeResource FlipViewNextPreviousButtonBackground}" BorderThickness="{ThemeResource FlipViewButtonBorderThemeThickness}" BorderBrush="{ThemeResource FlipViewNextPreviousButtonBorderBrush}">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <FontIcon x:Name="Arrow" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource FlipViewNextPreviousArrowForeground}" FontSize="12" Glyph="&#xE0E5;" HorizontalAlignment="Center" UseLayoutRounding="False" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                            <ControlTemplate x:Key="VerticalPreviousTemplate" TargetType="Button">
                                <Border x:Name="Root" Background="{ThemeResource FlipViewNextPreviousButtonBackground}" BorderThickness="{ThemeResource FlipViewButtonBorderThemeThickness}" BorderBrush="{ThemeResource FlipViewNextPreviousButtonBorderBrush}">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPointerOver}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPressed}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <FontIcon x:Name="Arrow" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource FlipViewNextPreviousArrowForeground}" FontSize="12" Glyph="&#xE0E4;" HorizontalAlignment="Center" UseLayoutRounding="False" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Grid.Resources>
                        <ScrollViewer x:Name="ScrollingHost" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalSnapPointsType="MandatorySingle" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalSnapPointsType="MandatorySingle" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="Disabled">
                            <ItemsPresenter/>
                        </ScrollViewer>
                        <!--<Button x:Name="PreviousButtonHorizontal" HorizontalAlignment="Left" Height="36" IsTabStop="False" Template="{StaticResource HorizontalPreviousTemplate}" UseSystemFocusVisuals="False" VerticalAlignment="Center" Width="20"/>
                        <Button x:Name="NextButtonHorizontal" HorizontalAlignment="Right" Height="36" IsTabStop="False" Template="{StaticResource HorizontalNextTemplate}" UseSystemFocusVisuals="False" VerticalAlignment="Center" Width="20"/>
                        <Button x:Name="PreviousButtonVertical" HorizontalAlignment="Center" Height="20" IsTabStop="False" Template="{StaticResource VerticalPreviousTemplate}" UseSystemFocusVisuals="False" VerticalAlignment="Top" Width="36"/>
                        <Button x:Name="NextButtonVertical" HorizontalAlignment="Center" Height="20" IsTabStop="False" Template="{StaticResource VerticalNextTemplate}" UseSystemFocusVisuals="False" VerticalAlignment="Bottom" Width="36"/>-->
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

并将其用于 FlipView

<FlipView Style="{StaticResource FlipViewStyle1}" x:Name="flipView1">

您可以在此处获得有关样式的更多信息：Styles

要控制翻页视图的滚动功能，只需将后面代码中的FlipView.SelectedIndex 属性更改为自定义按钮即可。

我做了一个非常简单的演示来展示它是如何工作的。我创建了一个仅包含图像的数据 class。并且应该在 flipview 中使用数据绑定。我通过处理 PointerWheelChanged 事件禁用了鼠标滚轮滚动功能。然后我添加了两个按钮通过更改 FlipView.SelectedIndex 属性

来滚动 flipview

Xaml:

  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Button Content="Next" Click="Button_Click" Grid.Row="1"/>
    <Button Content="Previous" Click="Button_Click" Grid.Row="2"/>
    <FlipView x:Name="flipView1">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Grid PointerWheelChanged="flipView1_PointerWheelChanged">
                    <Image Source="{Binding ImageContent}" Stretch="UniformToFill"/>
                </Grid>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
</Grid>

代码隐藏：

public 密封部分 class MainPage : Page { public 列出来源{ get;放; } public 主页() { this.InitializeComponent();

        source = new List<ImageData>();
        source.Add(new ImageData { ImageContent = new BitmapImage(new Uri("ms-appx:///Assets/london.png"))});
        source.Add(new ImageData { ImageContent = new BitmapImage(new Uri("ms-appx:///Assets/paris.png")) });
        source.Add(new ImageData { ImageContent = new BitmapImage(new Uri("ms-appx:///Assets/seattle.png")) });
        source.Add(new ImageData { ImageContent = new BitmapImage(new Uri("ms-appx:///Assets/vancouver.png")) });
        flipView1.ItemsSource = source;
    }

    private void flipView1_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
    {
        e.Handled = true;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Button btn = sender as Button;
        if (btn.Content.Equals("Next"))
        {
            //go to next item. check if it is the last item
            if (flipView1.SelectedIndex< source.Count-1) 
            {
                flipView1.SelectedIndex = flipView1.SelectedIndex + 1;
            }
            
        }
        else 
        {
            //go back to pervious item. Check if it is the first item
            if (flipView1.SelectedIndex > 0)
            {
                flipView1.SelectedIndex = flipView1.SelectedIndex - 1;
            }
        }
    }
}

public class ImageData 
{
    public BitmapImage ImageContent { get; set; }
}

Answer 2

Xaml`

  <FlipView x:Name="flipView1" Width="1000" Height="400" 
                                    BorderBrush="Black" BorderThickness="1" Background="Blue" Loaded="flipView1_Loaded"  >
                           
                            <FlipView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Horizontal"  PointerWheelChanged="VirtualizingStackPanel_PointerWheelChanged"></VirtualizingStackPanel>
                                </ItemsPanelTemplate>
                            </FlipView.ItemsPanel>
                           

                        </FlipView>

<-- 现在添加两个相互控制的按钮 -->

 <StackPanel x:Name="previous" Grid.Row="0" Grid.Column="0"  VerticalAlignment="Center" >
                <TextBlock Text="Previous" FontSize="13" Foreground="White" Margin="12,0,0,5"/>
                <StackPanel Background="White" Width="35" Margin="0,0,75,0">
                    <Button x:Name="btnPrevious"  Foreground="Black" Width="35" Background="White" Margin="0,0,0,0" Click="btnPrevious_Click">
                        <SymbolIcon Symbol="Back" Width="20" />
                    </Button>
                </StackPanel>
              </StackPanel>
                <StackPanel x:Name="next" Grid.Row="0" Grid.Column="2"  VerticalAlignment="Center"  >
                <TextBlock Text="Next" FontSize="13" Foreground="White" Margin="0,0,15,5" HorizontalAlignment="Right"/>
                <StackPanel Background="White" Width="35"  HorizontalAlignment="Right" Margin="0,0,12,0">
                    <Button x:Name="btnNext"  Foreground="Black" Width="40" Background="White" Margin="0,0,0,0" Click="btnNext_Click" >
                        <SymbolIcon Symbol="Forward" Width="Auto"  />
                           
                        </Button>
                </StackPanel>

后面的代码：

  private void VirtualizingStackPanel_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
    {
        e.Handled = true;

    }


    private void btnNext_Click(object sender, RoutedEventArgs e)
    {
        int index = flipView1.SelectedIndex;
        if (index == (flipView1.Items.Count - 2))
        {
            next.Visibility = Visibility.Collapsed;
        }
        index = index + 1;
        if (index < flipView1.Items.Count)
        {
            flipView1.SelectedIndex = index;
            previous.Visibility = Visibility.Visible;
        }
    }

    private void btnPrevious_Click(object sender, RoutedEventArgs e)
    {
        int index = flipView1.SelectedIndex;
        if (index == 1)
        {
            previous.Visibility = Visibility.Collapsed;
        }
        index = index - 1;
        if (index < flipView1.Items.Count && index >= 0)
        {
            flipView1.SelectedIndex = index;
            next.Visibility = Visibility.Visible;
        }
    }

    private void flipView1_Loaded(object sender, RoutedEventArgs e)
    {
        Grid grid = (Grid)VisualTreeHelper.GetChild(flipView1, 0);
        for (int i = grid.Children.Count - 1; i >= 0; i--)
            if (grid.Children[i] is Button)
                grid.Children.RemoveAt(i);
    }

如何在通用 Windows 平台中使用多个项目的翻转视图并通过其他按钮翻转

How can I use flip view with multiple item and flip by other button in Universal Windows Platform

c#

xaml

uwp