programing

MVVM을 사용할 때 TextBox를 "비밀번호 상자"로 만들고 별을 표시하는 방법은 무엇입니까?

nicescript 2023. 4. 22. 22:59
반응형

MVVM을 사용할 때 TextBox를 "비밀번호 상자"로 만들고 별을 표시하는 방법은 무엇입니까?

XAML에서 이 작업을 수행하려면 어떻게 해야 합니다.

의사 코드:

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

사용자가 암호를 입력할 때 별이나 점을 볼 수 있도록 합니다.

Password Char와 Password Box를 제안하는 다양한 예를 시도해 봤지만 제대로 작동하지 않습니다.

예: 다음과 같이 할 수 있습니다.

<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 속성이 없습니다.

PasswordBox에서 암호를 가져오거나 설정하려면 Password 속성을 사용합니다.예를 들어

string password = PasswordBox.Password;

이것은 Databinding을 지원하지 않기 때문에 코드 뒤에 값을 설정하고 그에 따라 업데이트해야 합니다.

Tasnim Fabiha가 언급했듯이 TextBox 글꼴을 변경하여 점/별표만 표시할 수 있습니다.하지만 그의 폰트를 찾을 수 없었어요...제 작업 예를 들어 보겠습니다.

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

복사 붙여넣기만 하면 안 돼요.먼저 위의 글꼴 "password.ttf" 링크를 다운로드해야 합니다.https://github.com/davidagraf/passwd/blob/master/public/ttf/password.ttf then copy to 、 [ Project ]- > [ Properties ]- > [ Resources ]- > [ Add Resources ]-> [ Add existing file ])폴더에 복사합니다.그런 다음 빌드 작업을 리소스로 설정합니다.

이렇게 하면 점만 표시되지만 여기서 텍스트를 복사할 수 있으므로 다음과 같이 CTRL+C 바로 가기를 비활성화해야 합니다.

<TextBox Text="{Binding Password}" 
     FontFamily="pack://application:,,,/Resources/#password" > 
    <TextBox.InputBindings>
        <!--Disable CTRL+C (COPY) -->
        <KeyBinding Command="ApplicationCommands.NotACommand"
            Key="C"
            Modifiers="Control" />
        <!--Disable CTRL+X (CUT) -->
        <KeyBinding Command="ApplicationCommands.NotACommand"
            Key="X"
            Modifiers="Control" />
    </TextBox.InputBindings>
    <TextBox.ContextMenu>
        <!--Hide context menu where you could copy/cut as well -->
        <ContextMenu Visibility="Collapsed" />
    </TextBox.ContextMenu>
</TextBox>

편집: @CodingNinja 코멘트에 따라 Ctrl+X와 컨텍스트메뉴 디세이블을 추가했습니다.감사합니다.

로그인 명령어에 파라미터로 패스워드 박스컨트롤을 송신합니다.

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

그럼 전화하세요CType(parameter, PasswordBox).Password참조할 수 있습니다.

고마워요, 코디. 정말 도움이 됐어요.방금 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
        });
   }
}

Password Box에 바인드하는 방법은 다음과 같습니다. Password Box Databinding

당신은 할 수 있다.TextBox커스텀대로PasswordBox다음과 같은 가치를 추가하는 것만으로FontFamily소유물TextBox통제.

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

내 경우엔 이게 완벽하게 작동한다.이렇게 하면 실제 텍스트 대신 점이 표시됩니다(별(*)이 아닙니다).

Password Box를 사용할 때의 문제는 Secure String과 함께 작동하기 때문에 MVVM에 그다지 친숙하지 않다는 것입니다.따라서 Password Box를 String에 바인드하기 위해서는 심이 필요합니다.클립보드도 사용할 수 없습니다.이러한 모든 것은 이유가 있지만, 그러한 수준의 보안은 필요하지 않을 수 있습니다.다음은 클립보드로 사용할 수 있는 다른 접근법입니다. 화려하지 않습니다.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>

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

뷰 모델의 텍스트 속성이 Inotify를 구현하는지 확인합니다.속성 변경

뷰 모델 내에서 속성을 설정하기 위해 뷰 코드 뒤에서 다음을 수행했습니다.MVVM 패턴을 정말로 「파괴」할지는 모르지만, 지금까지 발견된 솔루션 중 가장 우수하고 복잡하지 않은 솔루션입니다.

  var data = this.DataContext as DBSelectionViewModel;

        data.PassKey = txtPassKey.Password;

간단한 해결 방법은 텍스트 상자를 Local Password에 바인딩하는 것입니다. Local Password는 *를 반복하는 변환된 값을 표시합니다.모든 엔트리는 _localPassword 변수에 저장됩니다.

<TextBox Text="{Binding LocalPassword}" />

private string _localPassword = null;
private string _localPasswordDisplayed { get => new string('*', _localPassword.Length); }
public string LocalPassword { get => _localPasswordDisplayed; set { _localPassword = value; OnPropertyChanged(); } }

언급URL : https://stackoverflow.com/questions/1119605/how-can-i-make-a-textbox-be-a-password-box-and-display-stars-when-using-mvvm

반응형