Выравнивание элементов управления в Datatemplate списка в Silverlight

Question

Мне нужно следующее выравнивание

Для этого я создал файл xaml следующим образом:

<!--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>

но я не получил ожидаемый результат.что я должен сделать для этого?sub2 всегда выровнен по левому краю, но на самом деле нам нужно, чтобы он был выровнен по правому краю.

Заранее спасибо, dinesh

Answer 1

Я думаю, что проблема связана с вложенными элементами сетки, которые вы используете в DataTemplate.Вы можете упростить визуальное дерево и достичь желаемых результатов, используя один Grid, который имеет определения столбцов и строк, а затем использовать присоединенные свойства Grid.ColumnSpan и Grid.RowSpan, как показано в следующем 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>

Чтобы получить элементы списка, которые растягиваются на полную ширину ListBox, вам нужно добавить ItemContainerStyle, который устанавливает HorizontalContentAlignment в Stretch.Вы можете создать копию стиля по умолчанию в Expression Blend или использовать следующее:

      <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>