XAML Listbox alignment issue

Question

I have a Windows Phone 8 page with Country Names on left and ISD codes on right. I want to align the country name to the extreme left and ISD code to the extreme right of the screen.

For this, I wrote the following XAML

<Grid x:Name="LayoutRoot" Background="Transparent">
    <ListBox ItemsSource="{Binding IsdCodes}" HorizontalAlignment="Stretch" Background="Blue">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch" Background="Yellow" ShowGridLines="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBox Grid.Column="0" HorizontalAlignment="Stretch" Text="{Binding Key}" />
                    <TextBox Grid.Column="1" HorizontalAlignment="Stretch" Text="{Binding Value}" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

But the output I am getting is as follows :

As I gave the grid column widths as 3* and *, I expected first column to occupy 75% of the width of the screen on left and 2nd column to occupy 25% of the width of the screen on the right. But I do see that listbox item still doesn't occupy the entire screen width (Assumed from the yellow background).

Where did I go wrong?

Answer 1

Try setting HorizontalContentAlignment for ListBoxItem to Stretch:

<Style TargetType="ListBoxItem">
   <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

Answer 2

This is because the DataTemplate is rendered in a ContentPresenter, which is not stretched in the ListBoxItem. You need to redefine the template for the ListBoxItem:

    ...
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                <ContentPresenter HorizontalAlignment="Stretch" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    ...

Answer 3

As you know width of screen is 480 you could assign it 360 and 120

<ListBox.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch" Background="Yellow" ShowGridLines="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="360"/>
                        <ColumnDefinition Width="120" />
                    </Grid.ColumnDefinitions>
                    <TextBox Grid.Column="0" HorizontalAlignment="Stretch" Text="{Binding Key}" />
                    <TextBox Grid.Column="1" HorizontalAlignment="Stretch" Text="{Binding Value}" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

Answer 4

This would help you, set width of grid inside listbox datatemplete

<Grid x:Name="LayoutRoot" Background="Transparent">
 <ListBox ItemsSource="{Binding IsdCodes}" HorizontalAlignment="Stretch" Background="Blue">
  <ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
     <Setter Property="HorizontalAlignment" Value="Stretch"/>
     </Style>
    </ListBox.ItemContainerStyle>
     <ListBox.ItemTemplate>
      <DataTemplate>
     <Grid HorizontalAlignment="Left" Background="Yellow" ShowGridLines="True" Width="460">
        <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
       <TextBox Grid.Column="0" HorizontalAlignment="Stretch" Text="{Binding Key}" />
        <TextBox Grid.Column="1" HorizontalAlignment="Stretch" Text="{Binding Value}" />
         </Grid>
       </DataTemplate>
     </ListBox.ItemTemplate>
    </ListBox>
</Grid>