Question

I have a user control in which I want an overlay that I can toggle on/off, this overlay will just contain some guidance for user.

Can someone tell me how I go about creating a overlay?

Answer 1

The simplest way to do this is to place content into a Grid control like such

<Grid>
    <StackPanel>
        <-- Some items -->
    </StackPanel>
    <Grid x:Name="Overlay" Visibility="Collapsed">
        <Grid.Background>
            <SolidColorBrush Color="Black" Opacity=".5"/>
        </Grid.Background>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="This is an overlay!"/>
        </StackPanel>
    </Grid>
</Grid>

This works because the “inside” Grid will fill the entire area of the “outside” Grid. Then you can change the visibility of the overlay by changing it’s visibility. you can do this either in code:

Overlay.Visibility = Visibility.Visible;

Or in xaml by using a ValueConverter like in this post