Question

I’m currently trying to figure out how to show different types of objects in a GridView, look at this Pic for example:

the last element on the right side is different than the other elements, so if i bind an observablecollection to the GridView, how can i say that the last element is shown up in anohter layout.

currently I’m using this XAML-Code

<GridView x:Name="startView" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="2" SelectionMode="None" Width="Auto">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
                            <Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>

and this Code in the Back:

ObservableCollection<Movie> recentlyStarted = await Api.RecentlyStarted(3);
startView.DataContext = recentlyStarted;

but I have currently no clue how to let the last element show up in a different style

Answer 1

The easy way would be to have the two types of object as different classes (e.g. MoviePicStyle + MoviePlainStyle. Then move your DataTemplate out of the GridView, so that each object is picked up by type,
e.g.

<Window.Resources>
  <DataTemplate DataType="{x:Type ViewModel:MoviePicStyle}">
    <StackPanel>
       <TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
       <Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
    </StackPanel> 
  <DataTemplate DataType="{x:Type ViewModel:MoviePlainStyle}">
      ...Different View...
  </DataTemplate>
</Window.Resources>
<GridView...