 <UserControl x:Class="District_3_App.LogIn.SignUp"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:WpfTest="clr-namespace:Log_In"
             TextElement.FontFamily="Lato">


    <UserControl.Resources>
        <Style x:Key="RoundedTextBoxStyle" TargetType="TextBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Border BorderBrush="#8492A6" BorderThickness="1" CornerRadius="5">
                            <TextBox Text="{TemplateBinding Text}" 
                                  BorderThickness="0" 
                                  Background="Transparent" 
                                  Padding="10,10"
                                  Foreground="#8190A5"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ToggleSwitchStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Viewbox>
                            <Border x:Name="Border" CornerRadius="10"
									Background="#FFFFFFFF"
									Width="40" Height="20">
                                <Border.Effect>
                                    <DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
                                </Border.Effect>
                                <Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
										 Margin="2 1 2 1"
										 Stroke="Gray" StrokeThickness="0.2"
										 HorizontalAlignment="Stretch">
                                    <Ellipse.Effect>
                                        <DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
                                    </Ellipse.Effect>
                                </Ellipse>
                            </Border>
                        </Viewbox>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Checked">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="Border"
															Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
															To="#FF4CD661"
															Duration="0:0:0.1" />
                                        <ThicknessAnimation Storyboard.TargetName="Ellipse"
																Storyboard.TargetProperty="Margin"
																To="20 1 2 1"
																Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Unchecked">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="Border"
															Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
															To="White"
															Duration="0:0:0.1" />
                                        <ThicknessAnimation Storyboard.TargetName="Ellipse"
																Storyboard.TargetProperty="Margin"
																To="2 1 2 1"
																Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="passwordbox" TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource {x:Type PasswordBox}}">
            <Setter Property="Padding"  Value="10, 10" />
            <Setter Property="WpfTest:PasswordBoxMonitor.IsMonitoring"
  Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type PasswordBox}">
                        <Border Background="{TemplateBinding Background}" 
