Answered by:
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
Tuesday, January 21, 2014 6:48 PM
Answers
-
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>
- Proposed as answer by Jamles HezModerator Tuesday, January 28, 2014 5:13 AM
- Marked as answer by Jamles HezModerator Wednesday, January 29, 2014 8:02 AM
- Unmarked as answer by Jamles HezModerator Wednesday, January 29, 2014 8:02 AM
- Marked as answer by Jamles HezModerator Wednesday, January 29, 2014 8:03 AM
Tuesday, January 21, 2014 8:44 PM
All replies
-
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
Tuesday, January 21, 2014 7:42 PM -
Tuesday, January 21, 2014 7:52 PM
-
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>
- Proposed as answer by Jamles HezModerator Tuesday, January 28, 2014 5:13 AM
- Marked as answer by Jamles HezModerator Wednesday, January 29, 2014 8:02 AM
- Unmarked as answer by Jamles HezModerator Wednesday, January 29, 2014 8:02 AM
- Marked as answer by Jamles HezModerator Wednesday, January 29, 2014 8:03 AM
Tuesday, January 21, 2014 8:44 PM