Silverlight – Bring Element to Full Screen

June 5, 2010

18 comments

Update 03/04 – new version to the source to support data context inheritance, thanks grabah. (There is a problem with all of the inherited properties, as the element’s location is changed behind the scenes, I thought it would be useful to support the data context though)

Silverlight includes a Full Screen capability where you can view your application in full screen.

This can be done by setting the “IsFullScreen” property to true –
Application.Current.Host.Content.IsFullScreen = true;

It basically turns your Silverlight application into a full screen view.
You can set it back to false in order to exit the full screen mode. In addition, the user can press the escape key and exit the full screen at any time.

Recently I was involved in a project where the following requirement was presented – Bring specific element within the application onto full screen.

The Silverlight application contained several controls, each having its own full screen mode, consider the following UI –

image

These are two controls which can be practically anything. A real-life example would be media players. Assume you needed to support multi media players and provide the functionality of viewing each in full screen mode.

As mentioning in the beginning, setting the application to full screen is not enough. It will simply display the entire application in full screen, whereas what we really is to display the control itself onto full screen.

The trivial solution that comes into mind is that when the full screen button is pressed in each control, we adjust the UI to include only that control on top of everything and set the application to be in full screen.
That will work, however, it has its issues –

  1. What if we want to package this control? This means we can’t modify the application Ui when the button is pressed since we have no idea where and how this control was placed.
    1. In this case, we may think about raising an event and let the application adjust the UI properly. The problem with that is that the application needs to write a lot of code in order to make our full screen feature work.
  2. This solution is inherently coupled to the UI. changes to the UI structure will require changes to that code as well

Obviously, I wanted to find a better, more encapsulated and reusable solution.
I decided to write a helper class to provide this functionality seamlessly and as simple as:

myControl.ToggleElementFullScreen();

The main design is to move the element to a popup on top of the entire root visual. Obviously, there’s more logic into it such as moving the element, sizing, preserving size-related information since when exiting the full screen requires to move the element back to its original state and position. Plus, I had to take care of when the user exits the full screen using the Escape key.

I’m very happy with the final solution, it is clean, easy and reusable and acts very similar to how the ChildWindow works.

I attached the project, make sure you enter the specific post page in order to see the link.

Things to Note:

  1. My class takes care of placing the element as needed, but it is still your responsibility to make your view stretchable on the entire available size. Otherwise, the element will not fill the entire area.
  2. Since the implementation needs to remove the element from where it is placed and move it to my popup, I currently support that the element can be a child/content of the following: Panel, ContentControl, UserControl, and Popup.

You can find the latest source at this link – BringElementToFullScreen.zip.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

