BindingsOverview.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             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:vm="clr-namespace:TouchGestures.UX.ViewModels"
             xmlns:views="clr-namespace:TouchGestures.UX.Views"
             xmlns:gestures-views="clr-namespace:TouchGestures.UX.Views.Gestures"
             xmlns:containers="clr-namespace:TouchGestures.UX.Controls.Containers"
             xmlns:converters="clr-namespace:TouchGestures.UX.Converters"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:DataType="vm:BindingsOverviewViewModel"
             x:Class="TouchGestures.UX.Views.BindingsOverview">

  <UserControl.Resources>
    <converters:TogglableMarginConverter x:Key="TogglableMarginConverter" />
  </UserControl.Resources>

  <!-- Currently, applying a background from here cause a wall of a stacktrace to appear -->
  <!--<Design.PreviewWith>
    <views:BindingsOverview Background="{StaticResource BodyColorBrush}" />
  </Design.PreviewWith>-->

  <Design.DataContext>
    <vm:BindingsOverviewViewModel />
  </Design.DataContext>

  <UserControl.Styles>
    <Style Selector="Button#VIEW_Adder">
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderBrush" Value="Transparent" />
      <Setter Property="Margin" Value="0" />
      <Setter Property="Padding" Value="9,11,12,12" />
      <Setter Property="IsEnabled" Value="{Binding IsReady}" />
    </Style>
    <Style Selector="Button#VIEW_Adder:disabled > ContentPresenter">
      <Setter Property="Background" Value="Transparent" />
    </Style>
    <Style Selector="TextBox#VIEW_SearchBar">
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="BorderBrush" Value="{StaticResource InputBorderColorBrush}" />
      <Setter Property="Margin" Value="4, 0" />
    </Style>
    <Style Selector="#VIEW_Body > ContentPresenter">
      <Setter Property="Margin" Value="0, 0, 0, 16" />
    </Style>
    <Style Selector="#VIEW_Body > ContentPresenter:nth-last-child(1)">
      <Setter Property="Margin" Value="0, 0, 0, 0" />
    </Style>
    <Style Selector="ScrollViewer#VIEW_Body">
      <Setter Property="IsVisible" Value="{Binding !IsEmpty}" />
      <Setter Property="IsEnabled" Value="{Binding !IsEmpty}" />
    </Style>
    <Style Selector="Grid#VIEW_BodyNoElements">
      <Setter Property="IsVisible" Value="{Binding IsEmpty}" />
      <Setter Property="IsEnabled" Value="{Binding IsEmpty}" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="Margin" Value="0, 0, 0, 32" />
    </Style>
  </UserControl.Styles>

  <ContentControl Content="{Binding NextViewModel}">
    <ContentControl.DataTemplates>
      <DataTemplate DataType="vm:BindingsOverviewViewModel">
        <Grid RowDefinitions="Auto, *, Auto">

          <Grid Name="VIEW_Header" ColumnDefinitions="Auto, *, Auto" Grid.Row="0" Margin="0, 32">

            <Button Name="VIEW_Adder" Command="{Binding StartSetupWizardCommand}" Grid.Column="0" ToolTip.Tip="Setup a new gesture">
              <Grid>
                <Image Source="/Assets/Icons/Add.png" Margin="1, 1, 0, 0" IsVisible="{Binding IsReady}" />
                <Image Source="/Assets/Icons/Add_disabled.png" Margin="1, 1, 0, 0" IsVisible="{Binding !IsReady}" />
              </Grid>
            </Button>
            <TextBox Name="VIEW_SearchBar" Watermark="Search..." Text="{Binding SearchText}" Grid.Column="1" />
            <TextBlock Text="" Width="35" Height="36" Grid.Column="2"/>

          </Grid>

          <ScrollViewer Grid.Row="1" Margin="23, 0" Grid.IsSharedSizeScope="True">
            <ItemsControl Name="VIEW_Body" ItemsSource="{Binding CurrentGestureBindings}" Padding="32, 0">
              <ItemsControl.ItemTemplate>
                <DataTemplate DataType="vm:GestureBindingDisplayViewModel">
                  <containers:GestureBindingDisplay />
                </DataTemplate>
              </ItemsControl.ItemTemplate>
            </ItemsControl>
          </ScrollViewer>

          <Grid Name="VIEW_BodyNoElements" RowDefinitions="Auto, Auto, Auto" Grid.Row="1">

            <!-- Margin of 0, 0, 0, 16 if IsReady is true -->
            <TextBlock Text="You don't have any gestures set up yet." FontSize="16" FontWeight="Bold" Grid.Row="0">
              <TextBlock.Margin>
                <MultiBinding Converter="{StaticResource TogglableMarginConverter}">
                  <Binding Source="0, 0, 0, 16" />
                  <Binding Path="IsReady" />
                </MultiBinding>
              </TextBlock.Margin>
            </TextBlock>

            <TextBlock Text="The daemon is currently not running." Foreground="Red" Grid.Row="1" 
                       IsVisible="{Binding !IsReady}" HorizontalAlignment="Center" Margin="0, 0, 0, 16"/>
            <TextBlock Text="Please plug in a touch tablet." Foreground="Red" Grid.Row="1"  
                       HorizontalAlignment="Center" Margin="0, 0, 0, 16">
              <TextBlock.IsVisible>
                <MultiBinding Converter="{x:Static BoolConverters.And}">
                  <Binding Path="IsReady" />
                  <Binding Path="IsTabletsEmpty" />
                </MultiBinding>
              </TextBlock.IsVisible>
            </TextBlock>

            <Button Command="{Binding StartSetupWizardCommand}" Content="Setup a new Gesture" Grid.Row="2" HorizontalAlignment="Center">
              <Button.IsVisible>
                <MultiBinding Converter="{x:Static BoolConverters.And}">
                  <Binding Path="IsReady" />
                  <Binding Path="!IsTabletsEmpty" />
                </MultiBinding>
              </Button.IsVisible>
              <Button.IsEnabled>
                <MultiBinding Converter="{x:Static BoolConverters.And}">
                  <Binding Source="IsReady" />
                  <Binding Source="!IsTabletsEmpty" />
                </MultiBinding>
              </Button.IsEnabled>
            </Button>

          </Grid>

          <Border Background="{StaticResource AccentColorBrush}" BorderThickness="0,2,0,0" Grid.Row="2" Padding="4">
            <Grid>
              <ComboBox ItemsSource="{Binding Tablets}" SelectedIndex="{Binding SelectedTabletIndex}" 
                        IsEnabled="{Binding IsReady}" HorizontalAlignment="Left" />
              <Button Command="{Binding RequestSave}" Content="Save" IsEnabled="{Binding IsReady}" HorizontalAlignment="Right" />
            </Grid>
          </Border>

        </Grid>
      </DataTemplate>
      <DataTemplate DataType="vm:GestureSetupWizardViewModel">
        <gestures-views:GestureSetupWizard />
      </DataTemplate>
    </ContentControl.DataTemplates>
  </ContentControl>

</UserControl>