Geben Sie die maximale Anzahl der Spalten für ein WrapPanel in WPF

Question

Ich habe ein WrapPanel, und ich möchte die maximale Anzahl seiner Spalten angeben. Wenn zum Beispiel meine Collection "ObjectCollection" (gebunden an dieses WrapPanel) nur 4 Elemente enthält, hat das WrapPanel nur eine Zeile. Wenn "ObjectCollection" jedoch über 5 Elemente verfügt, erstellt das WrapPanel eine weitere Zeile, um die fünfte einzufügen. (Meine Max_Columns_Number ist in diesem Fall 4).

Answer 1

Ich bin mir ziemlich sicher, dass Sie es nicht mit einer WrapPanel tun können, aber Sie können stattdessen die UniformGrid verwenden.

Dieser hat Eigenschaften, um die Anzahl der gewünschten Zeilen und Spalten anzugeben.

Wenn Sie die Eigenschaft Columns auf 4 setzen, werden 4 Elemente in jeder Zeile beibehalten und dann zum nächsten Element geblättert.

<UniformGrid Columns="4"> 
    <!-- In first row --> 
    <Button Content="test"></Button> 
    <Button Content="test"></Button> 
    <Button Content="test"></Button> 
    <Button Content="test"></Button> 

    <!-- In second row --> 
    <Button Content="test"></Button> 
</UniformGrid> 

Answer 2

Grundsätzlich Sie einen benutzerdefinierten Panel selbst ... jetzt nicht bekommen, mutlos zu erstellen brauchen werden ... es ist nicht dass schwierig. So starten Sie mit, nehmen Sie bitte einen Blick auf die Beiträge, die ich Links dafür zur Verfügung gestellt haben erklären, wie eine benutzerdefinierte erstellen Panel:

How to create a Custom Layout Panel in WPF

Creating Custom Panels In WPF

Ok, also jetzt, dass Sie ein bisschen mehr wissen über benutzerdefinierte Panel s erstellt hat, können wir weiter ... hier, was Sie brauchen werden:

private int columnCount; 
private double leftColumnEdge, rightColumnEdge, columnWidth; 

public int ColumnCount 
{ 
    get { return columnCount; } 
    set 
    { 
     if (value < 1) value = 1; 
     columnCount = value; 
    } 
} 

würde Diese Eigenschaft wird verwendet, wenn Sie erklären, um Ihre Panel in Resources:

<ItemsPanelTemplate x:Key="AnimatedPanel"> 
    <Controls:AnimatedColumnWrapPanel ColumnCount="3" ... /> 
</ItemsPanelTemplate> 

Beachten Sie, dass Sie benötigen, um es zu erklären innerhalb ein ItemsPanelTemplate Objekt, weil das ist, was die ItemsPanel Eigenschaft erwartet:

<ListBox ItemsPanel="{StaticResource AnimatedPanel}" ... /> 

Nun zurück zum Panel ... hier ist eine Hilfsmethode, die ich aus den MeasureOverride und ArrangeOverride Methoden anrufe:

private void UpdateColumns(int currentColumn, Size finalSize) 
{ 
    leftColumnEdge = (finalSize.Width/ColumnCount) * currentColumn; 
    rightColumnEdge = (finalSize.Width/ColumnCount) * (currentColumn + 1); 
    columnWidth = rightColumnEdge - leftColumnEdge; 
} 

Leider kann ich Ihnen kein vollständiges Beispiel liefern, da meine benutzerdefinierten Panel s alle in eine Basisklasse AnimatedPanel mit vielen zusätzlichen Funktionen eingebunden sind. Sie müssen jedoch nur die Methoden MeasureOverride und ArrangeOverride erstellen, um diese Panel zu vervollständigen. Wenn Sie nur logisch darüber nachdenken, ist es wirklich nicht so schwierig.

Answer 3

Sie können die Anzahl der Spalten steuern, indem Sie die Breite des Wrap-Bedienfelds festlegen. Ich binde die Breite des Wrap-Panels an die ActualWidth eines Containers wie Border. Auf diese Weise ist die Anzahl der Spalten dynamisch und basiert auf der Breite des Fensters.

<Border Name="DataBorder" Grid.Row="0" Grid.Column="1" 
     BorderBrush="Navy" BorderThickness="1,2,2,2" 
     Padding="4"> 
     <Grid> 
      <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"></RowDefinition> 
        <RowDefinition Height="*"></RowDefinition> 
       </Grid.RowDefinitions> 

       <StackPanel> 
        <TextBlock Text="{Binding NewPictureCountDisplay}"></TextBlock> 
       </StackPanel> 

       <ListBox Name="NewFilesListBox" Grid.Row="1" 
         ItemsSource="{Binding CreatedFiles}"> 
        <ListBox.ItemsPanel> 
         <ItemsPanelTemplate> 
          <WrapPanel Orientation="Horizontal" Width="{Binding ElementName=DataBorder, Path=ActualWidth}"></WrapPanel> 
         </ItemsPanelTemplate> 
        </ListBox.ItemsPanel> 
         <ListBox.ItemTemplate> 
          <DataTemplate> 
           <Grid> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="*"></RowDefinition> 
             <RowDefinition Height="Auto"></RowDefinition> 
            </Grid.RowDefinitions> 

            <Image Grid.Row="0" Source="{Binding FullPath}" Width="128" Height="128" Stretch="UniformToFill"></Image> 

            <StackPanel Grid.Row="1" Orientation="Vertical"> 
             <Button Content="Import" Margin="2"></Button> 
             <Button Content="Delete" Margin="2"></Button> 
             <TextBlock HorizontalAlignment="Stretch" Text="{Binding FullPath}" Margin="2"></TextBlock> 
             <TextBlock HorizontalAlignment="Stretch" Text="{Binding ChangeType}" Margin="2"></TextBlock> 
            </StackPanel> 

           </Grid> 
          </DataTemplate> 
         </ListBox.ItemTemplate> 
        </ListBox> 

Answer 4

Manchmal ist die Uniform nicht genug:

• , wenn Elemente von sehr unterschiedlicher Größe sind, oder
• , wenn Sie Elemente vertikal wollen und wollen nicht other workarounds

verwenden

In this stackoverflow post kann ein WrapPanel gefunden werden mit was du suchst.

XAML:

<loc:WrapPanelWithRowsOrColumnsCount 
    xmlns:loc="clr-namespace:..." 
    Orientation="Vertical" 
    RowsOrColumnsCount="2"> 
    <TextBox Text="Andrew" Margin="2" Height="30" /> 
    <TextBox Text="Betty" Margin="2" Height="40" /> 
    <TextBox Text="Celine" Margin="2" Height="20" /> 
    <TextBox Text="Dick" Margin="2" Height="20" /> 
    <TextBox Text="Enron" Margin="2" Height="30" /> 
    <TextBox Text="Felix" Margin="2" Height="20" /> 
    <TextBox Text="Hanibal" Margin="2" Height="30" /> 
</loc:WrapPanelWithRowsOrColumnsCount> 

Ergebnis: