ivan_b
Topic Author
Posts: 87
Joined: 22 Jul 2015, 12:57

Grid panel strange behaviour

20 Nov 2015, 16:49

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
 
User avatar
sfernandez
Site Admin
Posts: 1911
Joined: 22 Dec 2011, 19:20

Re: Grid panel strange behaviour

20 Nov 2015, 19:31

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.
 
ivan_b
Topic Author
Posts: 87
Joined: 22 Jul 2015, 12:57

Re: Grid panel strange behaviour

23 Nov 2015, 08:33

Thank you for the solution :)

Who is online

Users browsing this forum: Bing [Bot] and 1 guest