1

In my application I have a ListView where I defined its ItemTemplate as follows:

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Stretch" Background="Aqua">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="ParameterIconSize" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="ParameterDescriptionSize" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="ParameterValueSize" />
                </Grid.ColumnDefinitions>
                <Image
                    Grid.Column="0"
                    MaxHeight="50"
                    Margin="5"
                    Grid.IsSharedSizeScope="True"
                    Source="{Binding Path=Icon}" />
                <TextBlock
                    Grid.Column="1"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Center"
                    Grid.IsSharedSizeScope="True"
                    Text="{Binding Path=Parameter.NameKey}" />
                <TextBox
                    Grid.Column="2"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    VerticalContentAlignment="Center"
                    Grid.IsSharedSizeScope="True"
                    Text="{Binding Path=Parameter.Value}" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Such code produces this output:

Output from the code

As you can see, nearly every column has a different width, whilst I wanted to make them even. I thought that going with SharedSizeGroup was the right way, but clearly there is something I am missing...

(PS: I had to set the maxHeight in the Image element because if not this would show:

the yellow one is a 50x50pixel bitmap, the question mark a 120x120 bitmap

)

I would like to have all three columns the same size, determined by these criteria:

  • column 0: largest image
  • column 1: largest textbox text
  • column 2: fill the remainig space (as this is also a user input field, and I cannot know a priori if that input will be something like 0 or 1438233482379472 )

EDIT 2: I forgot to specify that I want the textboxes in column 2 to be the same size, filling the available space.

Orace
  • 7,822
  • 30
  • 45
Marcomattia Mocellin
  • 370
  • 4
  • 15
  • 3
    if you want columns, use ` – ASh Feb 01 '21 at 08:53
  • Thank you, but that still isn't what I need. I don't want to hardcode a column width, and if I set it on Auto then the middle description ("Parameter_abcd") will be cropped, and the textboxes will still have different dimensions. – Marcomattia Mocellin Feb 01 '21 at 09:10

1 Answers1

4

You have to enable the SharedSize functionality in the parent element.

<ListView Grid.IsSharedSizeScope="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
Orace
  • 7,822
  • 30
  • 45