XAML-如何固定图像相对于显示窗口右侧的位置？

Question

我正在开发一个使用 XAML 编写/显示 GUI 的应用程序。目前，我在 GUI 上显示了大部分所需的元素，现在正在处理布局——将各种元素定位在特定的位置。

大多数控件/按钮等都向左对齐，并保持“绑定”到 GUI 的左侧，即使我通过将窗口的左边缘进一步向左拖动来调整窗口大小（图标、等移动以保持与窗口边缘的相对距离）。

但是，我有一个要向右对齐的元素，以便它将保持“绑定”到 GUI 的右侧 - 如果我通过将其右侧边缘进一步向右拖动来调整窗口大小，它应该移动以保持与窗口边缘的相对距离......此刻，该元素停留在我绘制它的位置（即距离左侧 900 像素），无论大小window is- 因此，如果我将窗口的宽度调整为小于 900 像素，则无法看到该元素。

我为想要绑定到 GUI 左侧的元素使用的 XAML 标记是，例如：

<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0, 0, 0, 0" HorizontalAlignment="Left" >
    <Image Source="C:\...\abc.png" Height="30" Width="40" />
</Button>    

我尝试用于绑定到 GUI 右侧的元素的 XAML 标记是：

<Button Style="{DynamicResource NoChromeButton}" Click="referThis" Margin="0, 0, 0, 0" HorizontalAlignment="Right" >
    <TextBlock>Button XYZ</TextBlock>
</Button>

但是，将 HorizontalAlignment 设置为 Right，实际上并没有将文本按钮移动到右侧 - 它仍然绑定到显示屏的左侧...我发现移动它的唯一方法向右，是为其'x'位置设置一个较大的值，即Margin="900, 0, 0, 0"，但该位置与窗口大小无关，所以如果我将右手边缘向左拖得太远，该按钮在窗口的显示区域之外，所以我看不到它...

如何设置按钮的属性，使其位置相对于显示窗口的右侧边缘？

编辑

所有有问题的元素都显示在相同的<Grid> 和<StackPanel> 标记内，即

<StackPanel>
    <Grid ...>
        <Button ... HorizontalAlignment="Left">
        </Button>
        ...
        <Button ... HorizontalAlignment="Right">
        </button>
        ...
    </Grid>
    ...
</StackPanel>

Answer 1

以下解决方案的基本思想是Grid。

为要左对齐的每个元素创建一个固定宽度的ColumnDefinition，为要右对齐的每个元素创建一个固定宽度的ColumnDefinition。在中间，创建一个ColumnDefinition 和一个Width="*"，因此 WPF 首先根据其他列的固定长度计算其他列的大小，然后用中间列填充剩余空间。 请记住，每个按钮都必须正确设置Grid.Column 属性才能声明它想要所属的列。

当您调整Window 的大小时，Grid 会更新其布局和灵活的子项。在这种情况下，唯一灵活的孩子是中间列。

这是一个简单的实现：

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>

    <Grid.Resources>
      <Style TargetType="{x:Type Button}">
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Margin" Value="10"/>
      </Style>
    </Grid.Resources>

    <Button Grid.Column="0" Content="Button1Left"/>
    <Button Grid.Column="1" Content="Button2Left"/>
    <Button Grid.Column="3" Content="Button1Right"/>
    <Button Grid.Column="4" Content="Button2Right"/>

  </Grid>

有关Grid 控件的更完整教程，请查看this、this 和this。

请注意，我为具有特定尺寸和边距的按钮设置了一个简单的样式，只是为了使结果更清晰，但您可以使用自己的样式。

Answer 2

最好知道包含按钮的容器（网格、面板、其他？）：

无论如何，如果你把：

<Button HorizontalAlignment="Right"

在

<StackPanel Orientation="Horizontal">

应该可以了...检查一下风格是否没有矛盾...