Creating an overlay to disable all other form elements

Question

I want to write a user control to enter a new password. This should be visible as a button "Change password" in my view and when the user clicks on that button, it should be replaced by a PasswordBox and the two buttons Save and Discard. When the user clicks the Save button a method in the DataContext should be called with the new password as parameter.

My problem is, that there also must be something like an overlay, that disables the rest of the view, when the password user control is in the "change password state" and that I have to show a vitual keyboard below on that overlay below the PasswordBox.

I'm looking for a hint, which way to go. I think an Adorner should do this, but I'm new to WPF and don't know, if thats't the right way.

I don't want to create a popup. I want to show the PasswordBox right there, where the "Change password" button has been.

EDIT:

Right now, I have it like this:

<TextBlock Grid.Column="0" Grid.Row="2" Text="{lex:LocText Password}"/>
<Button Grid.Column="2" Grid.Row="2" Visibility="{Binding IsPasswordBoxVisible, Converter={StaticResource NegatedBooleanVisibilityConverter}}" Command="{Binding ShowPasswordBoxCommand}" Content="{lex:LocText SetNewPassword}"/>
<PasswordBox Grid.Row="2" Grid.Column="2" Visibility="{Binding IsPasswordBoxVisible, Converter={StaticResource BooleanVisibilityConverter}}" ... />

The PasswordBox should appear at the same place, where it is now, but on top of an overlay (and with two buttons "save" and "cancel" next to it).

Answer 1

This takes attached property Panel.ZIndex to place the "Overlay" on top of everything else. You can either set the Visibility of the "Overlay" in code or use a DataTrigger.

If you are using a Canvas or Grid in your layout, give the control to be put on top a higher ZIndex

<Grid x:Name="Overlay" Panel.ZIndex="1000" Visibility="Collapsed">
    <Grid.Background>
      <SolidColorBrush Color="Black" Opacity=".5"/>
    </Grid.Background>

    <!-- Add controls as needed -->
  </Grid>

  <!-- Use whatever layout you need -->
  <ContentControl x:Name="MainContent" />

</Grid>

Updated Code:

 <Grid x:Name="Overlay" Panel.ZIndex="9999" Visibility="Visible">
            <Grid.Background>
                <SolidColorBrush Color="Black" Opacity=".25"/>
            </Grid.Background>           
            <Grid Height="100" Width="300" Background="WhiteSmoke">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*"/>
                    <ColumnDefinition Width="5*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="5*"/>
                    <RowDefinition Height="5*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="Password" Width="120" Height="50"/>
                <PasswordBox Grid.Column="1" Width="120" Height="30"/>
                <Button Grid.Row="1" Grid.Column="1" Margin="5" Content="Submit"/>                
            </Grid>
        </Grid>

        <!-- Use whatever layout you need -->
        <ContentControl x:Name="MainContent" />

    </Grid>