Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF: Synchronize width of all items in ItemsControl

Is it possible to adjust the width of all TextBlocks in the WrapPanel to the size of the largest TextBlock within the WrapPanel? The end result should be that the width of the control containing "Some data" has the same width as the control containing "Even more data than before." I have attached to my initial code as a starting point. I have used strings as an example, but the collection data and template could be anything, so I can't rely on the length of the string.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        xmlns:Collections="clr-namespace:System.Collections;assembly=mscorlib"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Collections:ArrayList x:Key="data">
            <System:String>Some data</System:String>
            <System:String>Some more data</System:String>
            <System:String>Even more data than before</System:String>
        </Collections:ArrayList>
    </Window.Resources>
    <ItemsControl ItemsSource="{StaticResource data}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel></WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Margin="5" BorderThickness="1" BorderBrush="Black">
                    <TextBlock Text="{Binding}"></TextBlock>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>

And an image of the desired output:

Desired output

like image 664
mortalapeman Avatar asked Mar 11 '15 19:03

mortalapeman


1 Answers

Use a shared size grid:

<ItemsControl ItemsSource="{StaticResource data}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel></WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnSize" />
                </Grid.ColumnDefinitions>
                <Border Margin="5" BorderThickness="1" BorderBrush="Black">
                    <TextBlock Text="{Binding}"></TextBlock>
                </Border>
            </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

All columns are guaranteed to be the same width as they share a size group. As they are sized auto, they will also size to the largest instance of any of the grid's content.

like image 135
Toby Crawford Avatar answered Oct 01 '22 07:10

Toby Crawford