在 wpf .net 核心应用程序中停靠在程序右侧的浮动控制按钮

Question

我目前正在制作一个软件，它应该在整个程序 window 上显示 Image。 Buttons 应该浮动在顶部以控制软件。

到目前为止，应用程序如下所示：

浮动 Button 与 ZIndex 配合使用效果很好，但问题是它要么卡在 top-left 上，要么卡在静态位置。

idea是要卡在右程序边框上。调整程序大小后，它仍应保持在右边框。我试过水平对齐，但一点效果都没有。

这是xaml到目前为止：

<Window x:Class="TarkovMapper_2._0.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TarkovMapper_2._0"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
   <Grid HorizontalAlignment="Stretch" Width="Auto" Height="Auto" VerticalAlignment="Stretch">
      <Image Grid.ZIndex="1" x:Name="Map_Image" HorizontalAlignment="Left" VerticalAlignment="Top"/>
      <DockPanel Grid.ZIndex="2" Width="Auto" Height="Auto" HorizontalAlignment ="Right" VerticalAlignment="Top" >
         <Button DockPanel.Dock="Right" Grid.ZIndex="2" x:Name="Edit_Button" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Center" Width="50" Height="49"/>
      </DockPanel>
   </Grid>
</Window>

看来 DockPanel 是正确的方法，但 DockPanel 本身的大小与自动模式下的按钮相符（然后它自己卡在 top/left 上，或者我可以静态调整大小，但不会随应用程序调整大小。

Answer 1

添加 Grid-Columns 并分配它们。

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Image Grid.Column="0" />
  <Button Grid.Column="1" HorizontalAlignment="Right">...</Button>
</Grid>

或者还有 Dock，这对您有帮助吗？

Answer 2

您可以像这样使用另一个 Grid，它有一列用于 Button 和您想要显示为覆盖在 window 右边缘的其他控件.

<Grid>
   <Image x:Name="Map_Image"/>
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <Button Grid.Column="1" x:Name="Edit_Button" Content="Button" Width="50" Height="49"/>
   </Grid>
</Grid>

这里不需要ZIndex，因为里面的Grid是parentGrid的最后一个child，会显示在最上面自动地。叠加层 Grid 有两列，其中第二列的大小与其内容相同（Button），第一列将占据剩余的 space.

还有许多其他选项可以创建所需的布局，但这取决于您要实现的目标。结合你的描述，这个方法似乎是合适的。

在 wpf .net 核心应用程序中停靠在程序右侧的浮动控制按钮

Floating Control Button that docks to the right of the program in wpf .net core app

c#

wpf

controls

button

alignment