phihong_evse_ui_tool/PlugChargingUC.xaml

<UserControl x:Class="Phihong_EVSE_UI_Tool.PlugChargingUC"
             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:Phihong_EVSE_UI_Tool"
             xmlns:fd="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
             mc:Ignorable="d" 
             d:DesignHeight="1350" d:DesignWidth="880" FontSize="15" FontFamily="Segoe UI">
    <UserControl.Resources>
        <BooleanToVisibilityConverter x:Key="b2v"/>
    </UserControl.Resources>
    <Grid fd:PointerTracker.Enabled="True">
        <ScrollViewer x:Name="uxContentScrollViewer" HorizontalContentAlignment="Center" PanningMode="VerticalOnly" IsDeferredScrollingEnabled="False" DataContext="{Binding}">
            <StackPanel>
                <!-- Plug -->
                <TextBlock Text="Plug" FontSize="24" HorizontalAlignment="Left" Margin="22,6,0,8"/>
                <TextBlock Text="Background picture for the Plug status (800x480)" HorizontalAlignment="Left" Margin="22,4,0,12"/>
                <Image x:Name="uxPlugImage" Source="/Background/5_plug.bmp" HorizontalAlignment="Left" Margin="22,0,0,12" Height="192" Width="320" RenderOptions.BitmapScalingMode="HighQuality"/>
                <StackPanel Orientation="Horizontal" Margin="22,8,300,12">
                    <RadioButton x:Name="uxPlugDefaultRadioButton" Tag="Plug" GroupName="plugSelect" Margin="0,0,36,0" Style="{StaticResource MaterialDesignRadioButton}" 
                                 Background="{Binding Path=(fd:AccentColors.ImmersiveSystemAccentBrush)}"
                                 Checked="uxDefaultRadioButton_Checked">Default</RadioButton>
                    <RadioButton x:Name="uxPlugCustomRadioButton" Tag="Plug" GroupName="plugSelect" Style="{StaticResource MaterialDesignRadioButton}" 
                                 Background="{Binding Path=(fd:AccentColors.ImmersiveSystemAccentBrush)}"
                                 Checked="uxCustomRadioButton_Checked">Customized</RadioButton>
                </StackPanel>
                <StackPanel x:Name="uxPlugCustomStackPanel" Orientation="Horizontal" Margin="22,0,150,12" 
                            Visibility="{Binding IsChecked,ElementName=uxPlugCustomRadioButton,Converter={StaticResource b2v}}">
                    <Button Tag="Plug" Content="Browse" HorizontalAlignment="Left" Width="90" Height="35" 
                            Style="{StaticResource ButtonRevealStyle}" Click="uxBrowseButton_Click" Foreground="Black"/>
                    <TextBox x:Name="uxPlugExploreTextBox" VerticalContentAlignment="Center" Margin="1,0,0,0" Width="270" Height="35" 
                             Style="{StaticResource TextBoxRevealStyle}" Text="Please select an image file" IsReadOnly="True"/>
                </StackPanel>
                <!-- Precharge -->
                <TextBlock Text="Precharge" FontSize="24" HorizontalAlignment="Left" Margin="22,18,0,8"/>
                <TextBlock Text="Background picture for Precharge status (800x480)" HorizontalAlignment="Left" Margin="22,4,0,12"/>
                <Image x:Name="uxPrechargeImage" Source="/Background/6_precharge.bmp" HorizontalAlignment="Left" Margin="22,0,0,12" Height="192" Width="320" RenderOptions.BitmapScalingMode="HighQuality"/>
                <StackPanel Orientation="Horizontal" Margin="22,8,300,12">
                    <RadioButton x:Name="uxPrechargeDefaultRadioButton" Tag="Precharge" GroupName="prechargeSelect" Margin="0,0,36,0" Style="{StaticResource MaterialDesignRadioButton}" 
                                 Background="{Binding Path=(fd:AccentColors.ImmersiveSystemAccentBrush)}"
                                 Checked="uxDefaultRadioButton_Checked">Default</RadioButton>
                    <RadioButton x:Name="uxPrechargeCustomRadioButton" Tag="Precharge" GroupName="prechargeSelect" Style="{StaticResource MaterialDesignRadioButton}" 
                                 Background="{Binding Path=(fd:AccentColors.ImmersiveSystemAccentBrush)}"
                                 Checked="uxCustomRadioButton_Checked">Customized</RadioButton>
                </StackPanel>
                <StackPanel x:Name="uxPrechargeCustomStackPanel" Orientation="Horizontal" Margin="22,0,150,12" 
                            Visibility="{Binding IsChecked,ElementName=uxPrechargeCustomRadioButton,Converter={StaticResource b2v}}">
                    <Button Tag="Precharge" Content="Browse" HorizontalAlignment="Left" Width="90" Height="35" 
                            Style="{StaticResource ButtonRevealStyle}" Click="uxBrowseButton_Click" Foreground="Black"/>
                    <TextBox x:Name="uxPrechargeExploreTextBox" VerticalContentAlignment="Center" Margin="1,0,0,0" Width="270" Height="35" 
                             Style="{StaticResource TextBoxRevealStyle}" Text="Please select an image file" IsReadOnly="True"/>
                </StackPanel>
                <!-- Charging -->
                <TextBlock Text="Charging" FontSize="24" HorizontalAlignment="Left" Margin="22,18,0,8"/>
                <TextBlock Text="Background picture for Charging status (800x480)" HorizontalAlignment="Left" Margin="22,4,0,12"/>
                <Image x:Name="uxChargingImage" Source="/Background/7_charging.bmp" HorizontalAlignment="Left" Margin="22,0,0,12" Height="192" Width="320" RenderOptions.BitmapScalingMode="HighQuality"/>
                <StackPanel Orientation="Horizontal" Margin="22,8,300,12">
                    <RadioButton x:Name="uxChargingDefaultRadioButton" Tag="Charging" GroupName="chargingSelect" Margin="0,0,36,0" Style="{StaticResource MaterialDesignRadioButton}" 
                                 Background="{Binding Path=(fd:AccentColors.ImmersiveSystemAccentBrush)}"
                                 Checked="uxDefaultRadioButton_Checked">Default</RadioButton>
                    <RadioButton x:Name="uxChargingCustomRadioButton" Tag="Charging" GroupName="chargingSelect" Style="{StaticResource MaterialDesignRadioButton}" 
                                 Background="{Binding Path=(fd:AccentColors.ImmersiveSystemAccentBrush)}"
                                 Checked="uxCustomRadioButton_Checked">Customized</RadioButton>
                </StackPanel>
                <StackPanel x:Name="uxChargingCustomStackPanel" Orientation="Horizontal" Margin="22,0,150,12" 
                            Visibility="{Binding IsChecked,ElementName=uxChargingCustomRadioButton,Converter={StaticResource b2v}}">
                    <Button Tag="Charging" Content="Browse" HorizontalAlignment="Left" Width="90" Height="35" 
                            Style="{StaticResource ButtonRevealStyle}" Click="uxBrowseButton_Click" Foreground="Black"/>
                    <TextBox x:Name="uxChargingExploreTextBox" VerticalContentAlignment="Center" Margin="1,0,0,0" Width="270" Height="35" 
                             Style="{StaticResource TextBoxRevealStyle}" Text="Please select an image file" IsReadOnly="True"/>
                </StackPanel>
                <!-- Complete -->
                <TextBlock Text="Complete" FontSize="24" HorizontalAlignment="Left" Margin="22,18,0,8"/>
                <TextBlock Text="Background picture for Complete status (800x480)" HorizontalAlignment="Left" Margin="22,4,0,12"/>
                <Image x:Name="uxCompleteImage" Source="/Background/8_complete.bmp" HorizontalAlignment="Left" Margin="22,0,0,12" Height="192" Width="320" RenderOptions.BitmapScalingMode="HighQuality"/>
                <StackPanel Orientation="Horizontal" Margin="22,8,300,12">
                    <RadioButton x:Name="uxCompleteDefaultRadioButton" Tag="Complete" GroupName="completeSelect" Margin="0,0,36,0" Style="{StaticResource MaterialDesignRadioButton}" 
                                 Background="{Binding Path=(fd:AccentColors.ImmersiveSystemAccentBrush)}"
                                 Checked="uxDefaultRadioButton_Checked">Default</RadioButton>
                    <RadioButton x:Name="uxCompleteCustomRadioButton" Tag="Complete" GroupName="completeSelect" Style="{StaticResource MaterialDesignRadioButton}" 
                                 Background="{Binding Path=(fd:AccentColors.ImmersiveSystemAccentBrush)}"
                                 Checked="uxCustomRadioButton_Checked">Customized</RadioButton>
                </StackPanel>
                <StackPanel x:Name="uxCompleteCustomStackPanel" Orientation="Horizontal" Margin="22,0,150,12" 
                            Visibility="{Binding IsChecked,ElementName=uxCompleteCustomRadioButton,Converter={StaticResource b2v}}">
                    <Button Tag="Complete" Content="Browse" HorizontalAlignment="Left" Width="90" Height="35" 
                            Style="{StaticResource ButtonRevealStyle}" Click="uxBrowseButton_Click" Foreground="Black"/>
                    <TextBox x:Name="uxCompleteExploreTextBox" VerticalContentAlignment="Center" Margin="1,0,0,0" Width="270" Height="35" 
                             Style="{StaticResource TextBoxRevealStyle}" Text="Please select an image file" IsReadOnly="True"/>
                </StackPanel>
                <StackPanel Margin="22,0,450,10" Height="15"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</UserControl>