ListView item height in Windows Store app

Question

I have a simple ListView

<ListView ItemsSource="{Binding SelectedSearch.Offers}"
    IsItemClickEnabled="True"
    ItemClick="lv_ItemClick_1"
    Margin="0,0,0,10"
    Name="lv"                          
    SelectionMode="None"
    IsSwipeEnabled="false"
    ItemTemplateSelector="{StaticResource OffersGridTemplateSelector}"/>

And I custom ItemTemplate selector used to choose between two different DataTemplates. The problem is, that each items seems to have something like a minimum height.

If I use a DataTemplate with just a TextBlock

    <DataTemplate x:Key="SpecialTextTemplate">
        <TextBlock Text="{Binding Text}" />
    </DataTemplate>

the item takes too much space verticaly. It seems to take the same minimum space as the other template composed of 3 textblocks in a stackpanel

How do I make it shrink to the height of the content? Is there a minimum height?

Answer 1

I have already found rather clear solution for this problem!

<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter ContentMargin="0" SelectionCheckMarkVisualEnabled="False" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ListView     IsSwipeEnabled="False"
              ItemContainerStyle="{StaticResource NoSpacesListViewItemStyle}"
              ItemTemplate="{StaticResource SomeTemplate}"
              ItemsSource="{Binding SomeData}"
              SelectionMode="None"/>

Also I can admit that Selection borders will not work in this case. So this method is not appropriate for ListViews with selection.

There is full default ListViewItemStyle with same changes:

<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="TabNavigation" Value="Local" />
    <Setter Property="IsHoldingEnabled" Value="True" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                       CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
                                       CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
                                       CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
                                       ContentMargin="0"
                                       ContentTransitions="{TemplateBinding ContentTransitions}"
                                       DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                                       DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                                       DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                                       DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                                       FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                                       Padding="{TemplateBinding Padding}"
                                       PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                       PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
                                       PointerOverBackgroundMargin="1"
                                       ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                       SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                                       SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
                                       SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
                                       SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
                                       SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
                                       SelectionCheckMarkVisualEnabled="False" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

recently I also faced the same issue in UWP application. Yes there is default min height defined for the list view item. overriding the same will solve the issue. for me this solution works:

<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
   <Setter Property="MinHeight" Value="YOUR_MIN_HEIGHT" />
</Style>

Answer 3

The answer isn't obvious. The ListViewItem default template has a checkbox that decorates selected items. This checkbox appears in the upper right hand corner of the selected items and has a height and width of 40 which effectively gives you a minimum height on these items. You can disable the checkbox by setting:

       SelectionCheckMarkVisualEnabled="False"

In your copied template.

Answer 4

By default there are no min heights for ItemTemplates. I have created a very simple sample that has a list view, 2 templates and one template selector and did not reproduce your issue. Let me know if it works for you.

XAML:

<ListView ItemsSource="{Binding Items}" ItemTemplateSelector="{StaticResource ts}">
            <ListView.Resources>
                <DataTemplate x:Key="t1">
                    <TextBlock Text="aaa"/>
                </DataTemplate>

                <DataTemplate x:Key="t2">
                    <TextBlock Text="bbb" Foreground="Red" Height="100"/>
                </DataTemplate>

                <local:TestTemplateSelector x:Key="ts" T1 ="{StaticResource t1}" T2="{StaticResource t2}"/>
            </ListView.Resources>
        </ListView>

Selector: (should be in the namespace defined as "local" in your xaml

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace *TestBinding*
{
    public class TestTemplateSelector : DataTemplateSelector
    {
        public DataTemplate T1 { get; set; }
        public DataTemplate T2 { get; set; }

        protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            if (item.ToString() == "b")
            {
                return T2;
            }

            return T1;
        }
    }

ViewModel:

public IList<string> Items { get { return new List<string>() { "a", "b", "c" }; } }

Answer 5

Old question, I know, but I had the same issue.. In my search for a solution I found this question: Different item size in a grouped gridView. Havent tried the solutions, but it seems you need a VariableSizedWrapGrid.