Um mehrere Bilder in einem FlipViewItem
zu zeigen, können Sie die FlipView.ItemTemplate zum Beispiel wie folgt verwendet werden:
hinter
<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:
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; }
}
Zugänge: Aber eine Standard FlipView
runde Punkte hat keine Im unteren Bereich müssen wir Add a context indicator manuell eingeben.
Es ist ein Open-Source-Paket Callisto Sie dieses Kennzeichen erstellen können, kann es von der NuGet von VS2015 und so benutzten heruntergeladen werden:
<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>
Aber der Stil dieses Indikators ist wie folgt:
So können wir einen Indikator ListBox
zum Beispiel wie folgt erstellen:
<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 hinter:
Und ich ändern Sie den Stil:
indicator.ItemsSource = items;
Wie Sie gesehen haben, ich die Stilvorlage von ListBoxItem
geändert, kann die Standardvorlage zu dem XAML-Code wie folgt hinzugefügt werden wie folgt aus:
<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>
Hier habe ich eine demo schrieb das Layout in Ihrem Bild zu reproduzieren, nehmen Sie können auch einen Blick auf sie.
aktualisieren
Ich habe mein Projekt aktualisieren, hier ist die Rendering-Bild meiner Demo:
Haben Sie versucht, jeden Repeater als 'ItemTemplate' von' FlipView'? –
Ich habe den Code hinzugefügt! – AbsoluteSith
Da Sie mehrere Elemente benötigen, verwenden Sie einen Repeater anstelle eines einzelnen Bildes. –