Question

我需要以下对齐

enter image description here

为此，我创建了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始终保持对齐，但实际上我们需要将它对齐。

提前致谢迪内希

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>

Datatemplate中的控件对齐为silverlight中的列表框

1 个答案: