Click here to Skip to main content
15,937,012 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.
Posted
Updated 17-Aug-18 3:10am
v3

1 solution

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

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900