CODEWITHSUNDEEP
listviewwinrt-xaml
Markus Bruckner
Markus Bruckner

Reputation: 2880

ListView ignores parts of the style of item templates

Issue description

I've stacked a few TextBlock elements using a regular StackPanel (in a DataTemplate).

When using it as ContentTemplate of a ContentControl, the layout appears as expected. However, if I use the DataTemplate as ItemTemplate of a ListView, some properties are simply ignored (TextLineBounds, but also Margin).

In the following screenshot, I've placed a ContentControl and a ListView with one item next to each other to illustrate the problem. To make the issue more obvious, I've included colored grids to the left of the TextBlocks.

ContentControl on the left (style ok) vs ItemTemplate on the right side (TextLineBounds property is ignored)

Things I've tried

I've tried several approaches using Blend. Switching out the ItemContainerStyle, ItemsPanel and ControlTemplate which didn't help. I could use an ItemsControl and do selection, etc. by hand but I'd like to avoid that.

Reproduce the issue

The following UserControl can be used to reproduce the issue in a blank winrt project.

<UserControl
    x:Class="ListViewRepro.DropInRepro"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="60"
    d:DesignWidth="300">
    <UserControl.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <Grid Width="150">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>
                <StackPanel>
                    <Grid Height="18" Background="Yellow" />
                    <Grid Height="14" Background="Orange" />
                    <Grid Height="10" Background="GreenYellow" />
                </StackPanel>
                <StackPanel Grid.Column="1">
                    <TextBlock FontSize="20" Text="Header"
                               TextLineBounds="TrimToBaseline" />
                    <TextBlock FontSize="14.6" Text="Subheader"
                               TextLineBounds="TrimToBaseline" />
                    <TextBlock>Title</TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>
    <StackPanel Orientation="Horizontal">
        <ContentControl ContentTemplate="{StaticResource ItemTemplate}" />
        <ListView ItemTemplate="{StaticResource ItemTemplate}">
            <x:String>dummy item</x:String>
        </ListView>
    </StackPanel>
</UserControl>

Upvotes: 0

Views: 114

Answers (1)

Filip Skakun
Filip Skakun

Reputation: 31724

The default FontFamily is different in a ListViewItem (it's "Segoe UI" as opposed to "Global User Interface"), so if you want it to work the same in both cases - you need to specify the font explicitly as either "Segoe UI" or "Global User Interface" and it will work the same.

Seems like the BaselineOffset is one of the differences between these two fonts.

Upvotes: 1

Related Questions