locked
Toggle Full Screen Button in Sketchflow Project RRS feed

  • Question

  • Hi,

     

    I want to include a fullscreen toggle button (i.e. activating the browser fullscreen mode) in my Sketchflow demo to a client.

    I am a total newb though so really need a step by step guide on how to do this (i've looked online for a while but not found anything simple enough).

    Would any of you kind fellows be able to help?

     

     

    Thursday, September 30, 2010 2:00 PM

Answers

  • Oh ok....  Something like this then:

    private void Go(object sender, System.Windows.RoutedEventArgs e)
    		{
    			Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
    		}
    

     

    • Proposed as answer by Chuck HaysModerator Thursday, September 30, 2010 4:38 PM
    • Marked as answer by mcgeeza Thursday, September 30, 2010 4:44 PM
    Thursday, September 30, 2010 4:38 PM
    Moderator

All replies

  • In a click handler on your button:

      private void GoFullscreen(object sender, System.Windows.RoutedEventArgs e)
        {
          Application.Current.Host.Content.IsFullScreen = true;
        }
    

     

    <Button Content="Button" HorizontalAlignment="Left" Margin="145,177,0,224" Style="{StaticResource Button-Sketch}" Width="148" Click="GoFullscreen"/>
    

    This can only be done in response to user input, such as in a button click handler.

    Thursday, September 30, 2010 2:39 PM
    Moderator
  • Hi Chuck,

     

    Thanks for the quick reply. I am going to have to embarrass myself though. I honestly don't know where to put that code. Any chance you could be more descriptive?

     

    Thanks again.

    Thursday, September 30, 2010 2:44 PM
  • Sure, no problem.

     

    Select the button you want to trigger full screen mode on the artboard, next in the properties panel, find the events section. You will need to click on the icon near the top that has a lightning bolt on it. Find the Click item, and type in a method name (I used GoFullscreen, but the name doesn't matter). Press enter. This will take you to the code editor. It will have a default method with just a TODO comment. Delete the comment and add this line:

       Application.Current.Host.Content.IsFullScreen = true
    ;
    
    Thursday, September 30, 2010 2:59 PM
    Moderator
  • Hi Chuck,

     

    Thank you very much. That works and will be fine for demoing purposes.

     

    One last request though - is it easy to make the button a toggle button (i.e. click the same button again to exit full screen mode) or is that a whole new level of complexity?

    Thursday, September 30, 2010 3:17 PM
  • Only a tiny bit more complicated. You will need to give your togglebutton a name. Select it on the artboard or in the objects panel, then either right click it in the objects panel and select rename, or wait a moment and click it again to enter rename mode. I named mine Button. You can name it whatever you please.

     

    Now in the same place you had the code before, your code should look like the code below. The line that says "this.Button" should match the name you gave your togglebutton. Case is important. You should replace Button with your name. What this code does is check if you just checked or unchecked the toggle button and sets the screen state appropriately. In case you are wondering why you can't just say Application.Current.Host.Content.IsFullScreen = this.Button.IsChecked, it is because the IsChecked property is a Nullable<bool> type that can be true, false or null.

    private void GoFullScreen(object sender, System.Windows.RoutedEventArgs e)
    		{
    			if(this.Button.IsChecked == true)
    			{
    				Application.Current.Host.Content.IsFullScreen = true;
    			}
    			else
    			{
    				Application.Current.Host.Content.IsFullScreen = false;
    			}
    		}
    

    Thursday, September 30, 2010 3:27 PM
    Moderator
  • Hi Chuck,

     

    That's not exactly what I meant. Apologies if I didn't explain myself properly, but I would like a normal button to toggle Full Screen on/off (not a checkbox).

     

    Thanks for your time so far.

     

     

    Thursday, September 30, 2010 3:56 PM
  • Oh ok....  Something like this then:

    private void Go(object sender, System.Windows.RoutedEventArgs e)
    		{
    			Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
    		}
    

     

    • Proposed as answer by Chuck HaysModerator Thursday, September 30, 2010 4:38 PM
    • Marked as answer by mcgeeza Thursday, September 30, 2010 4:44 PM
    Thursday, September 30, 2010 4:38 PM
    Moderator
  • Thank you for all your help Chuck.

     

    That's fantastic.

    Thursday, September 30, 2010 4:45 PM
  • Hi Chuck,

    I tried as you suggested, but it is like:

    Am I missing something?

    Thanks!

    Thursday, April 19, 2012 10:13 PM
  • Are you working with Silverlight or WPF? This code is for Silverlight, if you are creating a WPF app the code would be different.
    Thursday, April 19, 2012 10:22 PM
    Moderator