在 ViewBox 中拉伸 WPF ListView 中的项目

Stretching the items in a WPF ListView within a ViewBox

提问by MajorRefactoring

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.

我有一个令人沮丧的问题，我非常感谢您的帮助。我在 ViewBox 中有一个 ListView，但我无法让 ListView 中的项目水平拉伸。

Here is the XAML:

这是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:

下面是包含 Skin 和 Inning 对象定义的代码：

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

一局中可能出现的皮肤数量可以更改，并且可以由用户更改，因此我将 ListViews 放入 ViewBoxes 以便它们在皮肤数量更改时自动相应地调整大小。结果窗口可以在这里看到：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?

我已经尝试了HorzontalAlignment="Stretch"和 的各种组合，并HorizontalContentAlignment="Stretch"尝试修改 ItemsPanel 模板，但我一生似乎都无法弄清楚如何让 ListView 水平拉伸。如果没有一些代码来动态改变 ListView 的宽度，我想要做的事情是不可能的吗？还是我错过了一些非常简单的东西？

Any help that anyone can offer would be most appreciated.

任何人都可以提供的任何帮助将不胜感激。

Thanks,

谢谢，

Matthew

马修

回答by ASanch

Try setting the ItemContainerStyle for your ListView to something like:

尝试将 ListView 的 ItemContainerStyle 设置为类似：

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

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

您可能还需要设置<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.

在此之后，我认为您可以删除代码中的所有其他“Horizo​​ntalAlignment = Stretch”和“Horizo​​ntalContentAlignment = Stretch”设置器，因为它可能不再需要了。

回答by fanadd

Unexpectedly setting ScrollViewer.HorizontalScrollBarVisibility="Disabled"also worked for me:

出乎意料的设置ScrollViewer.HorizontalScrollBarVisibility="Disabled"也对我有用：

<ListView ItemsSource="{Binding SourceList}"
    ScrollViewer.HorizontalScrollBarVisibility="Disabled">