We Keep Coding

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

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?

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.

WPF TextBox doesn't switch to new line

I have a TextBox, which I want to be multiline and automatically sized to parent:
<TextBox Grid.Row="0" Grid.Column="0"
AcceptsReturn="True"
HorizontalAlignment="Stretch"
IsEnabled="{Binding CanModify}"
Margin="0"
TextWrapping="Wrap"
Text="{Binding Comment, UpdateSourceTrigger=PropertyChanged}"
VerticalScrollBarVisibility="Auto"
VerticalAlignment="Stretch"
/>
Most suggestions to make the TextBlock automatically switch to new line are about adding TextWrapping="Wrap" to it's properties, to prevent it from stretching it's usually AcceptsReturn="True", VerticalScrollBarVisibility="Auto" or manually set width. As you see, the only thing that I haven't yet tried is width, but in my case TextBox should fit to container, which width is unknown (also depends on it's parent). Having properties set as in listing doesn't help: caret never moves to new line and stretches the TextBox and the whole window as well.
What can I do to prevent this TextBox from stretching and to move text to new line automatically?
EDIT: Container is a TabControl. Containing tab:
<TabItem Header="{some binding}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="TabHeight" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TabWidth" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0"
AcceptsReturn="True"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
IsEnabled="{Binding CanModify}"
Margin="0"
Style="{some style}"
TextWrapping="Wrap"
Text="{Binding Comment, UpdateSourceTrigger=PropertyChanged}"
VerticalScrollBarVisibility="Auto"
/>
</Grid>
</TabItem>
This TabControl lies in a simple Grid without any specific styles of constraints. Alas, I can't share the whole code of styles, applied to TabControl, but I'd highly appreciate any ideas to try.
SharedSizeGroups you see are intended to stretch the whole TabControl to the widest tab, preventing it from resizing on tab switches and shared only with another tab (there are two in this TabControl).

How to show menu from left on image click in windows Universal apps?

I am currently working on Windows Universal Apps.In that there is requirement to show menu from left side when User clicks on menu icon. I want add a ListView inside it and handle the selectionchanged event based on user's selected item. Now, the problem with Flyout is that it opens like a popup on clicking the icon but what I actually want to do is it should come from left side of the window .For e.g in Gmail application of android. Please can anyone suggest how to achieve this. Please find below my code which I added in Flyout below:
<Image Source="ms-appx:///Images/menu_image.png"
HorizontalAlignment="Left"
Tapped="Image_Tapped"
Width="60"
Height="90"
Grid.Column="0"
VerticalAlignment="Center">
<FlyoutBase.AttachedFlyout>
<Flyout>
<Grid x:Name="SettingsPane"
Background="{StaticResource AppBackGroundColor}"
Grid.Row="0"
Width="380">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EdgeUIThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Margin="8">
<TextBlock Name="SidebarTitletxtblk"
FontSize="25"
TextWrapping="Wrap"
Style="{StaticResource BaseTextBlockStyle}" />
</StackPanel>
<ListView Grid.Row="1"
x:Name="LocationPickerList"
SelectionChanged="LocationPickTypeSelected"
Margin="0,10,0,0"
ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
ItemTemplate="{StaticResource LocationPickerListItemTemplate}"></ListView>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Image>

