Stretching the items in a WPF ListView within a ViewBox

Question

Hi,

I have a frustrating problem that I would much appreciate some help with. I have a ListView within a ViewBox and I can't get the items within the ListView to stretch horizontally. Here is the XAML:

<Window x:Class="WpfApplication3.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfApplication3"
    Title="Window1">
 <Window.Resources>
  <local:Inning x:Key="inning">
   <local:Inning.Skins>
    <local:Skin SkinNumber="1"></local:Skin>
    <local:Skin SkinNumber="2"></local:Skin>
    <local:Skin SkinNumber="3"></local:Skin>
   </local:Inning.Skins>
  </local:Inning>
 </Window.Resources>

    <Grid DataContext="{StaticResource inning}">
  <Grid.RowDefinitions>
   <RowDefinition Height="auto"></RowDefinition>
   <RowDefinition Height="*"></RowDefinition>
  </Grid.RowDefinitions>
  <TextBlock Background="Black" Text="SKINS" Foreground="White" FontSize="80" FontWeight="Bold" HorizontalAlignment="Center"></TextBlock>
   <Grid Margin="2" Grid.Row="1">
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="auto"></ColumnDefinition>
     <ColumnDefinition Width="*"></ColumnDefinition>
     <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
   <Viewbox>
    <ListView Name="lvSkinNumbers" ItemsSource="{Binding Skins}" HorizontalAlignment="Stretch" Background="Black" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
     <ListView.ItemTemplate>
      <DataTemplate>
       <TextBlock FontSize="250" VerticalAlignment="Stretch" LineStackingStrategy="BlockLineHeight" Margin="2" TextAlignment="Center" HorizontalAlignment="Stretch" Background="Black" Foreground="White" Text="{Binding SkinNumber}"></TextBlock>
      </DataTemplate>
     </ListView.ItemTemplate>
    </ListView>
    </Viewbox>
   <Viewbox Grid.Column="1">
    <ListView Name="lvFirstInningSkins" ItemsSource="{Binding Skins}" Grid.Column="1" HorizontalContentAlignment="Stretch" Background="Black">
     <ListView.ItemTemplate>
      <DataTemplate>
       <TextBlock FontSize="250" VerticalAlignment="Stretch" LineStackingStrategy="BlockLineHeight" Margin="2" TextAlignment="Center" HorizontalAlignment="Stretch" Background="Green" Foreground="White" Text="{Binding SkinNumber}"></TextBlock>
      </DataTemplate>
     </ListView.ItemTemplate>
    </ListView>
    </Viewbox>
   <Viewbox Grid.Column="2" HorizontalAlignment="Stretch">
    <ListView Name="lvSecondInningSkins" ItemsSource="{Binding Skins}" Grid.Column="2" HorizontalAlignment="Stretch" Background="Black">
     <ListView.ItemTemplate>
      <DataTemplate>
       <TextBlock FontSize="250" VerticalAlignment="Stretch" LineStackingStrategy="BlockLineHeight" Margin="2" TextAlignment="Center" HorizontalAlignment="Stretch" Background="Green" Foreground="White" Text="{Binding SkinNumber}"></TextBlock>
      </DataTemplate>
     </ListView.ItemTemplate>
    </ListView>
   </Viewbox>
  </Grid>
 </Grid>
</Window>

Here is the code behind with the definitions of the Skin and Inning objects:

using System;
using System.Windows;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace WpfApplication3
{

 public class Inning
 {
  private ObservableCollection<Skin> _skins = new ObservableCollection<Skin>();
  public ObservableCollection<Skin> Skins
  {
   get { return _skins; }
   set { _skins = value; }
  }
 }

 public class Skin : INotifyPropertyChanged
 {
  public Skin()
  {
  }

  public Skin( int skinNumber, Inning inning )
  {
   this.SkinNumber = skinNumber;
   this.Inning = inning;
  }

  public Inning Inning { get; set; }
  public int SkinNumber { get; set; }

  public int SkinCount
  {
   get { return this.Inning.Skins.Count; }
  }

  public void Notify( string propertyName )
  {
   if ( PropertyChanged != null )
    PropertyChanged( this, new PropertyChangedEventArgs( propertyName ) );
  }

  public event PropertyChangedEventHandler PropertyChanged;

 }


 public partial class Window1 : Window
 {

  public Window1()
  {
   InitializeComponent();
  }


 }
}

The number of skins that can occur in an inning can change, and can be changed by the user, so I've put the ListViews into ViewBoxes so they automatically resize accordingly when the number of skins change. The resulting window can be seen here: http://i52.tinypic.com/244wqpl.jpg

I've tried all sorts of combinations of HorzontalAlignment="Stretch" and HorizontalContentAlignment="Stretch" and tried modifying the ItemsPanel template but I can't for the life of me seem to figure out how to get the ListView to stretch horizontally. Is what I'm trying to do impossible without some code behind to alter the width of the ListView dynamically? Or am I missing something really simple?

Any help that anyone can offer would be most appreciated.

Thanks,

Matthew

Answer 1

Try setting the ItemContainerStyle for your ListView to something like:

<ListView>
  <ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
  </ListView.ItemContainerStyle>
</ListView>

You also might need to set <Viewbox Stretch="Fill"/>.

After this, I think you can remove all those other "HorizontalAlignment = Stretch" and "HorizontalContentAlignment = Stretch" setters in your code since it probably won't be necessary anymore.