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

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;