Windows 8.1 ListViewItem minimum height when using datatemplate

Question

When I have a listview with hardcoded items, I can set the height of the item to whatever and it shows fine.

               <ListView x:Name="TestList">
                <ListViewItem Height="40">1234</ListViewItem>
                <ListViewItem Height="10" FontSize="6">5678</ListViewItem>
                <ListViewItem Height="0"></ListViewItem>
                <ListViewItem Height="50">54322328</ListViewItem>
                  <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Padding" Value="0,0,0,0"/>
                        <Setter Property="MinHeight" Value="0"/>
                        <Setter Property="Margin" Value="-5,-3.7,-5,-3.7"/>
                        <Setter Property="MinHeight" Value="0"></Setter>
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
         
                    </Style>
                </ListView.ItemContainerStyle>
               </ListView>
But when I change it to read from a datatemplate instead, I see a minimum height on the items.

I changed the ListView to 
                    <ListView  x:Name="TestList"  
                      ItemsSource="{Binding Source={StaticResource TestViewSource}}"
                      ItemTemplate="{StaticResource TestBlockTemplate}"
                     >
 
and here is the template. essentially empty but with a binding on the height and background.
                <DataTemplate x:Key="TestBlockTemplate">
                      <Grid x:Name="BlockObjectGrid" Height="{Binding TranslatedHeight}" Background="{Binding TranslatedColor}">
                     </Grid>
               </DataTemplate>

and in the cs file, I create a sample colection to assign the height for binding.
            Test t1 = new Test();
            t1.Title = "T1";
             t1.TranslatedHeight = 80;
            t1.TranslatedColor = new SolidColorBrush(Colors.Green);

            Test t2 = new Test();
            t2.Title = "T2zcascsacsacsa";
            t2.TranslatedHeight = 5;
            t2.TranslatedColor = new SolidColorBrush(Colors.BlueViolet);

            Test t3 = new Test();
            t3.Title = "T3vdsvsvcdscds";
            t3.TranslatedHeight = 40;
            t3.TranslatedColor = new SolidColorBrush(Colors.Brown);

            testColl.Add(t1);
            testColl.Add(t2);
            testColl.Add(t3);
     
            TestViewSource.Source = testColl;
t2 shows same height with the selection margin around as t3. although the item display with the color is with the height 10, there is some extra padding around it that essentially makes it take the same space as t3.
           Is there any way to get around this to just display t2 in a height 10 without the extra padding?

What I saw from playing aorund is that the margin in the style seems to matter somewhat. As the height of the item gets smaller though, things seem to get messed up. Any idea how to solve this?

Thanks

Answer 1

Hello sireesha123! 

To give you a quick answer for that, you need open the same control in Blend for Visual Studio 2013, right click on the control and try to edit the templates. You can manipulate according to your requirements.

Cheers

Arafat

Answer 2

tried that but I couldnt figure out what to change. what I figured though is if I change the

SelectionCheckMarkVisualEnabled  from true to false everything looks right. except I need selection enabled on my control. I need to figure out how to reduce the size of the checkmark?

Answer 3

Check this code and you can play more in Blend;

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
	<Page.Resources>
		<Style x:Key="ListViewItemStyle" 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,0,18,2"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListViewItem">
						<ListViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" ContentMargin="4" ContentTransitions="{TemplateBinding ContentTransitions}" CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" PointerOverBackgroundMargin="1" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Height="28" Width="95"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    	<ListView HorizontalAlignment="Left" Height="100" Margin="460,267,0,0" VerticalAlignment="Top" Width="100" ItemContainerStyle="{StaticResource ListViewItemStyle}"/>

    </Grid>
</Page>