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?
Try setting HorizontalContentAlignment
for ListBoxItem
to Stretch
:
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
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>
...
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.