Welcome to WindowsClient.net | Sign in | Join
in

WindowsClient.net

This Blog

Syndication

Sponsors





Tags

No tags have been created or used yet.

Archives

Bragi

Stretch the content of the ListView's cells

A short time ago, I came across an interesting question on the MSDN forum.  The person in question had a ListView using a GridView as it's view with a couple of columns defined which use DataTemplates. One of those templates contained a control that needed to be stretched out across the entire width of the cell that it occupied. This seems like a trivial task for a common situation. Which it is in the end, you just have to know how to do it. To illustrate the situation, I have included a small code sample.

<Window.Resources>
   <DataTemplate x:Key="cellTemplatePreviewPlayable">
      <ProgressBar  Height="14" Value="30" Maximum="100"/>
   </DataTemplate>

</Window.Resources>

<ListView x:Name="listView" ItemsSource="{Binding}">
   <ListView.View>
      <GridView>
         <GridViewColumn Header="Artist" 
                         DisplayMemberBinding="{Binding Path=Artist}" />
         <GridViewColumn Header="Title" 
                         DisplayMemberBinding="{Binding Path=Title}" />
         <GridViewColumn Header="Genre" 
                         DisplayMemberBinding="{Binding Path=Genre}" />
         <GridViewColumn Header="Listen" 
            CellTemplate="{StaticResource cellTemplatePreviewPlayable}"/>
      </GridView>
   </ListView.View>
</ListView>

I first came across a similar situation some time ago, and I must admit, it took some time, and a little bit of luck to find the proper solution, which is simply done using a custom style applied to the ListViewItems used as containers by the ListView. Here's the same example, but updated so that all items are stretched out.

<Window.Resources>

   <Style TargetType="{x:Type ListViewItem}" x:Key="ContainerStyle">
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
   </Style>
   <DataTemplate x:Key="cellTemplatePreviewPlayable">
      <ProgressBar  Height="14" Value="30" Maximum="100"/>
   </DataTemplate>

</Window.Resources>

<ListView x:Name="listView" ItemsSource="{Binding}"
               ItemContainerStyle="{StaticResource ContainerStyle}">
   <ListView.View>
      <GridView>
         <GridViewColumn Header="Artist" 
                         DisplayMemberBinding="{Binding Path=Artist}" />
         <GridViewColumn Header="Title" 
                         DisplayMemberBinding="{Binding Path=Title}" />
         <GridViewColumn Header="Genre" 
                         DisplayMemberBinding="{Binding Path=Genre}" />
         <GridViewColumn Header="Listen" 
             CellTemplate="{StaticResource cellTemplatePreviewPlayable}"/>
      </GridView>
   </ListView.View>
</ListView>

As you can see, all it takes is a style that sets the HorizontalContentAlignement to Stretch. At first, this seemed a little bit illogical to me, since a ListViewItem contains the entire data object while each cell in the GridView displays only a part of the content in a separate object. If you only go by the name of the property, you'd expect it to control the layout of the entire content, while actually it controls the layout of each data item separately.  Having said that, a ListViewItem combined with a GridView doesn't actually have a content to lay out, this is done by the GridView and to know how it lays out all of the columns, it uses the properties of the ListViewItem, and then it all starts to make sense, at least to me.  I hope for you to.

Of course, when you use this style, the cells in 'all' columns are stretched out, so if you need another alignment in another column, you will have to wrap your the content of your template inside another object which defines the correct alignment.  Here's the another DataTemplate that does exactly this.

<DataTemplate x:Key="cellTemplatePreview">
   <Border>
      <ProgressBar HorizontalAlignment="Left"  
                   Height="14" Value="30" Maximum="100"/>
   </Border>
</DataTemplate>

Comments

No Comments

Leave a Comment

(required)  
(optional)
(required)  
Add
Page view counter