Round Corner PasswordBox in WPF

Kailash Chandra Behera | Tuesday, January 10, 2017

Introduction

In my prevous blog, we saw the code example how to create Round Corner Textbox in WPF using XAML. This blog also provides code snippet to create a Round Corner PasswordBox in WPF using Style.

Round Corner PasswordBox in WPF

wpf passwordbox validation

Round Corner PasswordBox in WPF

Getting Started

The password box control is a special type of TextBox entering and handling passwords. The default event of PasswordBox is PasswordChanged. The below XAML code creates a PasswordBox with PasswordChanged event and other properties such as Name,Height, Width, MaxLength, and PasswordChar.

 <PasswordBox Name="pwdBox"  MaxLength="15" PasswordChar="#" PasswordChanged="PasswordChangedHandler" />  
 //corresponding event handler  
 void PasswordChangedHandler(Object sender, RoutedEventArgs args)  
 {  
   // Increment a counter each time the event fires.  
   ++pwChanges;  
 }

The WPF PasswordBox has built-in handling for the bubbling events (MouseUp and MouseDown). Consequently, but the custom event handlers that listen for MouseUp or MouseDown events from a PasswordBox will never be called.

To handle above bubbling events you have to listen from the tunneling events(PreviewMouseUp and PreviewMouseDown) instead, or you can register the handlers with the HandledEventsToo argument through behind(C# or VB.Net) code only.

Note that never mark the event handled unless you intently want to disable PasswordBox native handling of these events, and be aware that this has notable effects on the control's UI.

Code Example

The below code example describes style and template to make a Round Corner PasswordBox in WPF. This code you can direct copy and past it in WPF resource to use it in your WPF Project. Here the XAML codes modify the default ControlTemplate to give the control a unique appearance.

Declare Style for Round Corner PasswordBox in WPF

 <Application x:Class="helloworld.App"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:local="clr-namespace:helloworld"  
        StartupUri="MainWindow.xaml">  
   <Application.Resources>  
     <Style TargetType="PasswordBox" x:Key="roundcornerpassword">  
       <Setter Property="PasswordChar" Value="●"/>  
       <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>  
       <Setter Property="BorderThickness" Value="1"/>  
       <Setter Property="HorizontalContentAlignment" Value="Left"/>  
       <Setter Property="Padding" Value="1"/>  
       <Setter Property="FocusVisualStyle" Value="{x:Null}"/>  
       <Setter Property="AllowDrop" Value="true"/>  
       <Setter Property="Template">  
         <Setter.Value>  
           <ControlTemplate TargetType="PasswordBox">  
             <Border CornerRadius="3" x:Name="Bd" Background="White" BorderBrush="Gray" BorderThickness="1" OpacityMask="{x:Null}">  
               <ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost" Template="{DynamicResource ScrollViewerControlTemplate1}"/>  
             </Border>  
             <ControlTemplate.Triggers>  
               <Trigger Property="IsEnabled" Value="false">  
                 <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>  
                 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>  
               </Trigger>  
             </ControlTemplate.Triggers>  
           </ControlTemplate>  
         </Setter.Value>  
       </Setter>  
     </Style>  
   </Application.Resources>  
 </Application>

The above code, customizes the appearance of default WPF PasswordBox by injecting border control into ControlTemplate. To appear the Password as rounded corner, the border CornerRadius set to 3, you can specify the CornerRadius according to your requirement.

Apply Style for Round Corner PasswordBox in WPF

The below code describe how to use the above declared style in the default WPF PassworBox to make it roundable corner.
 <Window x:Class="RoundCornerPasswordBox.MainWindow"   
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    Title="Reound Corner Password Example" Height="350" Width="525">   
   <Grid>   
    <PasswordBox Style="{StaticResource roundcornerpassword}" orizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="200" Height="30" PasswordChar="*" Password="kailash" FontSize="20">   
    </PasswordBox>   
   </Grid>   
  </Window>

Related Articles

  1. Data Validation in WPF
  2. WPF Round Corner Button with click effects
  3. WPF Custom Datagrid Control(Filterable)
  4. WPF Round Corner ListBox
  5. Custom RadioButtonListBox With Image
  6. RadiobuttonList in WPF
  7. Custom CheckedListBox in WPF

Summary

In the above code example, we saw how to custome WPF PasswordBox template to give it different appearance like Round Corner PasswordBox in WPF using style, I hope you have enjoyed it a lot.
Thanks

By at