WPF Xaml - 将图像右对齐答案

【问题标题】：WPF Xaml - Align Image to RightWPF Xaml - 将图像右对齐
【发布时间】：2017-05-10 11:51:28
【问题描述】：

刚刚开始使用 xaml。

我有以下几点：

<StackPanel x:Name="Compare"
                            Orientation="Horizontal">
                    <Label Content="Path to Access DB:"
                           HorizontalAlignment="Left"
                           Margin="3"
                           Width="120"
                           VerticalAlignment="Center" />
                    <TextBox x:Name="txtPathToAccess"
                             HorizontalAlignment="Left"
                             Height="23"
                             Margin="3"
                             Text="{Binding PathToAccessDb}"
                             VerticalAlignment="Center"
                             Width="800" />
                    <Button x:Name="btnFileSearch"
                            Content="..."
                            Width="20"
                            Height="20"
                            Command="{Binding AccessFileSearchCommand}" />
                    <Button x:Name="btnComparePiToAccess"
                            Margin="10,0,0,0"
                            Content="Compare Pi to Access"
                            Width="150"
                            Height="20"
                            Command="{Binding CompareCommandPiToAccess}" />
                    <Image Source="/Images/drax_logo.jpg" 
                           Width="100" />
                </StackPanel>

如何使图像与堆栈面板的右边缘对齐？我想要屏幕左侧（行）的标签和按钮以及右侧的图像。

【问题讨论】：

StackPanel 使其中的所有元素使用尽可能少的空间。如果要填充到面板的最大边缘，可以使用DockPanel，它可以选择告诉某个元素将停靠在哪里，或者使用具有固定列和行的Grid。

标签： wpf xaml

【解决方案1】：

您不能通过使用堆栈面板来做到这一点。相反，创建一个包含 2 列的网格并将图像放在第二列并将 HorizontalAlignment 设置为右侧。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0" x:Name="Compare"
                        Orientation="Horizontal">
        <Label Content="Path to Access DB:"
                       HorizontalAlignment="Left"
                       Margin="3"
                       Width="120"
                       VerticalAlignment="Center" />
        <TextBox x:Name="txtPathToAccess"
                         HorizontalAlignment="Left"
                         Height="23"
                         Margin="3"
                         Text="{Binding PathToAccessDb}"
                         VerticalAlignment="Center"
                         Width="800" />
        <Button x:Name="btnFileSearch"
                        Content="..."
                        Width="20"
                        Height="20"
                        Command="{Binding AccessFileSearchCommand}" />
        <Button x:Name="btnComparePiToAccess"
                        Margin="10,0,0,0"
                        Content="Compare Pi to Access"
                        Width="150"
                        Height="20"
                        Command="{Binding CompareCommandPiToAccess}" />

    </StackPanel>

    <Image Grid.Column="1" 
           HorizontalAlignment="Right"
           Source="/Images/drax_logo.jpg" 
           Width="100" />
</Grid>

希望这会有所帮助。

【讨论】：

您实际上并不需要两列。水平对齐也适用于单列。
是的。它只是其中一种方式。当然，这也可以使用停靠面板来完成。