Allignment of controls in Datatemplate of listbox in silverlight - windows-phone-7

Question

I need the following alignment
For that I have created the xaml file as follows,
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListBox ItemsSource="{Binding Collections}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Icon}" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Grid Grid.Column="1" HorizontalAlignment="Right" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="0.600*" />
<RowDefinition Height="0.400*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding MainTextBlock}" VerticalAlignment="Center" />
<Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.300*" />
<ColumnDefinition Width="0.700*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Value}" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="{Binding DateString}" HorizontalAlignment="Right" VerticalAlignment="Center" />
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
but I did not get the as expected result. what should i do for that? sub2 is always left aligned but actually we need it to be Right aligned.
Thanks in advance
dinesh

Answer 1

I think the problem is with the nested grid elements that you're using in your DataTemplate. You can simplify the visual tree and achieve the desired results by using a single Grid that has the column and row definitions and then use the Grid.ColumnSpan and Grid.RowSpan attached properties as shown in the following XAML:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.6*"/>
<RowDefinition Height="0.4*"/>
</Grid.RowDefinitions>
<Image
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="{Binding Icon}"/>
<TextBlock
Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding MainTextBlock}"/>
<TextBlock
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding Value}"/>
<TextBlock
Grid.Column="2"
Grid.Row="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Text="{Binding DateString}"/>
</Grid>
To achieve list box items that stretch the full width of the ListBox you need to add an ItemContainerStyle that sets the HorizontalContentAlignment to Stretch. You can create a copy of the default style in Expression Blend, or use the following:
<Style x:Key="FullWidthItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
x:Name="LayoutRoot"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="ContentContainer"
Storyboard.TargetProperty="Opacity"
To=".5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
x:Name="ContentContainer"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>