CyberX8/CyberX8_Themes/UserControls/AnolyteGroove.xaml

<UserControl x:Class="CyberX8_Themes.UserControls.AnolyteGroove"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CyberX8_Themes.UserControls"
             xmlns:converters="clr-namespace:CyberX8_Themes.Converters"
             mc:Ignorable="d" Name="anolyteGroove"
             d:DesignHeight="375" d:DesignWidth="125">
    <UserControl.Resources>
        <converters:BoolToColor x:Key="boolToColor"/>
        <converters:BoolToRedGreenColor x:Key="boolToRedGreenColor"/>
        <converters:BoolToVisibility2 x:Key="boolToVisibility2"></converters:BoolToVisibility2>
    </UserControl.Resources>
    <Viewbox Stretch="Fill">
        <Canvas Width="125" Height="375">
            <StackPanel Canvas.Left="37" Canvas.Top="-21">
                <Image Width="50" Height="30" Source="pack://application:,,,/CyberX8_Themes;component/Themes/Images/parts/Valve1.png"></Image>
            </StackPanel>
            <StackPanel Width="125" Height="375">
                <Image Source="pack://application:,,,/CyberX8_Themes;component/Themes/Images/parts/Anolyte.png"></Image>
            </StackPanel>
            <TextBlock FontSize="18" Canvas.Top="15" Canvas.Left="29" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center">Anolyte</TextBlock>
            <Grid Canvas.Left="17" Canvas.Top="40">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="95"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>

                </Grid.RowDefinitions>

                <Grid Grid.Row="0" Grid.Column="0">
                    <Label Content="AN Level" FontSize="12" FontWeight="Bold" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
                <Border Grid.Row="1" Grid.Column="0" Margin="5,0,5,5" Background="Black">
                    <TextBlock Text="{Binding ElementName=anolyteGroove,Path=ANLevel, StringFormat={}{0:F2} L}" Foreground="Lime" FontSize="12" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                </Border>
                <Grid Grid.Row="2" Grid.Column="0" Visibility="{Binding ElementName=anolyteGroove,Path=IsShowANLevelRaw, Converter={StaticResource boolToVisibility2}}" >
                    <Label Content="AN Level Raw" FontSize="12" FontWeight="Bold" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
                <Border Height="25" Visibility="{Binding ElementName=anolyteGroove,Path=IsShowANLevelRaw, Converter={StaticResource boolToVisibility2}}" Grid.Row="3" Grid.Column="0" Margin="5,0,5,5" Background="Black">
                    <TextBlock Text="{Binding ElementName=anolyteGroove,Path=ANLevelRaw, StringFormat={}{0:F2} %}" Foreground="Lime" FontSize="12" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                </Border>
                <Grid Grid.Row="4" Grid.Column="0">
                    <Label Content="High" FontSize="12" FontWeight="Bold" HorizontalContentAlignment="Left" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0"/>
                    <Ellipse Margin="44,4,20,5"  Width="16" Height="16"  Fill="{Binding ElementName=anolyteGroove,Path=IsHighLevel,Converter={StaticResource boolToRedGreenColor}}"   Stroke="Silver"/>
                </Grid>
                <Grid Grid.Row="5" Grid.Column="0">
                    <Label Content="Low" FontSize="12" FontWeight="Bold" HorizontalContentAlignment="Left" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0"/>
                    <Ellipse Margin="44,4,20,5"  Width="16" Height="16"  Fill="{Binding ElementName=anolyteGroove,Path=IsLowLevel,Converter={StaticResource boolToRedGreenColor}}"   Stroke="Silver"/>
                </Grid>
            </Grid>
            <Rectangle x:Name="ErrorRectangle" Fill="Red" Height="261" Width="84" VerticalAlignment="Top" Opacity="0.5" Panel.ZIndex="3"
                Visibility="{Binding ElementName=anolyteGroove,Path=IsError,Converter={StaticResource boolToVisibility2}}" Canvas.Left="22" Canvas.Top="40" HorizontalAlignment="Center"/>
        </Canvas>

    </Viewbox>

</UserControl>