Question

我有以下xaml代码。我正在尝试将图像与textblock对齐。第一个textblock正确显示，我只希望最右边的image和第二textblock到dock。我怎样才能正确对齐？

<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderThickness="0" Padding="16,2"
        BorderBrush="Transparent" Background="{StaticResource AccentBrush}">
    <DockPanel LastChildFill="True">                
            <ItemsControl ItemsSource="{Binding Lists}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="0,5" FontSize="24" FontFamily="Sageo UI Light" TextAlignment="Left" TextWrapping="NoWrap"
                           TextTrimming="WordEllipsis" Foreground="{StaticResource MainBrush}" HorizontalAlignment="Stretch" Text="{Binding Title}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
          <StackPanel Orientation="Horizontal" >
            <Image HorizontalAlignment="Right" Source="/Images/image.png"/>
            <TextBlock DockPanel.Dock="Right" Margin="16,0,0,0" Text="{Binding ElementName=TreeView, Path=SelectedItem.Name, StringFormat='Name: {0}'}"
                   FontFamily="Segoe UI Light" FontSize="14" TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
                   Foreground="{StaticResource MainBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Center" />               
        </StackPanel>                
    </DockPanel>
</Border>

Answer 1

StackPanel的内部大小在其Orientation的方向上无限制，并始终从顶部/左侧堆叠项目。这两个属性的组合意味着您无法使用StackPanel来获得正在寻找的正确对齐方式。相反，您可以使用其他DockPanel，或者只将所有内容直接放在外部DockPanel中。我无法从您的代码中知道您希望使用正确的停靠项目的顺序，但这至少应该让您开始：

<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderThickness="0" Padding="16,2"
        BorderBrush="Transparent" Background="{StaticResource AccentBrush}">
    <DockPanel LastChildFill="False">                
            <ItemsControl ItemsSource="{Binding Lists}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="0,5" FontSize="24" FontFamily="Sageo UI Light" TextAlignment="Left" TextWrapping="NoWrap"
                           TextTrimming="WordEllipsis" Foreground="{StaticResource MainBrush}" HorizontalAlignment="Stretch" Text="{Binding Title}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
          <DockPanel DockPanel.Dock="Right">
            <Image Source="/Images/image.png"/>
            <TextBlock Margin="16,0,0,0" Text="{Binding ElementName=TreeView, Path=SelectedItem.Name, StringFormat='Name: {0}'}"
                   FontFamily="Segoe UI Light" FontSize="14" TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
                   Foreground="{StaticResource MainBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Center" />               
        </DockPanel>                
    </DockPanel>
</Border>

边框内的多个对齐

1 个答案: