2012-04-04 14 views
1

Ich möchte eine Reihe von Objekten auflisten und die Objekte gleichmäßig horizontal verteilen. Wenn es kein datengebundenes Array wäre, würde ich einfach ein Raster mit der richtigen Anzahl von Spalten erstellen und jedes Element einer Spalte zuweisen. Problem ist, ich weiß nicht, wie man das mit einem datengebundenen Listensteuerelement macht.Wie wird ein Array von Objekten in WPF horizontal verteilt?

Als preiswerte Alternative Ich habe die Elemente horizontal ein Stackpanel mit für ein Item wie dies als Itemspanel aufgeführt werden:

<ItemsControl ItemsSource="{Binding Path=ValveSettings}" Grid.Row="0"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="auto" /> 
         <RowDefinition /> 
         <RowDefinition Height="auto" /> 
        </Grid.RowDefinitions> 
        <Label Content="{Binding Path=Name}" Grid.Row="0" /> 
        <ScrollBar Orientation="Vertical" Grid.Column="0" Grid.Row="1" Minimum="0" Maximum="100000" Value="{Binding Path=DelayInMicroseconds}" SmallChange="100" LargeChange="1000" /> 
        <TextBox Text="{Binding Path=DelayInMicroseconds}" Grid.Row="2" /> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 

Gibt es eine Art, wie ich sie aus gleichmäßig ausbreiten kann?

Antwort

0

Ich spanne Listenelemente im Allgemeinen mit einem Rand auf der ItemTemplate. Lege den Rand auf die nicht-beginnende Seite (d. H. Wenn die Liste von links auffüllt, lege den Rand auf die rechte Seite). Auf diese Weise wird jedes nachfolgende Objekt x Pixel vom vorherigen Objekt entfernt platziert.

In Ihrem obigen Beispiel habe ich dem Rasterelement einen Rand hinzugefügt.

 <DataTemplate> 
      <Grid Margin="0 0 8 0"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="auto" /> 
        <RowDefinition /> 
        <RowDefinition Height="auto" /> 
       </Grid.RowDefinitions> 
       <Label Content="{Binding Path=Name}" Grid.Row="0" /> 
       <ScrollBar Orientation="Vertical" Grid.Column="0" Grid.Row="1" Minimum="0" Maximum="100000" Value="{Binding Path=DelayInMicroseconds}" SmallChange="100" LargeChange="1000" /> 
       <TextBox Text="{Binding Path=DelayInMicroseconds}" Grid.Row="2" /> 
      </Grid> 
     </DataTemplate> 
+0

Wie haben Sie die Marge von 8 wählen? Ist das nicht ein absoluter Wert? Wenn ja, würde die Verwendung eines absoluten Wertes eine Optimierung erfordern, abhängig davon, wie viele Elemente sich in dem Array befinden und wie groß das Fenster ist? –

+1

Ahh, OK. Ja, die Marge von 0 0 8 0 war willkürlich, da ich dachte, dass Sie einfach nur etwas Abstand zwischen Ihren Artikeln haben wollten. Um zu bewirken, dass Elementcontainer basierend auf der Anzahl der Positionen positioniert werden, können Sie möglicherweise feststellen, ob es möglich ist, ein UniformGrid als ItemsPanelTemplate zu verwenden. Ich habe das nicht versucht, aber ich stelle mir vor, dass Sie es auf 1 Zeile beschränken müssen, und eine Möglichkeit finden, die Anzahl der Spalten auf die Anzahl der Elemente in der ItemsCollection zu ändern. Ich werde sehen, ob ich das in einer Weile testen kann, wenn Sie möchten. – CodeWarrior

+0

Danke, das ist das Herz des Problems, das ich versuche zu lösen –

1

Dies ist das Ergebnis der Kommentare mit Codewarrior, die wunderbar funktioniert:

<ItemsControl ItemsSource="{Binding Path=Settings.Valves}" Grid.Row="0"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <UniformGrid Rows="1" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="auto" /> 
         <RowDefinition /> 
         <RowDefinition Height="auto" /> 
        </Grid.RowDefinitions> 
        <TextBlock Text="{Binding Path=Name}" Grid.Row="0" TextAlignment="Center" /> 
        <ScrollBar Orientation="Vertical" Grid.Column="0" Grid.Row="1" Minimum="0" Maximum="100000" Value="{Binding Path=DelayInMicroseconds}" SmallChange="100" LargeChange="1000" /> 
        <TextBox Text="{Binding Path=DelayInMicroseconds}" Grid.Row="2" TextAlignment="Center" /> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
Verwandte Themen