如何扩展自定义堆栈面板以适应所有项目 [英] How to extend down custom stackpanel in order to all items fit

问题描述

您好，

i需要调整自定义StackPanel才能使所有物品都合身。

当我点击灰色按钮，它只包含几个孩子时，一切都很好。但是当那个按钮包含例如100个项目时，它就不适合。

我附上的图片显示了我的问题：



< a href =https://ibb.co/hRH0ce> PHOTO - imgbb.com [ ^ ]



我的整个XAML：

Hello,
i need to adapt custom StackPanel in order to all items fit.
When i click on grey button, and it contains only several children, everything is fine. But when that button contains for example 100 items, then it does not fit.
I attached picture which shows my problem here:

PHOTO — imgbb.com[^]

My whole 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>

我尝试过：



更改宽度，更改面板，修改面板。

What I have tried:

Changing width, change panels, modify panels.

推荐答案

dataContext，

dataContext,

this .IsChecked）]>
< / ToggleButton>

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

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>

我尝试过：



更改宽度，更改面板，修改面板。

What I have tried:

Changing width, change panels, modify panels.

使用WPF WrapPanel [ ^ ]然后控制......以下是如何使用它的教程： WPF教程|换行面板 [ ^ ]

Use a WPF WrapPanel[^] control then... Here is a tutorial on how to use it: WPF Tutorial | Wrap Panel[^]

这篇关于如何扩展自定义堆栈面板以适应所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！