CyberX8/CyberX8_Themes/UserControls/CatholyteGroove.xaml

<UserControl x:Class="CyberX8_Themes.UserControls.CatholyteGroove"
             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="self"
             d:DesignHeight="400" d:DesignWidth="450">
    <UserControl.Resources>
        <converters:BoolToColor x:Key="boolToColor"/>
        <converters:BoolToRedColor x:Key="boolToRedColor"/>
        <converters:BoolToRedGreenColor x:Key="boolToRedGreenColor"/>
        <converters:BoolToVisibility2 x:Key="boolToVisibility2"></converters:BoolToVisibility2>
    </UserControl.Resources>
    <Grid>
        <Viewbox Stretch="Fill">
            <Canvas Width="450" Height="400">
                <Viewbox Width="450" Height="400">
                    <Image Source="pack://application:,,,/CyberX8_Themes;component/Themes/Images/parts/Catholyte.png"></Image>
                </Viewbox>
                <Frame Name="MainFrame" />
                <TextBlock FontSize="18" Canvas.Top="44" Canvas.Left="11" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Top">Catholyte</TextBlock>
                <Viewbox Canvas.Left="30" Canvas.Top="-3">
                    <Image Width="50" Height="30" Source="pack://application:,,,/CyberX8_Themes;component/Themes/Images/parts/Valve1.png"></Image>
                </Viewbox>
                <Grid Canvas.Left="305" Canvas.Top="70">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="140"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="25"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0" Grid.Column="0">
                        <Label Content="CA Level" FontSize="12" FontWeight="Bold" VerticalContentAlignment="Center" HorizontalContentAlignment="Left" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                    <Border Grid.Row="1" Grid.Column="0" Margin="5,0,15,5" Background="Black" Width="100">
                        <TextBlock Text="{Binding ElementName=self,Path=CALevel, StringFormat={}{0:F2} L}" Foreground="Lime" FontSize="12" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                    </Border>
                    <Grid Grid.Row="2" Grid.Column="0">
                        <Label Content="CA LevelRaw" FontSize="12" FontWeight="Bold" VerticalContentAlignment="Center" HorizontalContentAlignment="Left" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                    <Border Grid.Row="3" Grid.Column="0" Margin="5,0,15,5" Background="Black" Width="100">
                        <TextBlock Text="{Binding ElementName=self,Path=CALevelRaw, 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="Center" Margin="0,0,25,0"/>
                        <Ellipse Margin="61,2,20,2"  Width="16" Height="16" Stroke="Silver"
                       Fill="{Binding ElementName=self,Path=IsHighLevel,Converter={StaticResource boolToRedGreenColor}}"/>
                    </Grid>
                    <Grid Grid.Row="5" Grid.Column="0">
                        <Label Content="Low" FontSize="12" FontWeight="Bold" HorizontalContentAlignment="Left" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,25,0"/>
                        <Ellipse Margin="61,2,20,2"  Width="16" Height="16" Fill="{Binding ElementName=self,Path=IsLowLevel,Converter={StaticResource boolToRedGreenColor}}"  Stroke="Gray"/>

                    </Grid>
                    <Grid Grid.Row="6" Grid.Column="0" Visibility="{Binding ElementName=self,Path=IsShowHighSafety,Converter={StaticResource bool2VisibilityConverter}}">
                        <Ellipse Margin="61,2,20,2"  Width="16" Height="16"  Fill="{Binding ElementName=self,Path=IsSafetyHighLevel,Converter={StaticResource boolToRedColor}}"   Stroke="Gray"/>
                        <Label Content="High Safety" FontSize="12" FontWeight="Bold" Margin="0,0,50,0" />
                    </Grid>
                </Grid>
                <Rectangle x:Name="ErrorRectangle" Fill="Red" Height="268" Width="389" VerticalAlignment="Center" Opacity="0.5" Panel.ZIndex="3" 
                           Visibility="{Binding ElementName=self,Path=IsError,Converter={StaticResource boolToVisibility2}}" Canvas.Left="30" Canvas.Top="77" HorizontalAlignment="Center"/>

            </Canvas>
        </Viewbox>

    </Grid>
</UserControl>