拉伸/套牌，以适应ListView中

Question

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

在“TileView”我将如何设置ListView的伸展每个图块以适合可用空间的ListView。即适合恰好3列在ListView即使ListView的变化大小（即，保持每一瓦片总是1/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是不行的。改用比例行或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>