Allignment of controls in Datatemplate of listbox in silverlight

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>