CODEWITHSUNDEEP
xamlwindows-8microsoft-metro
Igor Kulman
Igor Kulman

Reputation: 16361

ListView item height in Windows Store app

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?

Upvotes: 3

Views: 3015

Answers (5)

Kiran Paul
Kiran Paul

Reputation: 875

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>

Upvotes: 3

CatCap
CatCap

Reputation: 240

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>

Upvotes: 2

Quark Soup
Quark Soup

Reputation: 4736

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.

Upvotes: 2

lasselg
lasselg

Reputation: 11

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.

Upvotes: 0

AlexDrenea
AlexDrenea

Reputation: 8039

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" }; } }

Upvotes: 0

Related Questions