屏蔽WPF ListView / GridView中列的内容

Question

I have a WPF ListView that is bound to an ObservableCollection of Employee objects. My XAML looks like this:

<ListView x:Name="myListView" ItemsSource="{Binding Employees}">
    <ListView.View>
        <GridView AllowsColumnReorder="False">
            <GridViewColumn DisplayMemberBinding="{Binding EmployeeName}" Width="175">
                <GridViewColumnHeader Content="EmployeeName"/>
            </GridViewColumn>
            <GridViewColumn DisplayMemberBinding="{Binding EmployeeID}" Width="125">
                <GridViewColumnHeader Content="EmployeeID"/>
            </GridViewColumn>
            <GridViewColumn DisplayMemberBinding="{Binding EmployeeSecretCode}" Width="125">
                <GridViewColumnHeader Content="EmployeeSecretCode"/>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

I need to display the EmployeeSecretCode column but I'd like to mask the contents of it either fully or partially. So instead of displaying the actual code (let's say 12345), I'd either like to display ***** (since 12345 is 5 digits) or alternatively, ******** (since the max size of the code is 8 digits). Is there an easy way to do this?

Answer 1

A simple example of achieving this requirement with an IValueConverter

internal class MyConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    var input = value.ToString();
    // change "input.Length" in the following line to 8 if you just want 8 "*" regardless of length
    return new String('*', input.Length);
  }

  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    throw new NotImplementedException();
  }
}

and xaml:

<ListView x:Name="myListView"
          ItemsSource="{Binding Employees}">
  <ListView.Resources>
    <local:MyConverter x:Key="MyConverter" />
  </ListView.Resources>
  ...
      <GridViewColumn Width="125"
                      DisplayMemberBinding="{Binding EmployeeSecretCode,
                                                      Converter={StaticResource MyConverter}}">
        <GridViewColumnHeader Content="EmployeeSecretCode" />
      </GridViewColumn>
    </GridView>
  </ListView.View>
</ListView>

Note:

Do consider the security implications of such implementations in the UI. Using an application like Snoop one can easily get the DataContext and thereby the actual value you're masking here. Thereby this is merely a UI mask and does not offer anything in terms of viable security(actually it adds a weak link cos the unsafe value is exposed to the UI Views).

If that is something you are indeed considering then keep the "actual" value in your Model/back-end encrypted/protected in whichever way you see fit and only give the View the masked data in it's property. This will then mean, even if someone uses a snoop like app, all they would get from the DataContext would be " * " and not the actual secret value.