Question

我想创建一个flipview，但同时显示多个图像。例：

就像windows商店的情况一样，它有一个像flipview的滚动浏览器。我怎样才能实现这样的目标呢？

目前我只能在任何特定情况下实现可以将一个图像作为源的东西。

编辑：我的代码

<FlipView x:Name="PCFlipview" Background="Black"
                Height="350" Width="620"
                VerticalAlignment="Top"
                Grid.Row="0"
                HorizontalAlignment="Right"
                ItemsSource="{Binding PcScreens}"
                SelectionChanged="FlipView1_SelectionChanged"
                Style="{StaticResource FlipViewStyle1}">
      <FlipView.ItemTemplate>
          <DataTemplate>
              <Grid >
                  <Image Source="{Binding}" Stretch="Uniform" />
              </Grid>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

Answer 1

要在一个FlipViewItem中显示多个图片，您可以使用FlipView.ItemTemplate，例如：

<FlipView x:Name="flipView" Grid.Row="0" Background="Transparent">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="5" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="5" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding image1}" Grid.Column="0" />
                <Image Source="{Binding image2}" Grid.Column="2" />
                <Image Source="{Binding image3}" Grid.Column="4" />
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

代码背后：

public sealed partial class MainPage : Page
{
    private ObservableCollection<MyFlipViewItem> items;

    public MainPage()
    {
        this.InitializeComponent();
        items = new ObservableCollection<MyFlipViewItem>();
        flipView.ItemsSource = items;            
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        items.Clear();
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
    }
}

public class MyFlipViewItem
{
    public string image1 { get; set; }
    public string image2 { get; set; }
    public string image3 { get; set; }
}

加法：但默认FlipView底部没有圆点，我们需要手动Add a context indicator。

您可以使用开源包Callisto创建此指标，可以从VS2015的NuGet下载并使用如下：

<Page
    x:Class="MultipleImageInOneFlipView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MultipleImageInOneFlipView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:callisto="using:Callisto.Controls"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
      ....
      <callisto:FlipViewIndicator Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"
                            FlipView="{Binding ElementName=flipView}">
      </callisto:FlipViewIndicator>
      ...
    </Grid>
</Page>

但这个指标的风格是这样的：

因此我们可以使用ListBox创建一个指标，例如：

<ListBox x:Name="indicator" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" 
         SelectedItem="{Binding ElementName=flipView, Path=SelectedItem, Mode=TwoWay}" 
         ItemContainerStyle="{StaticResource ListBoxItemStyle}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="15" Height="15" Margin="10,0" 
                     Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ListBox>

代码背后：

indicator.ItemsSource = items;

正如您所见，我修改了ListBoxItem的样式模板，默认模板可以添加到xaml代码中，如下所示：

我修改了这样的风格：

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid x:Name="LayoutRoot" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                    <Grid.Resources>
                        <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                            ...
                            <Setter Property="Foreground" Value="Gray" />
                        </Style>
                        <Style x:Key="BodyContentPresenterStyle" BasedOn="{StaticResource BaseContentPresenterStyle}" TargetType="ContentPresenter">
                            <Setter Property="FontWeight" Value="Normal" />
                            <Setter Property="FontSize" Value="15" />
                        </Style>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Gray" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Gray" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="PressedBackground" Fill="Transparent" Control.IsTemplateFocusTarget="True" />
                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在这里，我写了demo来重现图片中的布局，你也可以看看它。

<强>更新

我更新了我的项目，这是我演示的渲染图片：

Answer 2

由于您需要多个项目，请使用转发器FlipView ItemTemplate。这是一个例子：

<FlipView>
    <FlipView.ItemTemplate>
        <DataTemplate>
            <ScrollViewer>
                <ItemsControl>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Image}"></Image>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

ItemsControl没有ScrollViewer所以您需要明确使用它，因为您不知道会有多少项目。但是，您可以根据自己的要求使用ListView或GridView。

如何在flipview winrt中显示多个图像？

2 个答案: