Page 1 of 1

Grid panel strange behaviour

Posted: 20 Nov 2015, 16:49
by ivan_b
Hi

I have a problem with the Grid panel. I don't know if it is a bug or it is supposed to be this way.
The problem is that the TextBlock streches over the size of the grid cell.

Here is the code
<ListBox Grid.Column="1" DataContext="{StaticResource filesViewModel}" ItemsSource="{Binding Scenes}">
          <ListBox.ItemTemplate>
            <DataTemplate>
            <Grid Height="30" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding Name}" TextAlignment="Center" />
                <TextBlock Grid.Column="1" Text="{Binding Path=Players, Converter={StaticResource PlayersToTextConverter}}" TextAlignment="Center" />
                <TextBlock Grid.Column="2" Text="{Binding Path=Fitness, Converter={StaticResource IntegerToStarSxmbolConverter}}" TextAlignment="Center" />
                <TextBlock Grid.Column="3" Text="{Binding Path=Technics, Converter={StaticResource IntegerToStarSxmbolConverter}}" TextAlignment="Center"/>
                <TextBlock Grid.Column="4" Text="{Binding Path=Tactics, Converter={StaticResource IntegerToStarSxmbolConverter}}" TextAlignment="Center" Background="Green"/>
                <TextBlock Grid.Column="5" Text="{Binding Path=Fun, Converter={StaticResource IntegerToStarSxmbolConverter}}" TextAlignment="Center" Background="Red"/>
                <TextBlock Grid.Column="6" Text="{Binding Name}" Background="Blue" />        
            </Grid>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
and this is the result
https://www.dropbox.com/s/s7o5bxh0qxvtc ... g.png?dl=0

Re: Grid panel strange behaviour

Posted: 20 Nov 2015, 19:31
by sfernandez
Hi,

The behavior is correct, as Grid is inside the ListBox ScrollViewer, that initially asks the Grid to Measure with infinite available size, so text desired size is taken into account to calculate cell size.

Maybe you can use a binding to some reference element to ensure the size of any cell:
<Grid>

  <Grid Height="30" >
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="2*"/>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Decorator x:Name="lastColumn" Grid.Column="6"/>
  </Grid>

  <ListBox Grid.Column="1" ItemsSource="{Binding Scenes}">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <Grid Height="30" >
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="{Binding ActualWidth, ElementName=lastColumn}"/>
          </Grid.ColumnDefinitions>
          <TextBlock Grid.Column="0" Text="{Binding Name}" TextAlignment="Center" />
          <TextBlock Grid.Column="1" Text="{Binding Players...}" TextAlignment="Center" />
          <TextBlock Grid.Column="2" Text="{Binding Fitness...}" TextAlignment="Center" />
          <TextBlock Grid.Column="3" Text="{Binding Technics..}" TextAlignment="Center" />
          <TextBlock Grid.Column="4" Text="{Binding Tactics..}" TextAlignment="Center"... />
          <TextBlock Grid.Column="5" Text="{Binding Fun...}" TextAlignment="Center"... />
          <TextBlock Grid.Column="6" Text="{Binding Name}"... />
        </Grid>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>

</Grid>
This way all the items in your ListBox will share the same width for the last column.

Re: Grid panel strange behaviour

Posted: 23 Nov 2015, 08:33
by ivan_b
Thank you for the solution :)