拉伸/设置瓷砖以适合 ListView

Question

我已经使用基于http://msdn.microsoft.com/en-us/library/ms748859.aspx 的代码为 ListView 实现了自定义视图

在“TileView”中，我将如何设置 ListView 以拉伸每个图块以适应可用空间。即，即使 ListView 改变大小（即保持每个图块始终为 1/3 宽），也恰好适合 ListView 中的 3 列。

<l:PlainView x:Key="tileView" ItemTemplate="{StaticResource centralTile}" />

<DataTemplate x:Key="centralTile">
  <StackPanel>
    <Grid HorizontalAlignment="Center">
      <Image Source="{Binding XPath=@Image}" />
    </Grid>
    <TextBlock Text="{Binding XPath=@Name}" />
    <TextBlock Text="{Binding XPath=@Type}" />
  </StackPanel>
</DataTemplate>

编辑：

我已经让 ListView 使用上述方法显示 x 个图块，并在该示例中更改了以下 XAML：

  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
                   RelativeSource={RelativeSource 
                                   AncestorType=ScrollContentPresenter}}"
                   ItemWidth="{Binding (ListView.View).ItemWidth,
                   RelativeSource={RelativeSource AncestorType=ListView}}"
                   MinWidth="{Binding (ListView.View).ItemWidth,
                   RelativeSource={RelativeSource AncestorType=ListView}}"
                   ItemHeight="{Binding (ListView.View).ItemHeight,
                   RelativeSource={RelativeSource AncestorType=ListView}}"/>
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>
  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <UniformGrid Columns="3"/>
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>

这正是我需要的，如果 ListView 调整列的大小，列也将调整大小。

现在我需要弄清楚如何动态更改 UniformGrid 列 :)

Answer 1

我对这个问题有两个考虑：

1. 您的 DataTemplate 应该适合所有排列的矩形。我的意思是 StackPanel 的属性 Height/Width = 100 不好。改为使用具有比例行的 Grid 或 DockPanel。
2. 没有满足您要求的标准面板。我认为您应该使用具有 ColumnCount 属性的 Panel（或 WrapPanel）类编写自己的继承者。然后重写 ArrangeOverride 和 MeasureOverride 方法，并根据 ColumnCount 提供适当的矩形。

这是工作演示，但您应该根据自己的要求改进 MyPanel：

public class MyPanel : WrapPanel
{
    public int ColumnCount
    {
        get 
        { 
            return (int)GetValue(ColumnCountProperty); 
        }
        set 
        {
            SetValue(ColumnCountProperty, value); 
        }
    }

    public static readonly DependencyProperty ColumnCountProperty =
        DependencyProperty.Register("ColumnCount", 
            typeof(int), 
            typeof(MyPanel), 
            new FrameworkPropertyMetadata(
                0, 
                FrameworkPropertyMetadataOptions.AffectsRender));

    protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
    {
        if (this.InternalChildren.Count == 0)
        {
            return finalSize;
        }

        var arrangedWidth = this.ActualWidth;
        var width = this.ActualWidth / this.ColumnCount;
        var x = 0.0; 
        var y = 0.0;
        var columnCounter = 0;
        for(int i = 0; i<this.InternalChildren.Count; i++)
        {
            if (columnCounter == this.ColumnCount)
            {
                y += width;
                x = 0;
                columnCounter = 0;
            }

            columnCounter++;
            var ch = this.InternalChildren[i];
            ch.Arrange(new Rect(x, y, width, width));
            x = x + width;
        }

        return finalSize; 
    }

    protected override System.Windows.Size MeasureOverride(System.Windows.Size constraint)
    {
        if (this.InternalChildren.Count == 0)
        {
            return this.DesiredSize;
        }

        var supposedSize = base.MeasureOverride(constraint);
        var width = this.ActualWidth / this.ColumnCount;
        var rowsCount = this.InternalChildren.Count / this.ColumnCount + (this.InternalChildren.Count % this.ColumnCount > 0 ? 1 : 0);
        for (int i = 0; i < this.InternalChildren.Count; i++)
        {
            var ch = this.InternalChildren[i];
            ch.Measure(new Size(width, width));

        }
        double totalWidth = this.InternalChildren[0].DesiredSize.Width * this.ColumnCount;
        return new Size(totalWidth, rowsCount * width); 

    }
}

在 XAML 中的用法：

   <ListView ItemsSource="{Binding Items}" 
              ItemTemplate="{StaticResource Template}"
              >
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <self:MyPanel ColumnCount="3"  />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>