Liste les éléments dans une grille (pas GridView)

Question

Dans mon application WPF, j'ai une collection à laquelle je voudrais lier une grille de contrôles. Un exemple de la configuration désirée (TL; DR Je veux cet d'un ItemsSource):

Desired layout http://imagebin.ca/img/27UTke

<Grid ShowGridLines="True"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 

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

    <Label Grid.Row="0" Grid.Column="0">FileUploader</Label> 
    <ComboBox Grid.Row="0" Grid.Column="1" /> 
    <Button Grid.Row="0" Grid.Column="2">Edit</Button> 

    <Label Grid.Row="1" Grid.Column="0">TextUploader</Label> 
    <ComboBox Grid.Row="1" Grid.Column="1" /> 
    <Button Grid.Row="1" Grid.Column="2">Edit</Button> 

    <Label Grid.Row="2" Grid.Column="0">UrlShortener</Label> 
    <ComboBox Grid.Row="2" Grid.Column="1" /> 
    <Button Grid.Row="2" Grid.Column="2">Edit</Button> 

    <Label Grid.Row="3" Grid.Column="0">ImageUploader</Label> 
    <ComboBox Grid.Row="3" Grid.Column="1" /> 
    <Button Grid.Row="3" Grid.Column="2">Edit</Button> 
</Grid> 

Cet exemple présente des valeurs codées en dur; Je veux lier la collection dynamiquement, comme en utilisant un ListView. Cependant, l'utilisation d'un ListView avec un GridView n'est pas ce que je veux; Je n'ai pas besoin de sélection, d'en-têtes, de tri, etc. Pour l'utilisateur, la mise en page est un ensemble d'options parfaitement organisé, pas un ensemble de données dans une grille.

---

Je n'ai pas été en mesure de faire cette liaison correctement. Je l'ai essayé d'utiliser un ItemsControl avec une grille à l'extérieur, mais la grille est ignoré:

Failed attempt 1 http://imagebin.ca/img/kTUordk

<Grid ShowGridLines="True"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 

    <ItemsControl ItemsSource="{Binding MyData}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <ItemsControl> 
        <Label Grid.Column="0">Text here</Label> 
        <ComboBox Grid.Column="1" /> 
        <Button Grid.Column="2">Edit</Button> 
       </ItemsControl> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

---

J'ai aussi utilisé un ItemsControl avec une grille dans le panneau, mais ce qui crée une grille par article, ce qui est laid:

Failed attempt 2 http://imagebin.ca/img/xHo__-JD

<ItemsControl ItemsSource="{Binding Data}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <ItemsControl> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Grid ShowGridLines="True"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition Width="*" /> 
           <ColumnDefinition Width="Auto" /> 
          </Grid.ColumnDefinitions> 
         </Grid> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 

       <Label Grid.Column="0" Content="{Binding Features}" /> 
       <ComboBox Grid.Column="1" /> 
       <Button Grid.Column="2">Edit</Button> 
      </ItemsControl> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

---

Après quelques recherches, j'ai découvert la propriété SharedSizeGroup des définitions de grille de colonnes et de lignes. J'ai essayé ceci avec la tentative précédente; cependant, la colonne du milieu (avec une largeur *) ne semble pas se redimensionner pour remplir toute la largeur de la fenêtre:

Failed attempt 3 http://imagebin.ca/img/nEoMJmy

<ItemsControl ItemsSource="{Binding Data}" Grid.IsSharedSizeScope="True"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <ItemsControl> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Grid ShowGridLines="True"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" SharedSizeGroup="A" /> 
           <ColumnDefinition Width="*" SharedSizeGroup="B" /> 
           <ColumnDefinition Width="Auto" SharedSizeGroup="C" /> 
          </Grid.ColumnDefinitions> 
         </Grid> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 

       <Label Grid.Column="0" Content="{Binding Features}" /> 
       <ComboBox Grid.Column="1" /> 
       <Button Grid.Column="2">Edit</Button> 
      </ItemsControl> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

Quelle est la meilleure façon d'accomplir le first layout?

Answer 1

John Bowen a écrit un billet sur un pitfall of using * with SharedSizeGroups. En utilisant sa solution de contournement suggérée, j'ai été en mesure d'obtenir la mise en page souhaitée:

<Grid Name="grid"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" SharedSizeGroup="A" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" SharedSizeGroup="C" /> 
    </Grid.ColumnDefinitions> 
</Grid> 

<ItemsControl ItemsSource="{Binding Data}" Grid.IsSharedSizeScope="True"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <ItemsControl> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Grid ShowGridLines="True"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" SharedSizeGroup="A" /> 
           <ColumnDefinition Width="{Binding ColumnDefinitions[1].Width, ElementName=grid}" /> 
           <ColumnDefinition Width="Auto" SharedSizeGroup="C" /> 
          </Grid.ColumnDefinitions> 
         </Grid> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 

       <Label Grid.Column="0" Content="{Binding Features}" /> 
       <ComboBox Grid.Column="1" /> 
       <Button Grid.Column="2">Edit</Button> 
      </ItemsControl> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

Malheureusement, cela semble être un hack; Je suis sûr qu'il existe une meilleure solution pour accomplir ce que je veux.