How can I make a TextBox be a password box and display stars when using MVVM

Question

How can I do this in XAML   PSEUDO-CODE    lt TextBox Text   Binding Password   Type  Password   gt    so that the user sees stars or dots when he is typing in the password   I ve tried various examples which suggest PasswordChar and PasswordBox but can t get these to work   e g  I can do this as shown here    lt PasswordBox Grid Column  1  Grid Row  1      PasswordChar      gt    but I of course want to bind the Text property to my ViewModel so I can send the value the bound TextBox when the button is clicked  not working with code behind   I want to do this    lt TextBox Grid Column  1  Grid Row  0       Text   Binding Login        Style   StaticResource FormTextBox    gt   lt PasswordBox Grid Column  1  Grid Row  1      Text   Binding Password        PasswordChar         Style   StaticResource FormTextBox    gt    But PasswordBox doesn t have a Text property

User · Accepted Answer

To get or set the Password in a PasswordBox, use the Password property. Such as

string password = PasswordBox.Password;

This doesn't support Databinding as far as I know, so you'd have to set the value in the codebehind, and update it accordingly.

User · Answer

Thanks Cody  that was very helpful  I ve just added an example for guys using the Delegate Command in C    lt PasswordBox x Name  PasswordBox               Grid Row  1  Grid Column  1               HorizontalAlignment  Left                Width  300  Height  25               Margin  6 7 0 7    gt   lt Button Content  Login          Grid Row  4  Grid Column  1          Style   StaticResource StandardButton           Command   Binding LoginCommand           CommandParameter   Binding ElementName PasswordBox           Height  31  Width  92          Margin  5 9 0 0    gt     nbsp   public ICommand LoginCommand      get              return new DelegateCommand lt object gt   args    gt                           Get Password as Binding not supported for control-type PasswordBox             LoginPassword     PasswordBox  args  Password                  Rest of code here

User · Answer

You can make your TextBox as customed PasswordBox by simply adding the following value to FontFamily property of your TextBox control     lt TextBox     Text   Binding Password       FontFamily  ms-appx    Assets PassDot ttf PassDot      FontSize  35   gt    In my case this works perfectly  This will show dot in place of the actual text  not star    though

User · Answer

There s a way to bind on a PasswordBox here  PasswordBox Databinding

User · Answer

I did the below from the Views codebehind to set my property within the view model  Not sure if it really   breaks  the MVVM pattern but its the best and least complexe solution  found     var data   this DataContext as DBSelectionViewModel           data PassKey   txtPassKey Password

User · Answer

The problem with using the PasswordBox is that it is not very MVVM friendly due to the fact that it works with SecureString and therefore requires a shim to bind it to a String  You also cannot use the clipboard  While all these things are there for a reason  you may not require that level of security  Here is an alternative approach that works with the clipboard  nothing fancy  You make the TextBox text and background transparent and bind the text to a TextBlock underneath it  This textblock converts characters to   using the converter specified    lt Window Resources gt       lt local TextToPasswordCharConverter x Key  TextToPasswordCharConverter    gt   lt  Window Resources gt    lt Grid Width  200  gt       lt TextBlock Margin  5 0 0 0  Text   Binding Text  Converter  StaticResource TextToPasswordCharConverter   UpdateSourceTrigger PropertyChanged  Mode OneWay   FontFamily  Consolas  VerticalAlignment  Center    gt       lt TextBox Foreground  Transparent  Text   Binding Text  UpdateSourceTrigger PropertyChanged   FontFamily  Consolas  Background  Transparent    gt   lt  Grid gt    And here is the Value Converter   class TextToPasswordCharConverter   IValueConverter       public object Convert object value  Type targetType  object parameter  CultureInfo culture                return new String      value  ToString   Length    0              public object ConvertBack object value  Type targetType  object parameter  CultureInfo culture                throw new NotImplementedException              Make sure your Text property on your viewmodel implements INotifyPropertyChanged

User · Answer

As Tasnim Fabiha mentioned  it is possible to change font for TextBox in order to show only dots asterisks  But I wasn t able to find his font   so I give you my working example    lt TextBox Text   Binding Password         FontFamily  pack   application     Resources  password    gt    Just copy-paste won t work  Firstly you have to download mentioned font  password ttf  link  https   github com davidagraf passwd blob master public ttf password ttf Then copy that to your project Resources folder  Project- Properties- Resources- Add resource- Add existing file   Then set it s Build Action to  Resource   After this you will see just dots  but you can still copy text from that  so it is needed to disable CTRL C shortcut like this    lt TextBox Text   Binding Password         FontFamily  pack   application     Resources  password   gt        lt TextBox InputBindings gt           lt  --Disable CTRL C -- gt           lt KeyBinding Command  ApplicationCommands NotACommand              Key  C              Modifiers  Control    gt       lt  TextBox InputBindings gt   lt  TextBox gt

User · Answer

Send the passwordbox control as a parameter to your login command     lt Button Command   Binding LoginCommand   CommandParameter   Binding ElementName PasswordBox      gt    Then you can call CType parameter  PasswordBox  Password in your viewmodel

[c#] How can I make a TextBox be a "password box" and display stars when using MVVM?

Examples related to c#

Examples related to wpf

Examples related to xaml

Examples related to mvvm

Examples related to textbox