How to create a help transparent screen overlay similar to iOS ?

Question

I want to create a help screen overlay image that shows the user how to use the application ,how can i archive that ? It should be similar to this 

---

19karabo91

Answer 1

You can use a full-screen popup control for this:

<Grid>
    <!-- Your app content here -->
    <!-- ... -->

    <!-- Help Page -->
    <Popup x:Name="HelpPage"
            IsOpen="False">
        <Grid x:Name="HelpRoot"
                Background="Red"
                Opacity=".5"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch">
            <TextBlock Text="Help" />
            <Button Content="Close"
                    Click="Help_Closed"
                    Height="100"
                    Width="200"
                    Background="White"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Right"
                    Margin="40" />
        </Grid>
    </Popup>
</Grid>

It contains you help text and a button and it's made transparent by the Opacity property. Here's the click handler for the button:

private void Help_Closed(object sender, RoutedEventArgs e)
{
    this.HelpPage.IsOpen = false;
}

Here's how to open the popup and make it full-screen:

var bounds = Window.Current.Bounds;
this.HelpRoot.Width = bounds.Width;
this.HelpRoot.Height = bounds.Height;
this.HelpPage.IsOpen = true;

Answer 2

That's actually what i was looking for thanks Diederik ,but how am i going to add the text and arrows to be proportional to the contents of the UI ? 

---

19karabo91

Answer 3

If your UI is Grid based, then you can use the same structure for the help page. If not, then you might need to get the position of some of the main items programmatically. Here's a useful calculation to get the absolute top left point of an element:

UIElement element = this.WhatEverNamedXamlElement;
var transform = element.TransformToVisual(Window.Current.Content);
Point screenCoordinates = transform.TransformPoint(new Point(0, 0));

Answer 4

Thank you sir u've been a great help i appreciate the effort .

---

19karabo91