desktop-edge-win/DesktopEdge/Views/Controls/AddIdentityCA.xaml

<UserControl x:Class="ZitiDesktopEdge.AddIdentityCA"
             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:ZitiDesktopEdge"
             mc:Ignorable="d">
    <UserControl.Resources>
        <!-- Style for the RadioButton Toggle -->
        <Style x:Key="ToggleSwitchStyle" TargetType="RadioButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Border x:Name="Border" 
                        Background="Gray" 
                        BorderBrush="DarkGray" 
                        BorderThickness="3">
                            <ContentPresenter x:Name="ContentPresenter"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      TextElement.Foreground="Black" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- When checked, change background and text color -->
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource ButtonBrush}" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
                                <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{StaticResource ButtonColorDarkBrush}" />
                            </Trigger>
                            <!-- Hover effect - Red background -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource ButtonColorBrush}" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource ButtonColorBrush}" />
                                <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="White" />
                            </Trigger>
                            <!-- Focus effect -->
                            <Trigger Property="IsFocused" Value="True">
                                <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource ButtonColorBrush}" />
                                <Setter TargetName="Border" Property="BorderThickness" Value="2" />
                            </Trigger>
                            <DataTrigger Binding="{Binding IsFocused, RelativeSource={RelativeSource Self}}" Value="False">
                                <Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
                                <Setter TargetName="Border" Property="BorderThickness" Value="1" />
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Height" Value="30" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </UserControl.Resources>

    <Grid Margin="0" Height="Auto" VerticalAlignment="Center">
        <Border Background="{StaticResource DarkBackgroundBrush}"
                BorderBrush="Gray"
                BorderThickness="2"
                CornerRadius="10"
                Padding="10">
        </Border>

        <StackPanel x:Name="MFAAuthArea" Margin="5,10,5,10">
            <Label Content="3rd Party Certificate" Foreground="White" FontSize="16" HorizontalAlignment="Center" FontWeight="Bold" />

            <!-- Certificate File -->
            <Label Content="Certificate File" Foreground="White" Opacity="0.7" FontSize="12" HorizontalAlignment="Left" />
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,0">
                <TextBox x:Name="CertificateFile"
                             FontSize="14"
                             Width="250"
                             IsReadOnly="True"
                             Text="&lt;Choose Certificate File&gt;"
                             IsTabStop="True"
                     />
                <Button Content="Browse"
                            Margin="10,0,0,0"
                            Click="BrowseCertificateFile_Click"
                            IsTabStop="True"/>
            </StackPanel>

            <!-- Key File -->
            <Label Content="Key File" Foreground="White" Opacity="0.7" FontSize="12" HorizontalAlignment="Left" />
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,0">
                <TextBox x:Name="KeyFile"
                             FontSize="14"
                             Width="250"
                             IsReadOnly="True"
                             Text="&lt;Choose Key File&gt;"
                             IsTabStop="True"/>
                <Button x:Name="BrowseKeyBtn"
                            Content="Browse"
                            Margin="10,0,0,0"
                            Click="BrowseKeyFile_Click"
                            IsTabStop="True"/>
            </StackPanel>

            <!-- Alias -->
            <Label Content="Alias" Foreground="White" Opacity="0.7" FontSize="12" HorizontalAlignment="Left" />
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,0">
                <TextBox x:Name="Alias"
                             FontSize="14"
                             Width="250"
                             IsTabStop="True" />
                <Label Margin="10,0,0,0"
                           Width="{Binding ElementName=BrowseKeyBtn, Path=ActualWidth}"/>
            </StackPanel>
            <local:StyledButton x:Name="JoinNetworkBtn" 
                                    OnClick="JoinNetworkUrl" 
                                    Label="Join Network" 
                                    IsTabStop="True" 
                                    Margin="0,15,0,0" />
        </StackPanel>
    </Grid>
</UserControl>