Member 13944101 Ответов: 1

Как расширить вниз пользовательскую панель стека, чтобы все элементы поместились


Привет,
мне нужно адаптировать пользовательскую панель стека, чтобы все элементы подходили друг другу.
Когда я нажимаю на серую кнопку, а она содержит только несколько детей, все в порядке. Но когда эта кнопка содержит, например, 100 элементов, то она не подходит.
Я приложил фотографию, которая показывает мою проблему здесь:

Фото — imgbb.com[^]

Весь мой XAML:
<Window x:Class="EnterEventTextBox.DataView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:EnterEventTextBox"
        mc:Ignorable="d" Background="Black"
        Title="DataView" 
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:cal="http://www.caliburnproject.org"
        >
    <Window.Resources>
        <ItemsPanelTemplate x:Key="ItemsControlStackPanelTemplate">
            <StackPanel Orientation="Horizontal" IsItemsHost="True" Background="Yellow"/>
        </ItemsPanelTemplate>
        <ItemsPanelTemplate x:Key="ItemsControlWrapPanelTemplate">
            <WrapPanel Orientation="Horizontal" IsItemsHost="True" Background="Turquoise" Width="500"/>
        </ItemsPanelTemplate>
        <Style x:Key="ItemsControlStackPanelStyle" TargetType="{x:Type ItemsControl}">
            <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
        </Style>
        <Style x:Key="ItemsControlWrapPanelStyle" TargetType="{x:Type ItemsControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ItemsControl}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ItemsControl ItemsSource="{Binding Shippers}" ItemsPanel="{DynamicResource ItemsControlWrapPanelTemplate}" Style="{DynamicResource ItemsControlWrapPanelStyle}">
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="{x:Type Button}">
                    <WrapPanel Background="Green" Orientation="Horizontal">
                        <ToggleButton Height="50" Width="50" Background="Red" Content="{Binding BtnLabelShipper}" IsChecked="{Binding IsUnrolled}" Margin="2,2,2,2" 
                                cal:Message.Attach="[Event Click] = [Action ShipperIsClicked($dataContext, $this.IsChecked)]">
                        </ToggleButton>

                        <ItemsControl ItemsSource="{Binding Parcels}" ItemsPanel="{DynamicResource ItemsControlStackPanelTemplate}" Style="{DynamicResource ItemsControlStackPanelStyle}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate DataType="{x:Type Button}">
                                    <Button Height="50" Width="50" Background="Red" Content="{Binding ParcelNumber}" Margin="5,5,5,5"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </WrapPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>


Что я уже пробовал:

Изменение ширины, изменение панелей, изменение панелей.

1 Ответов

Рейтинг:
2

Graeme_Grant

Используйте WPF WrapPanel[^] тогда контроль... Вот учебник о том, как его использовать: WPF Tutorial | Wrap Panel[^]