Öğeler denetimi için şablon olarak kılavuz nasıl ayarlanır?

Question

ItemsPanel biçiminde bir ızgara kullanan bir ItemsControl oluşturmaya çalışıyorum; bu, iki sütuna sahiptir, ilk sütun genişliği, o sütunun en geniş öğesinin genişliğidir ve satırlar için gereken satırlar olabilir. tüm öğeleri Temelde

, ben aşağıdakileri istiyorum görüntülemek, ama nedense bu yüzden bir ItemsControl içinde bir nesne koleksiyonu bağlanabildiği:

<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> 

Düzenleme: Rachels cevap burada, amele büyük bir çalışma örneğidir .

(Ben ItemsPanel için Grid.IsSharedSizeScope = "True" taşındı Rachel (işe yaramadı olan) ItemTemplate koymak anlamına emin değilse)

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> 

Answer 1

birden sorunlar bir ItemsControl burada vardır:

• sonuncusu ItemsControl

her okunması için birden fazla öğe oluşturuluyor sıralar

dinamik numarası oluşturmak büyük kalem

genişliğine uyacak biçimde ilk sütunu alınıyor Gerçekten en büyük sorun, bir ItemsControl her ItemTemplate'u ContentPresenter içinde tamamladığından, ItemsControl'un her yinelemesi için panelde birden fazla öğe oluşturmanın varsayılan yolu yoktur.

<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> 

Benim en iyi öneri bir 1X2 Grid içeren bir ItemTemplate oluşturmak olacaktır ve paylaşılan ilk sütunun genişliğini yapmak için Grid.IsSharedSizeScope kullanın: Sizin Sonuçta şu şekilde görünecektir. (ItemsPanelTemplate varsayılan StackPanel kalacaktı.)

Bu durumda da, sonuçta şu şekilde görünecektir: @ için

<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> 

Answer 2

Bir ListView kullanabilirsiniz

<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 gizler