如何將網格設置爲項目控件的模板？

我試圖創建一個ItemsControl，它使用網格作爲它的ItemsPanel，它有兩列，其中第一列寬度是該列中最寬項目的寬度，並且具有可能需要行顯示所有項目如何將網格設置爲項目控件的模板？

基本上，我想以下，但不知何故，一個ItemsControl左右的時間內，我可以綁定到對象的集合：

<Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="auto"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="auto"/> 
      <RowDefinition Height="auto"/> 
      <RowDefinition Height="auto"/> 
     </Grid.RowDefinitions> 

     <Label Content="{Binding Items[0].Header}"/> 
     <TextBox Text="{Binding Items[0].Content}" Grid.Column="1"/> 

     <Label Content="{Binding Items[1].Header}" Grid.Row="1"/> 
     <TextBox Text="{Binding Items[1].Content}" Grid.Row="1" Grid.Column="1"/> 

     <Label Content="{Binding Items[2].Header}" Grid.Row="2"/> 
     <TextBox Text="{Binding Items[2].Content}" Grid.Row="2" Grid.Column="1"/> 
    </Grid>

編輯：Rachels答案偉大的工作，這裏是一個工作示例。

（我感動Grid.IsSharedSizeScope =「true」添加到ItemsPanel，如果不知道瑞秋打算把它在ItemTemplate（沒有工作））

namespace WpfApplication23 
{ 
    public partial class Window1 : Window 
    { 
     public List<Item> Items { get; set; } 

     public Window1() 
     { 
      Items = new List<Item>() 
      { 
       new Item(){ Header="Item0", Content="someVal" }, 
       new Item(){ Header="Item1", Content="someVal" }, 
       new Item(){ Header="Item267676", Content="someVal" }, 
       new Item(){ Header="a", Content="someVal" }, 
       new Item(){ Header="bbbbbbbbbbbbbbbbbbbbbbbbbb", Content="someVal" }, 
       new Item(){ Header="ccccccc", Content="someVal" } 
      }; 

      InitializeComponent(); 

      DataContext = this; 
     } 
    } 

    public class Item 
    { 
     public string Header { get; set; } 
     public string Content { get; set; } 
    } 
} 

<Window x:Class="WpfApplication23.Window1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

    <ItemsControl ItemsSource="{Binding Items}"> 

     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Grid.IsSharedSizeScope="True"/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 

     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition SharedSizeGroup="ColumnOne" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <Label Content="{Binding Header}"/> 
        <TextBox Text="{Binding Content}" Grid.Column="1"/> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Window>

來源

2013-05-16 pastillman

一個完美的用例@瑞秋的[網格附加屬性（HTTP：// rachel53461。 wordpress.com/2011/09/17/wpf-grids-rowcolumn-count-properties/） –

林不知道這將如何工作，因爲我的例子中的項目包含標題和內容。 – pastillman

使用你的想象力的傢伙。否則給我一個小時左右的時間來完成我的工作，我可以爲你創建一個例子。 –

這裏有一個ItemsControl多個問題：

讓您的第一列相匹配的最大的項目
生成行
生成多個項目進行的ItemsControl

最後一個是每個迭代的動態數量的寬度真的是最大的問題，因爲ItemsControl將每個ItemTemplate包裝在ContentPresenter中，因此在面板中爲ItemsControl的每次迭代都不會創建多個項目。你的最終結果是這樣的：

<Grid> 
    ... 

    <ContentPresenter> 
     <Label Content="{Binding Items[0].Header}"/> 
     <TextBox Text="{Binding Items[0].Content}" Grid.Column="1"/> 
    </ContentPresenter> 
    <ContentPresenter> 
     <Label Content="{Binding Items[1].Header}" Grid.Row="1"/> 
     <TextBox Text="{Binding Items[1].Content}" Grid.Row="1" Grid.Column="1"/> 
    </ContentPresenter> 
    <ContentPresenter> 
     <Label Content="{Binding Items[2].Header}" Grid.Row="2"/> 
     <TextBox Text="{Binding Items[2].Content}" Grid.Row="2" Grid.Column="1"/> 
    </ContentPresenter> 
</Grid>

我最好的建議是創建一個包含一個1x2的Grid的ItemTemplate，並使用Grid.IsSharedSizeScope，使共享第一列的寬度。（該ItemsPanelTemplate將保持默認StackPanel）

這樣，最終的結果是這樣的：

<StackPanel> 
    <ContentPresenter> 
     <Grid IsSharedSizeScope="True"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition SharedSizeGroup="ColumnOne" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Label Content="{Binding Header}"/> 
      <TextBox Text="{Binding Content}" Grid.Column="1"/> 
     </Grid> 
    </ContentPresenter> 
    <ContentPresenter> 
     <Grid IsSharedSizeScope="True"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition SharedSizeGroup="ColumnOne" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Label Content="{Binding Header}"/> 
      <TextBox Text="{Binding Content}" Grid.Column="1"/> 
     </Grid> 
    </ContentPresenter> 
    ... 
</StackPanel>

來源

2013-05-17 12:49:57 Rachel

Simply Brilliant。 –

這很好，謝謝，（請參閱我的編輯） – pastillman

請注意''Grid.IsSharedScope =「True」'應該設置在父容器*上，而不是在子網格*上。那個（否則非常好和有幫助的）答案讓我迷惑了那個'IsSharedScope'屬性。 – ForNeVeR

您可以使用一個ListView

<ListView ItemsSource="{Binding MyList}"> 
    <ListView.View> 
     <GridView> 
      <GridView.ColumnHeaderContainerStyle> 
       <Style TargetType="{x:Type GridViewColumnHeader}"> 
        <Setter Property="Visibility" Value="Collapsed" /> 
       </Style> 
      </GridView.ColumnHeaderContainerStyle> 
      <GridViewColumn 
       Header="" 
       Width="Auto" 
       DisplayMemberBinding="{Binding Header}"/> 
      <GridViewColumn 
       Header="" 
       DisplayMemberBinding="{Binding Value}"/> 
     </GridView> 
    </ListView.View> 
</ListView>

的ColumnHeaderContainerStyle隱藏GridViewHeader

來源

2013-05-17 11:17:31 Smotsch

Thankyou，但我並不是真的想要列表滑塊或在列表視圖中存在的選擇 – pastillman

如何將網格設置爲項目控件的模板？

回答

相關問題