Click here to Skip to main content
Click here to Skip to main content

Tagged as

Button Inside passwordbox like Windows 8 in WPF Usercontrol

, 6 Nov 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
WPF passwordbox usercontrol


As a new WPF programmer, I wanted to simplify the function and was looking for good design controls. Microsoft Windows 8 OS has a new type of control, that is, a button inside the text-box. In my project log in screen, I planned to use this type of control. So I created a user-control for this.

Using the Code

Normally, WPF button has hover animation but we don't want it. So first, we style for this:

<Style x:Key="ButtonWithoutHover" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" 
                    VerticalAlignment="Center" />

For binding this design, put Style="{StaticResource ButtonWithoutHover}" inside the button tag. Then, we have to put button control and passwordbox in Dockpanel.

<DockPanel Canvas.Right="2" Canvas.Top="2">
<Button Style="{StaticResource ButtonWithoutHover}" BorderThickness="3" 
BorderBrush="White" FontSize="15" DockPanel.Dock="Right" 
Content="->"  Click="onButtonClick" Grid.Column="1" >                   
<PasswordBox BorderThickness="0" Name="txtPassword" 
DockPanel.Dock="Left"  Grid.Column="0" />


At a Click event, we have to include the C#:

public event RoutedEventHandler Click;

void onButtonClick(object sender, RoutedEventArgs e)
    if (this.Click != null)
    this.Click(this, e);

Now the Button inside passwordbox user control is ready.

Implementing Steps

  1. Include the namespace of user control in new WPF application:
  2. Include the passwordbox in grid:
    <wpfCtrl:PasswordBoxWin8 Background="CadetBlue" Margin="24,12,257,258" FontSize="26" />

    I have not set the background in usercontrol. So you must specify the Background color while implementing.

Image for Controls

Points of Interest

I have learned the Dockpanel and border usages while creating this usercontrol.


  • Nov 06 2013 - Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Jagadeeswaran Natarajan
India India
Hi, I'm Jagadeeswaran Natarajan from Chennai, TamilNadu, India. In Past 4 years ( 2010 onwards) I'm working as a dot net programmer company called M Cubic Software Pvt Ltd, chennai.
I have done more then 4 project in various technologies.
Follow on   Twitter   LinkedIn

Comments and Discussions

SuggestionSome suggestions. PinmemberLeung Yat Chun6-Nov-13 6:51 
GeneralRe: Some suggestions. Pinprofessionalsago.jaga7-Nov-13 18:43 
GeneralRe: Some suggestions. PinmemberLeung Yat Chun8-Nov-13 5:59 
QuestionSome more PinprofessionalRanjan.D6-Nov-13 6:09 
AnswerRe: Some more Pinprofessionalsago.jaga6-Nov-13 19:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411023.1 | Last Updated 6 Nov 2013
Article Copyright 2013 by Jagadeeswaran Natarajan
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid