web-dev-qa-db-ja.com

WPFでWrapPanelの最大列数を指定します

WrapPanelがあり、その列の最大数を指定したいと思います。したがって、たとえば、私のコレクション「ObjectCollection」（このWrapPanelにバインドされている）に4つの要素しかない場合、WrapPanelには1つの行しかありません。ただし、「ObjectCollection」に5つの要素がある場合、wrapPanelは5番目の行を配置するために別の行を作成します。 （この場合の私のMax_Columns_Numberは4です）。

c#wpfdata-bindingwrappanel
18
NTinkicht

WrapPanel でそれを行うことはできないと確信していますが、代わりに niformGrid を使用できます。

これには、必要な行と列の数を指定するプロパティがあります。

Columnsプロパティを4に設定すると、各行に4つのアイテムが保持され、次のアイテムに折り返されます。

<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>
38
Peter Hansen

基本的に、自分用にカスタムPanelを作成する必要があります...今は落胆しないでください...それはではありません難しい。まず、カスタムPanelの作成方法を説明するリンクを提供した投稿をご覧ください。

WPFでカスタムレイアウトパネルを作成する方法

WPFでのカスタムパネルの作成

さて、カスタムPanelsの作成についてもう少し理解できたので、続行できます...必要なものは次のとおりです。

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

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

このプロパティは、PanelでResourcesを宣言する場合に使用されます。

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

ItemsPanelTemplateプロパティが期待するのは、ItemsPanelオブジェクト内insideであると宣言する必要があることに注意してください。

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

Panel...に戻ります。これは、MeasureOverrideメソッドとArrangeOverrideメソッドから呼び出すヘルパーメソッドです。

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

残念ながら、私のカスタムPanelsはすべて、多くの追加機能を備えた基本AnimatedPanelクラスに関連付けられているため、完全な例を提供することはできません。ただし、このMeasureOverrideを完了するには、ArrangeOverrideメソッドとPanelメソッドを作成するだけで済みます。論理的に考えると、本当にそれほど難しくはありません。

7
Sheridan

UniformGridでは不十分な場合があります。

  • アイテムのサイズが大きく異なる場合、または
  • アイテムを垂直に配置し、使用したくない場合 その他の回避策

このstackoverflow post には、検索対象のWrapPanelがあります。

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>

結果：

enter image description here

1
frakon

折り返しパネルの幅を設定することで、列数を制御できます。ラップパネルの幅をBorderのようなコンテナのActualWidthにバインドします。このように、列の数は動的であり、ウィンドウの幅に基づいています。

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