Geeks With Blogs
Light Up the Web Blog about programming in Silverlight

This time I would like to show, how to create full screen in Silverlight 2.0 RTW. Changing application to full screen using only "Application.Current.Host.Content.IsFullScreen" is nothing special because only web browser's window is changing. Our application, have still the same size like before switching to full screen state.

So how to resize application, so it will change simultaneously with web browser? Solution is very simple and all we have to do is use transformations.

Let's start with simple full screen. To switch to full screen mode we have to run only this code:

Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
Now, we can add button to invoke code above.

Page.xaml:

<Button Content="Full Screen" Click="Button_Click" />

Page.xaml.cs:

private void Button_Click(object sender, RoutedEventArgs e)

{

 Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;

}

If you run your application now, you will see that full screen is already working and you can switch views by pushing the button.

So we have full screen but our application still have the same size.. Let's do something with that.

First we have to add ScaleTransform in Page.xaml code:

 <Grid.RenderTransform>
<
ScaleTransform ScaleX="1" ScaleY="1" x:Name="RootLayoutScaleTransform" />  </Grid.RenderTransform>

 

and then some code in Page.xaml.cs. In constructor we have to remember original size

    double _oldHeight, oldWidth;

  _oldHeight = this.Height;
  _oldWidth = this.Width;

 

 and add some methods to work with resize and full screen events

Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_Resized);

void Content_Resized(object sender, EventArgs e)
{
double currentWidth = Application.Current.Host.Content.ActualWidth;
double currentHeight = Application.Current.Host.Content.ActualHeight;

double uniformScaleAmount = Math.Min((currentWidth / _oldWidth), (currentHeight / _oldHeight));
RootLayoutScaleTransform.ScaleX = uniformScaleAmount;
RootLayoutScaleTransform.ScaleY = uniformScaleAmount;

}

FIN, our application is ready! It can resize with Web Browser's window and also when we turn on/off full screen mode.

But what happen if we use mouse and we have to read coordinates? Mouse’s coordinates are now not scaled, so all we have to do, is divide these points by our variable ”uniformScaleAmount”.

double currentY = e.GetPosition(null).Y / uniformScaleAmount;
double currentX = e.GetPosition(null).X / uniformScaleAmount;

Constraints

I would like to add, that we have also few constraints. Namely, code above ( ..IsFullScreen != ..IsFullScreen) can be used only in event handler, invoked by user. So we can change application to full screen mode, only by clicking mouse on something or by pressing key on keyboard. This is because of security reasons. None of us, want to see advertisement, created in Silverlight, which will appear all the time and always in full screen mode ;)

Another constrains are keyboard and mouse functionalities in full screen mode, which are reduce to only:

  • arrows keys and space bar on keyboard
  • mouse buttons (even mouse wheel doesn't work!)

The last one is really "pain in my ass", because then applications written in Deep Zoom Composer in full screen mode, do not have zoom functionality. We can add keys to zoom but this is not the same fun like with mouse!

You can find more about constraints in MSDN link.

 

FIN

OK, now we have all that we can imagine. Our solution is simple and it can be easily applied to every application. It will be nice and very useful feature in every project.

Source code:   source code

Working demo:    play demo (Resize window and click on button!)

Resize me and click on me!

 

Working Example (Resize it or turn on Full Screen mode)

Silverlight Solitaire

You can play it in small window, so nobody will see you in work :]

Resources

  • Mike Snows's blog link
  • Jeff Blankenburg's blog link

Polish version of this article
 
Sorry for my English. I hope you can understand it. :P
Jacek Ciereszko
polish blog: http://jacekciereszko.pl/

 

kick it on DotNetKicks.com

 

Posted on Tuesday, June 10, 2008 1:31 AM | Back to top

Copyright © Jacek | Powered by: GeeksWithBlogs.net | Join free