How do I add overlay on particular container control?

Please post public support tickets here. Note: for private support tickets, please send an email to support@cshtml5.com instead.
njs123
Posts: 25
Joined: Sun Dec 25, 2016 11:10 pm

How do I add overlay on particular container control?

Postby njs123 » Tue Jan 10, 2017 12:47 am

How do I add overlay on particular container control?

e.g. I have a grid and it contains a textbox
now I want to add overlay on that grid and show some message, the contents of the grid being hidden,

How this can be achieved?

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: How do I add overlay on particular container control?

Postby JS-Support @Userware » Tue Jan 10, 2017 6:26 am

Hi,

You can see an example in the sample "Showcase" application: the initial "Welcome" screen is an overlay of the underlying elements. To view the "Showcase" sample, open Visual Studio and click "File" => "New" => "Project" => "C#/XAML for HTML5" => "Sample Controls Showcase".

The way to achieve this is to put a surrounding Grid with only 1 cell, and then add a child to that Grid. When you add a child to a Grid that has only one cell, the child takes the whole size of the grid, thus hiding the underlying Grid content.

Please feel free to let me know if it is not very clear.

Regards,
JS-Support

njs123
Posts: 25
Joined: Sun Dec 25, 2016 11:10 pm

Re: How do I add overlay on particular container control?

Postby njs123 » Wed Jan 11, 2017 3:54 am

Thanks for your reply.

How to add overlay on existing grid or panel?

e.g.
I have a grid/panel which contains certain controls and I want to add overlay on that grid

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: How do I add overlay on particular container control?

Postby JS-Support @Userware » Wed Jan 11, 2017 10:32 am

Hi,

Let's assume you have the following XAML:

Code: Select all

<Grid x:Name="This_is_your_original_panel">
   (...)
</Grid>


You can display an overlay by surrounding the original panel using another Grid, in which you add the overlay element, like this:

Code: Select all

<Grid>

   <Grid x:Name="This_is_your_original_panel">
      (...)
   </Grid>

   <Border x:Name="This_is_the_overlay" Opacity="0.5" Background="White">
       <TextBlock Text="This is the content of the overlay" HorizontalAlignment="Center" VerticalAlignment="Center"/>
   </Border>
</Grid>


Regards,
JS-Support


Return to “Technical Support”

Who is online

Users browsing this forum: No registered users and 39 guests

 

 

cron