How to add a floating action button to WPF Desktop tool?

Question

I'm coding a database tool to use as Windows Desktop Applikation. Im using C#, WPF and SQLite. How can I add a floating action button in front of the ListView?

Answer 1

As for positioning a button over another element there are various options, it depends on your use case what fits best. In this example, I nest a DockPanel inside a Grid that has two rows. The ListView in there spans both rows, while the DockPanel is in the second row.

<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>

If you look for a more Android looking button, you can use the Material Design WPF library that offers different button styles for that purpose. See the documentation on floating action button styles, e.g.:

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

This is how the result for both variants looks like.