Clever Geek Handbook

Create an overlay to disable all other form elements

I want to write a user control for entering a new password. This should be visible as a Change Password button in my view, and when the user clicks on that button, it should be replaced with PasswordBox

both buttons Save

and Discard

. When the user clicks the button Save

, the method in DataContext

should be called with the new password as a parameter.

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

.

I'm looking for a hint which way. I think I Adorner

should do this, but I'm new to WPF and don't know if this is correct.

I dont want to create a popup. I want to show it PasswordBox

right where the Change Password button was.

EDIT:

Now it looks like this for me:

<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}}" ... />

PasswordBox

should appear where it is now, but on top of the overlay (and two save and cancel buttons next to it).

+3


source to share


1 answer


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

If you are using canvas or grid in your layout, let the control float on top of 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>
+1


source






More articles:


All Articles