Display content in a UWP app - XAML Control - xaml

Question

I am trying to display the content of a UWP app exactly the same way the content is displayed in the Store app (see above).
I used a ListView, but the Items appear right of the Header, instead of appearing straight below it, as you can see on the following screenshot:
This is my XAML:
<Page.Resources>
<local:Items x:Key="Item"/>
<DataTemplate x:Name="myListViewDataTemplate">
<Grid Margin="0" Width="200">
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Path=ItemImage}" Stretch="UniformToFill"/>
<TextBlock Grid.Row="1" Text="{Binding Path=ItemName}" Margin="0,5,0,0"
VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="20"/>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="LightGray">
<ListView ItemTemplate="{StaticResource myListViewDataTemplate}" ItemsSource="{StaticResource Item}">
<ListView.Header>
<TextBlock Margin="20,10,0,10" Text="Group of items" FontSize="22" FontWeight="SemiBold"/>
</ListView.Header>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
Any idea on how to solve the problem?

Answer 1

One easy workaround is to just use a TextBlock instead of specifying the Header and place it on top of the ListView, but I prefer your current approach as it's simply neater.
But to make it look like what you want, we will need to modify the default Style of the ListView, which wraps the Header and the items inside a StackPanel(child of an ItemsPresenter). We don't want that, so we first remove the tempate bindings of Header and HeaderTemplate from the ItemsPresenter, and then we replace the root Border with a Grid, finally we add a ContentPresenter as the Header and place it above the ScrollViewer (the parent of the ItemsPresenter).
You can refer to the following Style which does everything that I described above.
<Style x:Key="ListViewStyle1"
TargetType="ListView">
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="TabNavigation"
Value="Once" />
<Setter Property="IsSwipeEnabled"
Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollMode"
Value="Disabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled"
Value="False" />
<Setter Property="ScrollViewer.VerticalScrollMode"
Value="Enabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled"
Value="True" />
<Setter Property="ScrollViewer.ZoomMode"
Value="Disabled" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled"
Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange"
Value="True" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition />
<ContentThemeTransition />
<ReorderThemeTransition />
<EntranceThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter x:Name="Header" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
FooterTemplate="{TemplateBinding FooterTemplate}"
Footer="{TemplateBinding Footer}"
Padding="{TemplateBinding Padding}" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you just apply it to your ListView like this. Oh BTW, make sure you set the VerticalAlignment to Top too.
<ListView VerticalAlignment="Top"
Style="{StaticResource ListViewStyle1}"
...>
Hope this helps!