Put a View Control in its ViewModel

Question

I'm developing a Windows 8.1 Store app with C# and .Net Framework 4.5.1.

I'm trying to bind Password.SecurePassword to a ViewModel, and reading this SO answer I found a way to do it: Put the PasswordBox in my ViewModel.

But I don't know how to do it. I know how to bind Dependency Properties, but I don't know how to put that control on my ViewModel. This is my XAML:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    DataContext="{Binding MainViewModel, Source={StaticResource Locator}}"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <PasswordBox x:Name="userPassword" />
    </Grid>
</Page>

What do I have to do?

Answer 1

You have several options but I'll just give you the basic option without third party libraries.

In your Page constructor. You can do something like this.

public Page()
{
  var mainViewModel = this.DataContext as MainViewModel;
  if(mainViewModel != null)
  {
    mainViewModel.PasswordBox = userPassword;
  }
}

You can also set it on the Loaded event of the View and set the PasswordBox to the ViewModel.