3 column grid for xaml is not taking up expected space

Question

I have the following xaml:

    <DataTemplate x:Key="ActivityStreamItemTemplate">
        <StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
            <Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
                <Grid Height="auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67" />
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="67" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Height="auto" Grid.Column="0" Background="Transparent">
                        <Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
                            <Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
                        </Border>
                    </StackPanel>
                    <StackPanel Height="auto" Grid.Column="1">
                        <TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
                        <TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap" MaxWidth="Infinity" />
                        <TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
                    </StackPanel>
                    <StackPanel Height="auto" Grid.Column="2">
                        <TextBlock Text="{Binding comment_count}"></TextBlock>
                    </StackPanel>
                </Grid>
            </Button>
        </StackPanel>
    </DataTemplate>

As you can see I would like to have the first column of my grid set to 67.. perfect, and working fine...

The next column needs to fill as much as it can of the screen minus the extra columns width after it.

How do I go about doing this?

Kind of linked to this: How to TextWrap a TextBlock within a width Auto Column? but I couldn't get the * thing to work... I'm not sure it really does what I need it to do

score 0 · Accepted Answer · answered Oct 19 '13 at 14:43

0

It's because you've got:

MaxWidth="Infinity"

on your TextBlock and

<ColumnDefinition Width="Auto"/>

on your column.

This means that the XAML thinks it can grow that column as much as it likes to fit the text in.

If you want the text to wrap you'll have to provide a limit to either the width of the column, the width of the grid or the width of the stack panel.

If you want the middle column to take the remaining space then just specify it's width with a *:

<ColumnDefinition Width="*"/>

answered Oct 19 '13 at 14:43

ChrisF

134,786
31
255
325

You beauty. does the * literally mean, fill/stretch? – Jimmyt1988 Oct 19 '13 at 14:45
1

@JamesT - yes. It means "fill the available space". If you have two (or more) columns marked `*` it divddes the available space between them. – ChrisF Oct 19 '13 at 14:49
is there any reason why the third column may not be appearing now (It deffo has data in it)... I've set the columnDefinition widths to 67, *, 67 – Jimmyt1988 Oct 19 '13 at 15:07

3 column grid for xaml is not taking up expected space

1 Answers1