2016-03-20 11 views
1

Ich wollte eine Flipview erstellen, aber mit mehreren Bildern gleichzeitig zeigen. Beispiel: enter image description hereWie zeigen Sie mehrere Bilder in einem Flipview Winrt?

Wie im Fall von Fenstern speichern, die wie ein Scroll zum FlipView hat. Wie kann ich so etwas erreichen?

Momentan kann ich nur etwas erreichen, bei dem ich ein Bild als Quelle haben kann.

Edit: Mein 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> 
+0

Haben Sie versucht, jeden Repeater als 'ItemTemplate' von' FlipView'? –

+0

Ich habe den Code hinzugefügt! – AbsoluteSith

+0

Da Sie mehrere Elemente benötigen, verwenden Sie einen Repeater anstelle eines einzelnen Bildes. –

Antwort

1

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: enter image description here

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: enter image description here

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:

enter image description here

+0

Hey danke für Ihre Hilfe. Aber was ich brauche, ist etwas ähnliches, aber eine weitere Bedingung ist, dass es viele Bilder in einer Instanz sichtbar sein kann, wenn Sie die Store App als Referenz sehen. – AbsoluteSith

+0

@AbsoluteSith, I ' Ich bin jetzt verwirrt, was Sie tun möchten, ist nicht wie das Bild, das Sie gepostet haben, oder Sie möchten nur wissen, wie Sie Elemente zu Flipview hinzufügen? –

+0

Schauen Sie sich dieses Video https://youtu.be/F39xV6zfAXU, das ist etwas, was ich Ich versuche zu erreichen – AbsoluteSith

0

Da Sie mehrere Elemente möchten, verwenden Sie einen Repeater als FlipView ‚s ItemTemplate. Hier ein Beispiel:

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

ItemsControl haben nicht ScrollViewer so müssen Sie dies explizit verwenden, da Sie nicht wissen, wie viele Elemente da sein. Sie können jedoch auch ListView oder GridView sowie Ihre Anforderungen verwenden.

+0

Ja, ich denke, man muss in diesem Fall eine Gridview verwenden – AbsoluteSith

+0

Ja, ich würde auch mit 'GridView' gehen. –

+0

Es funktioniert nicht in UWP :( – dnxit

Verwandte Themen