拉伸/套牌，以適應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>