Как сделать TextBox «паролем» и отображать звездочки при использовании MVVM?

Question

Как я могу сделать это в XAML:

псевдокод:

<TextBox Text="{Binding Password}" Type="Password"/>

, чтобы пользователь видел звездочки или точки при вводе пароля.

Я пробовал различные примеры , которые предлагают PasswordChar и PasswordBox , но не могут заставить их работать.

например. Я могу сделать это, как показано здесь :

<PasswordBox Grid.Column="1" Grid.Row="1"
    PasswordChar="*"/>

но я, конечно, хочу привязать свойство Text к моей ViewModel, чтобы я мог отправлять значение привязанного TextBox при нажатии кнопки (не работает с кодом позади), я хочу сделать это:

<TextBox Grid.Column="1" Grid.Row="0" 
    Text="{Binding Login}" 
    Style="{StaticResource FormTextBox}"/>
<PasswordBox Grid.Column="1" Grid.Row="1"
    Text="{Binding Password}" 
    PasswordChar="*"
    Style="{StaticResource FormTextBox}"/>

Но у PasswordBox нет свойства Text.

Answer 1

Чтобы получить или установить пароль в PasswordBox, используйте свойство Password. Такие как

string password = PasswordBox.Password;

Насколько я знаю, это не поддерживает привязку данных, поэтому вам придется установить значение в коде и соответствующим образом обновить его.

Answer 2

Отправьте элемент управления паролем в качестве параметра вашей команде входа.

<Button Command="{Binding LoginCommand}" CommandParameter="{Binding ElementName=PasswordBox}"...>

Тогда вы можете позвонить CType(parameter, PasswordBox).Password в вашей модели просмотра.

Answer 3

Есть способ привязки к PasswordBox здесь: PasswordBox Привязка данных

Answer 4

Спасибо, Коди, это было очень полезно. Я только что добавил пример для парней, использующих команду Delegate в C #

<PasswordBox x:Name="PasswordBox"
             Grid.Row="1" Grid.Column="1"
             HorizontalAlignment="Left" 
             Width="300" Height="25"
             Margin="6,7,0,7" />
<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" />

public ICommand LoginCommand
{
   get
   {
        return new DelegateCommand<object>((args) =>
        {
            // Get Password as Binding not supported for control-type PasswordBox
            LoginPassword = ((PasswordBox) args).Password;

            // Rest of code here
        });
   }
}

Answer 5

Как упоминал Тасним Фабиха, можно изменить шрифт для TextBox, чтобы отображать только точки / звездочки. Но я не смог найти его шрифт ... поэтому приведу свой рабочий пример:

<TextBox Text="{Binding Password}" 
     FontFamily="pack://application:,,,/Resources/#password" />

Просто копировать-вставить не получится. Во-первых, вы должны скачать указанный шрифт "password.ttf" ссылка: https://github.com/davidagraf/passwd/blob/master/public/ttf/password.ttf Затем скопируйте это в папку ресурсов вашего проекта (Project-> Properties-> Resources-> Add resource-> Add существующий файл). Затем установите для параметра «Build Action» значение: Resource.

После этого вы увидите только точки, но вы все равно можете скопировать текст из этого, поэтому необходимо отключить сочетание клавиш CTRL + C следующим образом:

<TextBox Text="{Binding Password}" 
     FontFamily="pack://application:,,,/Resources/#password" > 
    <TextBox.InputBindings>
        <!--Disable CTRL+C -->
        <KeyBinding Command="ApplicationCommands.NotACommand"
            Key="C"
            Modifiers="Control" />
    </TextBox.InputBindings>
</TextBox>

Answer 6

Вы можете сделать свой TextBox как обычно PasswordBox, просто добавив следующее значение в FontFamily свойство вашего TextBox элемента управления.

<TextBox
    Text="{Binding Password}"
    FontFamily="ms-appx:///Assets/PassDot.ttf#PassDot"
    FontSize="35"/>

В моем случае это работает отлично. Это покажет точку вместо фактического текста (но не звездочку (*)).

Answer 7

Я сделал ниже из кода Views, чтобы установить мое свойство в модели представления. Не уверен, действительно ли он «ломает» шаблон MVVM, но его лучшее и наименее сложное решение найдено.

  var data = this.DataContext as DBSelectionViewModel;

        data.PassKey = txtPassKey.Password;

Answer 8

Проблема с использованием PasswordBox заключается в том, что он не очень дружественен к MVVM из-за того, что он работает с SecureString и, следовательно, для его привязки к строке требуется прокладка. Вы также не можете использовать буфер обмена. Несмотря на то, что все эти причины существуют, вам может не потребоваться такой уровень безопасности. Вот альтернативный подход, который работает с буфером обмена, ничего особенного. Вы делаете текст TextBox и фон прозрачным и привязываете текст к TextBlock под ним. Этот текстовый блок преобразует символы в *, используя указанный конвертер.

<Window.Resources>
    <local:TextToPasswordCharConverter x:Key="TextToPasswordCharConverter" />
</Window.Resources>

<Grid Width="200">
    <TextBlock Margin="5,0,0,0" Text="{Binding Text, Converter={StaticResource TextToPasswordCharConverter}, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" FontFamily="Consolas" VerticalAlignment="Center" />
    <TextBox Foreground="Transparent" Text="{Binding Text, UpdateSourceTrigger=PropertyChanged}" FontFamily="Consolas" Background="Transparent" />
</Grid>

А вот конвертер значений:

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();
    }
}

Убедитесь, что свойство Text в вашей модели представления реализует INotifyPropertyChanged