WP8 - XAML Grid column expanding when text is too long

Question

I have a grid with column definitions. Whenever the text inside a column cell exceeds the designated width, it shrinks the left hand column down.

Here's an example

And this is my xaml markup

<ItemsControl Name="rfbItems" ItemsSource="{Binding}" 
            Style="{StaticResource contentItemsControl}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" Width="Auto" HorizontalAlignment="Left" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.3*" />
                    <ColumnDefinition Width="0.7*" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding Title}" Style="{StaticResource App_Content_Grid}" TextAlignment="Left" />
                <TextBlock Grid.Column="1" Text="{Binding Description}" Style="{StaticResource App_Content_Grid_Subtle}" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

How should I restrict this behavior without losing responsiveness in the layout? Also, if there is a better way to achieve what I'm trying to do here (inside the datatemplate), please feel free to share :)

Answer 1

Try setting margin and horizontal alignment to text boxes as below:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.3*" />
        <ColumnDefinition Width="0.7*" />
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" Margin="5" HorizontalAlignment="Stretch" Text="{Binding Title}" Style="{StaticResource App_Content_Grid}" TextAlignment="Left" />
    <TextBlock Grid.Column="1" Margin="5" HorizontalAlignment="Stretch" Text="{Binding Description}" Style="{StaticResource App_Content_Grid_Subtle}" />

</Grid>

Answer 2

The Grid doesn't have a limited width unless you give your StackPanel a fixed width. Setting Width="123" should work, HorizontalAlignment="Stretch" might do it as well (untested).

Answer 3

I'm sorry for all your efforts, but I found a solution. None of the answers worked for me, so feel free to find a fitting solution and I'll accept your answer.

<ItemsControl Name="rfbItems" ItemsSource="{Binding}" 
            Style="{StaticResource contentItemsControl}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" Width="Auto" HorizontalAlignment="Left" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="125" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding Title}" Style="{StaticResource App_Content_Grid}" TextAlignment="Left" />
                <TextBlock Grid.Column="1" Text="{Binding Description}" Style="{StaticResource App_Content_Grid_Subtle}" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

The first column has a fixed width, that's why the second column can't expand anymore.