x:Name="Bd" BorderBrush="#8492A6"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
                            <Grid>
                                <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>

                                <TextBlock x:Name="txtPrompt" Text="{TemplateBinding Tag}" 
                                   Background="Transparent" 
                                   Visibility="Collapsed"
                                   Padding="10,10"
                                   Foreground="#8190A5" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="WpfTest:PasswordBoxMonitor.PasswordLength" Value="0">
                                <Setter Property="Visibility" TargetName="txtPrompt" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="placeHolder" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
            <Setter Property="Padding"  Value="10, 10"/>
            <Setter Property="Foreground"  Value="Black"/>
            <Setter Property="Background"  Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border x:Name="border" BorderBrush="#8492A6" BorderThickness="1" CornerRadius="5" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <Grid>
                                <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>

                                <TextBlock Text="{TemplateBinding Tag}" 
                                    Background="Transparent" 
                                    Padding="10,10"
                                    Foreground="#8190A5" IsHitTestVisible="False">
                                    <TextBlock.Style>
                                        <Style TargetType="TextBlock">
                                            <Setter Property="Visibility" Value="Hidden"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource AncestorType=TextBox}}" 
                                                     Value="">
                                                    <Setter Property="Visibility" Value="Visible"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </TextBlock.Style>
                                </TextBlock>

                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>


    <Grid x:Name="SignUpGrid" Background="White" Width="1300" Height="1000" Margin="-450,-40,0,0">
        <Border BorderBrush="#5A6978" BorderThickness="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="433,50,0,0">
            <Grid Margin="65">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Source="\images\app_logo.png" Width="90" Height="55" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,-34,0,0"/>
                <TextBlock Grid.Row="1" Text="Sign up" FontSize="30" HorizontalAlignment="Center" Margin="0,23,0,48" Foreground="#47525E" FontWeight="Bold"/>

                <TextBox Tag="Username" Grid.Row="2" x:Name="txtUsername" Width="290" Margin="60,0,60,0" Style="{StaticResource placeHolder}" Height="46" VerticalAlignment="Center" FontSize="16" Foreground="#8190A5" />
                <TextBox Grid.Row="3" x:Name="txtEmail" Tag="Email" Width="290" Margin="11,16,11,11" Style="{StaticResource placeHolder}" Height="46" FontSize="16" Foreground="#8190A5"/>

                <StackPanel Grid.Row="3" Orientation="Horizontal" VerticalAlignment="Top" Margin="42,46,0,0" Grid.RowSpan="2">
                    <PasswordBox Tag="Password" x:Name="txtPassword" Width="290" Margin="18,32,10,0" Height="46" FontSize="16" Foreground="#8190A5" PasswordChar="•" Style="{StaticResource passwordbox}"/>
                    <TextBox x:Name="txtVisiblePassword" IsEnabled="False" Visibility="Collapsed" Width="290" Margin="18,22,10,0" Height="46" FontSize="16" Foreground="#8190A5" Style="{StaticResource RoundedTextBoxStyle}"/>
                    <ToggleButton x:Name="TogglePasswordVisibility" Width="40" Height="40" Margin="0,22,10,0" HorizontalAlignment="Left" Background="Transparent" BorderBrush="Transparent" Click="TogglePasswordVisibility_Click">
                        <Image x:Name="PasswordVisibilityIcon" Width="30" Height="30" Source="\images\hidePasswordIcon.png" RenderTransformOrigin="1.786,0.428" />
                    </ToggleButton>
                </StackPanel>

                <StackPanel Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Top" Margin="42,46,0,0" Grid.RowSpan="2">
                    <PasswordBox Tag="Confirm password"  x:Name="txtConfirmPassword" Width="290" Margin="18,22,10,0" Height="46" FontSize="16" Foreground="#8190A5" PasswordChar="•" Style="{StaticResource passwordbox}" Password=""/>
                    <TextBox x:Name="txtVisibleConfirmPassword" IsEnabled="False" Visibility="Collapsed" Width="290" Margin="18,22,10,0" Height="46" FontSize="16" Foreground="#8190A5" Style="{StaticResource RoundedTextBoxStyle}"/>
                    <ToggleButton x:Name="ToggleConfirmPasswordVisibility" Width="40" Height="40" Margin="0,22,10,0" HorizontalAlignment="Left" Background="Transparent" BorderBrush="Transparent" Click="ToggleConfirmPasswordVisibility_Click">
                        <Image x:Name="ConfirmPasswordVisibilityIcon" Width="30" Height="30" Source="\images\hidePasswordIcon.png" RenderTransformOrigin="1.786,0.428" />
                    </ToggleButton>
                </StackPanel>

                <StackPanel Grid.Row="6" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10">
                    <TextBlock Text="Business Account" FontSize="14"  Foreground="#8190A5"/>
                    <ToggleButton x:Name="Toggle" Style="{StaticResource ToggleSwitchStyle}" Margin="20,0"/>
                </StackPanel>
                <Button Grid.Row="7" x:Name="SignUpButton" Content="Sign Up" Background="#FF47525E" Foreground="White" Margin="0,10,0,-3" Width="220" Height="38" HorizontalAlignment="Center" FontSize="16" BorderBrush="#FF47525E" Click="SignUpButton_Click">
                    <Button.Resources>
                        <Style TargetType="Border">
                            <Setter Property="CornerRadius" Value="5"/>
                        </Style>
                    </Button.Resources>
                </Button>
                <TextBlock Grid.Row="8" FontSize="14" HorizontalAlignment="Center" Margin="0,20,0,10" Foreground="#8190A5">
                    <Run Text="If you already have an account"/>
                     <Hyperlink Click="SignInLink_Click">
                         <TextBlock Text="sign in" Foreground="#8190A5"/>
                     </Hyperlink>
                </TextBlock>
            </Grid>
        </Border>
    </Grid>
</UserControl>
