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

Introduction

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">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    BorderThickness="3"                                                        
                    BorderBrush="White"                                       
                    Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" 
                    VerticalAlignment="Center" />
                </Border>                            
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style> 

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" >                   
</Button>
<PasswordBox BorderThickness="0" Name="txtPassword" 
DockPanel.Dock="Left"  Grid.Column="0" />

</DockPanel> 

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:
    xmlns:wpfCtrl="clr-namespace:WpfUserControls;assembly=WpfUserControls"
  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.

History

  • Nov 06 2013 - Initial version

License

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

Share

About the Author

Jagadeeswaran Natarajan
Software Developer M CUBIC SOFTWARE PVT LTD
India India
Dot Net Software Programmer in M Cubic Software Pvt Ltd,. Lives in Chennai, TN, India.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
SuggestionSome suggestions. PinmemberLeung Yat Chun6-Nov-13 5:51 
GeneralRe: Some suggestions. Pinprofessionalsago.jaga7-Nov-13 17:43 
GeneralRe: Some suggestions. PinmemberLeung Yat Chun8-Nov-13 4:59 
QuestionSome more PinprofessionalRanjan.D6-Nov-13 5:09 
AnswerRe: Some more Pinprofessionalsago.jaga6-Nov-13 18: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 | Mobile
Web04 | 2.8.141015.1 | Last Updated 6 Nov 2013
Article Copyright 2013 by Jagadeeswaran Natarajan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid