如何向 WPF 桌面工具添加浮动操作按钮？答案

【问题标题】：How to add a floating action button to WPF Desktop tool?如何向 WPF 桌面工具添加浮动操作按钮？
【发布时间】：2021-01-20 13:22:18
【问题描述】：

我正在编写一个数据库工具以用作 Windows 桌面应用程序。我使用 C#、WPF 和 SQLite。如何在ListView 前面添加浮动操作按钮？

【问题讨论】：

你已经有FAB了吗？
还没有。我是 wpf 编码的新手，所以我只知道一些基础知识。

标签： c# wpf floating-action-button

【解决方案1】：

至于将按钮放置在另一个元素上，有多种选择，这取决于您的用例，哪种最适合。在此示例中，我将 DockPanel 嵌套在具有两行的 Grid 中。其中的ListView 跨越两行，而DockPanel 位于第二行。

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
   <ListView Grid.Row="0" Grid.RowSpan="2" ItemsSource="{Binding StringItems}"/>
   <DockPanel Grid.Row="1" LastChildFill="False">
      <Button DockPanel.Dock="Right" Width="50" Height="50" Content="-" Margin="5"/>
      <Button DockPanel.Dock="Right" Width="50" Height="50" Content="+" Margin="5"/>
   </DockPanel>
</Grid>

如果您要寻找更像 Android 的按钮，您可以使用 Material Design WPF library，它为此提供了不同的 button styles。请参阅 documentation 浮动操作按钮样式，例如：

<Button DockPanel.Dock="Right" Content="-" Margin="5" Style="{StaticResource MaterialDesignFloatingActionButton}"/>

这就是两种变体的结果。

【讨论】：

嗯，谢谢。这么简单，但我不知道。这个解决方案看起来很棒