CODEWITHSUNDEEP
windows-phone-7xamlwindows-phone-8
Brian
Brian

Reputation: 46

Give a grid column with text content 100% width

I have a ListBox that uses the following template:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="64" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>

    <Image Source="{Binding Property3}" Grid.Column="0" HorizontalAlignment="Left" Height="64" Width="64"/> 
    <TextBlock Grid.Column="1" Text="{Binding Property1}"/>
    <TextBlock Grid.Column="2" Text="{Binding Property2}" HorizontalAlignment="Right"/>
</Grid>

The problem I'm having is with the middle column. The length of the text in the middle column determines the grid's width. What's the best way to make the grid extend to 100% of the page's width without using exact values for width? Or is this impossible? I tried quite a number of suggestions from here (Ex. setting HorizontalContentAlignment on the ListBox) to no avail.

EDIT: Here's the full page, minimal code to highlight the problem:

<phone:PhoneApplicationPage
x:Class="FoursquareDemo.SandboxPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="ItemTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="64" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>

                <Image Source="{Binding Property3}" Grid.Column="0" HorizontalAlignment="Left" Height="64" Width="64"/>
                <TextBlock Grid.Column="1" Text="{Binding Property1}"/>
                <TextBlock Grid.Column="2" Text="{Binding Property2}" HorizontalAlignment="Right"/>
            </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

<ListBox x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}" />

Upvotes: 0

Views: 2451

Answers (2)

Brian
Brian

Reputation: 46

Found the solution:

ListBoxItems do not expand to the full width of the ListBox. It's better to use a LongListSelector in this case. It seems like overkill, but it gets the job done.

Upvotes: 1

Prashant Vaidyanathan
Prashant Vaidyanathan

Reputation: 488

There are 2 ways you could approach the problem.

1) Set the Margin of the Grid to Margin = "0,0,0,0"

This basically sets the offset of the Grid to 0 for "Left, Top, Right, Bottom"

2)If the above does not work, check the parent Grid. And set the Margin of the Parent Grid to the same as mentioned. It is ok if you change the values of Top and Bottom according to your design. However, if you wish to have the length of the Grid to take up the entire Width, make sure you set the left and right margin values to 0.

Upvotes: 0

Related Questions