You can't override the Flyout's standard transition. If you want to apply something else then you can use a Popup instead and customize it however you'd like. To have it slide in from the left apply an EdgeUIThemeTransition (if it's short) or a PaneThemeTransition (if it's full height) with Edge=Left.
For example:
<Popup x:Name="flyoutPane" IsOpen="False" IsLightDismissEnabled="True"
Width="320" HorizontalAlignment="Left">
<Popup.ChildTransitions>
<TransitionCollection>
<!--<EdgeUIThemeTransition Edge="Left" />-->
<PaneThemeTransition Edge="Left" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid Width="380" Height="{Binding ElementName=flyoutPane, Path=Height}" Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
<TextBlock Text="Grid contents here" />
</Grid>
</Popup>
And trigger it from your Button Click (your Image sounds like it should be a Button rather than using Tap, unless you have an alternate keyboard method - you can template off the button look while keeping the button semantics).
private void Button_Click(object sender, RoutedEventArgs e)
{
// Height is only important if we want the Popup sized to the screen
flyoutPane.Height = Window.Current.Bounds.Height;
flyoutPane.IsOpen = true;
}
If you're doing many of these you can create a custom control with an attached property similar to FlyoutBase.AttachedFlyout.

Custom message popup WPF

This doesn't actually describe what I mean, but I'll try to explain. I've been using C# for an year now and never touched WPF. Only recently I've realized how awesome it is and started using it. I'm now facing a problem.
I want to let the user know the password/username are incorrect, so instead of the old WinForms MessageBox I want to make it more pleasent. I thought about creating a grid that tints the application darker, and then I'll be able to show some text on it. However - how's that possible?... Do you have any nicer ideas to show a message for the application (not a popup)? Thanks.

You can create an UserControl with translucent background (like #33000000), and 3-row grid to show title, message and OK button, like bellow:
<UserControl x:Class="ApplicationNameSpace.MessageControl" ... >
<Grid Background="#33000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFFFFF" MinHeight="100" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#EEEEEE">
<Label Content="Unable to Login" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="1" Margin="10,20">
<TextBlock Text="Wrong username or password. Try again." HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
<Grid Grid.Row="2" Background="#EEEEEE">
<Button Content="OK" Width="80" Height="25" />
</Grid>
</Grid>
</Grid>
</UserControl>
To use, you can add the control at the end of your window, and change the visibility to Visible when needs to show it.
<Window x:Class="ApplicationNameSpace.MainWindow"
xmlns:local="clr-namespace:ApplicationNameSpace" ... >
<Grid>
...
<local:MessageControl Name="messageControl" Visibility="Collapsed" />
</Grid>
</Window>
You can also create a generic control that you pass to a show method the title and message content, like MessageBox show method. You can also add the user control element programmatically in the window in this method.

You can use the validation and the INotifyDataError which is on WPF 4.5 and you can show a nice message next to the textbox check this link for example

How to group controls inside Grid for reuse in XAML?

In my application I have some controls that logically belongs together and is reused many places in different windows. The controls are always placed inside a grid.
Instead of copying the controls (and the code behind) each time I want to use them, I would like to define and maintain them in a single xaml file as a single UserControl.
I have this now:
<Grid>
<Grid.ColumnDefinitions>
[ColumnDefinitions...]
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
[RowDefinitions...]
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock Text="Caption" />
<Border Padding="2" x:Name="myBorder">
<TextBox TabIndex="1" x:Name="myTxt"/>
</Border>
</StackPanel>
<ListBox x:Name="myList" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Margin="5,50,5,0" Height="100" VerticalAlignment="Top" Visibility="Collapsed" />
[More controls..]
</Grid>
But I want to reuse this part:
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock Text="Caption" />
<Border Padding="2" x:Name="myBorder">
<TextBox TabIndex="1" x:Name="myTxt"/>
</Border>
</StackPanel>
<ListBox x:Name="myList" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Margin="5,50,5,0" Height="100" VerticalAlignment="Top" Visibility="Collapsed" />
as a single control - but how do I define the Grid.Column when using the control (somehow supplying it as a parameter)? - and how do I set the Grid.RowSpan value (eventhough the code is moved to a new xaml file, and not defined inside a grid)?
Any comments?

Make them into a separate usercontrol, then include that in your project.
If you're using Blend, it's really easy, just select all the controls, right click and Make into Usercontrol.

You could also make it into a resource.
Define it in a ResourceDictionary and include the dictionary the places you want to use it.
There is one catch - the resource dictionary returns the same instance everytime - so you have to add the attribute x:Shared="false".
But the wpf way is to figure out how you can do it with a DataTemplate :)