How to show multiple images in a flipview winrt? - xaml

Question

I wanted to create a flipview but with multiple images showing simultaneously.
Example:
Like in the case of windows store which has like a scrollviewer to the flipview.
How can I achieve something like this?
Currently I'm only able to achieve something where I can have one image as the source at any given instance.
Edit: My code
<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

To show multiple images in one FlipViewItem, you can use the FlipView.ItemTemplate for example like this:
<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>
Code behind:
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; }
}
Additions:
But a default FlipView has no round points at the bottom of it, we need to Add a context indicator manually.
There is a opensource package Callisto you can use to create this indicator, it can be downloaded from the NuGet of VS2015 and used like this:
<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>
But the style of this indicator is like this:
So we can create a indicator using ListBox for example like this:
<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>
Code behind:
indicator.ItemsSource = items;
As you've seen, I modified the style template of ListBoxItem, the default template can be added to the xaml code like this:
And I modify the style like this:
<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>
Here I wrote a demo to reproduce the layout in your picture, you may also take a look at it.
Update
I've update my project, here is the rendering image of my demo:

Answer 2

Since you want multiple items, use a repeater as FlipView's ItemTemplate. Here's an example:
<FlipView>
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Image}"></Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
ItemsControl don't have ScrollViewer so you need to explicitly use it since you don't know how many items there will be. However, you can use ListView or GridView as well as per your requirements.