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

【问题标题】：Floating Control Button that docks to the right of the program in wpf .net core app在 wpf .net 核心应用程序中停靠在程序右侧的浮动控制按钮
【发布时间】：2021-01-14 20:30:37
【问题描述】：

我目前正在制作一个应该在整个程序窗口上显示Image 的软件。 Buttons 应该浮在上面以控制软件。

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

浮动的Button 与ZIndex 配合得很好，但问题是它要么卡在左上角，要么卡在静态位置。

想法是被卡在正确的程序边界上。调整程序大小后，它仍应保持在右边框上。我试过水平对齐，但完全没有效果。

这是目前的 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 本身在自动模式下调整为按钮的大小（然后它本身卡在顶部/左侧，或者我可以静态调整它的大小但它不会调整大小然后使用应用程序。

【问题讨论】：

标签： c# wpf button controls alignment

【解决方案1】：

您可以使用另一个Grid 来执行此操作，该Button 有一列，以及您希望在窗口右边缘显示为覆盖的其他控件。

<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 是父Grid 的最后一个子级，并且会自动显示在顶部。覆盖Grid 有两列，其中第二列的大小与其内容相同（Button），第一列将占用剩余空间。

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

【讨论】：

我仍然使用 ZIndex，因为我使用了很多层。但是非常感谢。将网格相互堆叠就可以了

【解决方案2】：

添加网格列并分配它们。

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

另外还有 Dock，它可以为您解决问题吗？

【讨论】：

没有效果，按钮仍然卡在左边。 Dock Panel 很有趣。我必须弄清楚如何填满整个屏幕