18 comments

  1. SidhuJuly 28, 2010 ב 20:30

    That’s a wonderful idea, and this is what I was looking for. I was always trying to implement the zoom functionality where users can zoom to a particular location, but couldnot get past it.

    Reply
  2. Amir ZukerJuly 28, 2010 ב 21:43

    Thanks Sidhu, I’m glad you liked it.

    One thing though, for zooming purposes, you may want to take a look into using ScaleTransform that will give you finer control over zooming to different levels plus using animation to make it look cool.

    Reply
  3. Lilly HJuly 26, 2011 ב 17:30

    Hello and thank you for your wonderful work!
    I have a question though. On the control I’m zooming I have a fullscreen button that must Toggle the fullscreen. But when in Fullscreen mode the button isn’t working. Do you have idea why is that?

    Reply
  4. Amir ZukerAugust 16, 2011 ב 14:31

    Hi Lilly,

    I’m not sure why you’re experiencing such problems, did you try my sample project?

    Anyway, I don’t mind taking a look if you can prepare a project that demonstrates the issue.
    Simply contact me via the contact form and I’ll reply to you in mail where you can send me the project.

    Reply
  5. ZaradoomDecember 6, 2011 ב 21:16

    I have exactly the same Issue. Your example does work. However if i attach the copy pasted code to my Picture Viewer Grid it goes Fullscreen on click, but does not allow to go back.

    So if you find the issue Lilly had… mind sharing here? 🙂

    Reply
  6. Amir ZukerDecember 7, 2011 ב 10:41

    Hi Zaradoom,

    Please contact me through the contact form where I can reply to you via email and then you could send me a sample project.

    I need to see the problem in order to understand what went wrong 🙂

    Thanks

    Reply
  7. ZaradoomDecember 7, 2011 ב 15:37

    Hi Amir,

    and thanks for the fast responce.
    I digged into the code myself and doublechecked every possibility.

    It turns out that your Description is a LITTLE off. You say you only support 4 types of container for your Popup. That is actually only halve the Story 😉
    I plugged your code into a simple GRID and it worked. It just does not RETURN to the old state.

    The other 4 methods also return to the state once you click on them again.

    I was unable to find out WHY this happenes tho. Why would toggling Fullscreen and Popon ON work… but not off?

    Reply
  8. Amir ZukerDecember 8, 2011 ב 23:55

    Zaradoom,

    The sample uses Grid as the container, and it returns fine from the full screen display.

    There is a bit of synchronization code that is responsible for returning the object back to its original state, perhaps in your scenario it is missing something.

    I can help you figure it out if you send me a showcase of the problem. If you like that, contact me through the contact form, I’ll reply, and then you could send me the project.

    Reply
  9. grabahMarch 30, 2012 ב 17:34

    Hi.
    I have application that uses Navigation template project from vs2010. Toggling full screen throws navigation invalid uri error. (btw It works if i use normal silvelright application)
    Is there a way this could be fixed?

    Reply
  10. grabahMarch 30, 2012 ב 17:36

    also one more thing, its nor really a biggie but in full screen mode control looses its data context.

    Reply
  11. Amir ZukerApril 3, 2012 ב 14:27

    Hi Grabah,

    Please check the latest source, I update the code to support inherited DataContext.

    Regarding the navigation, I tried it myself and didn’t receive an error.

    You can comment here the bits to reproduce it if it’s simple, otherwise you can use the contact form and I’ll reply to you so you can send me a sample project.

    Reply
  12. AndreiMay 18, 2012 ב 10:54

    Hi.
    Great article and very useful, too.
    I want to ask you a couple of questions related to the code:

    1. I have a UserControl with the next layout:








    The problem that I have is that the chartControl will not stretch in full screen event if there is a lot of space to stretch.
    I put it a MinHeight to 150 to be able to see it in a good size in normal mode, and I thought that it would know to stretch itself in full screen.
    Do you know what else should I add in order to allow the chart to stretch ?

    Thanks.

    Reply
  13. Amir ZukerMay 20, 2012 ב 10:24

    Hi Andrei,

    I’m not familiar with the chart control you’re using, but the problem can be because of two reasons –

    1) The chart control can’t be stretched as you say. Try setting HorizontalAlignment / VerticalAlignment / HorizontalContentAlignment / VerticalContentAlignment to ‘Stretch’ and see if it affects it in any way. If not, perhaps you should read in the vendor’s forums or contact their support on how to do that.

    2) The layout itself isn’t stretched. Make sure the layout can be stretched – you can give a background color to the border and see that it fills the entire area

    Hope that helps

    Reply
  14. NingJuly 10, 2013 ב 22:04

    Hi,

    Thanks for this great tools.

    I am trying to make a page with PivotViewer go full screen with your class. However when it goes full screen, the trader cards in PivotViewer is not responsive to any Click events, may I know how to solver this problem.

    Thanks.

    Reply
  15. FarukhSeptember 24, 2014 ב 17:52

    Hello,

    Thanks for the piece of code, it really helped.

    I am using that code with my video player. When I try to make my player in full screen it restart the video, Also when we press escape again video restarts. Full screen functionality is working very well but video doesn’t keep the position. Can you help me with that ?

    Reply
    1. ZukerSeptember 28, 2014 ב 18:53

      Farukh, if I understand correctly, you need to edit the code that preserves and applies state before and after a transition.

      If you like, you can use the contact form and I’ll email you back, so you to send me a sample showcase project and I’ll see if I can quickly add the support to it.

      Reply
      1. FarukhFebruary 4, 2015 ב 9:37

        When I keep the states for large videos it takes lot of time to relocate the position and buffering starts again. I want smooth transition between full and small screens..

        Reply
        1. ZukerFebruary 4, 2015 ב 20:25

          Farukh, I’m not sure what takes so long so I guess you would need to check things out and determine if it can be improved.

          In regards to the video position reset, I guess you would need to wire up some code that maintains the position.
          Perhaps the video control itself exposes some functionality in that matter as well, worth a check.

          Sorry that I can’t add much in this case, it’s a specific case that might require specific handling.

          Reply