Full Screen aplikacji w Silverlight 2.0 RTW

Jak zrobić full screen w Silverlight 2.0 RTW chyba każdy już wie, gdyż rozwiązanie nie różni się niczym od poprzednich wersji. Jednak samo wprowadzenie aplikacji w stan pełnego ekranu nie daje nam powiększenia aplikacji, tylko schowanie ramki przeglądarki oraz paska stanu. Nasza aplikacja jak była, tak i dalej ma ten sam rozmiar.

No wiec jak zmienić rozmiar aplikacji, aby powiększała się wraz z oknem przeglądarki? Rozwiązanie jest dość proste, wystarczy wykorzystać możliwości, jakie dają nam transformacje oraz grafika wektorowa.

Zacznijmy jednak od prostego full screena. Aby przełączyć aplikację w stan pełnego ekranu, wystarczy ze wywołamy:

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

Teraz dodamy do aplikacji przycisk oraz w metodzie click wywołamy w/w linie kodu.

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;
}

Odpalamy aplikacje i "włala"! Full Screen działa, czas na resize aplikacji. Aby wykonać poprawnie resize i móc wrócić do poprzedniego stanu, musimy dodać zmienną transformacji do głównej canvy/grida aplikacji.

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

Należy także pamiętać o oryginalnym rozmiarze aplikacji

_oldHeight = this.Height;

_oldWidth = this.Width;

oraz dodać obsługę eventu zmiany rozmiaru aplikacji oraz full screenu, w których to funkcjach robimy wszystkie przekształcenia:

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;
} 

Jeśli używamy myszki i zczytujemy jej współrzędne w aplikacji, np. do przeciągania obiektów itd. wtedy należy pamiętać o przeliczaniu wartości współrzędnych przez naszą zmienną transformacji uniformScaleAmount.

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

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

Ograniczenia

Chciałem jeszcze tylko dodać, że aby zmień tryb aplikacji na pełny ekran, powyższe komendy należy wykonać z metody obsługi eventa. Powodem takich ograniczeń jest nasze bezpieczeństwo. Chyba nikt nie chce widzieć Silverlightowych banerów, które otwierają się same na pełny ekran i nie chcą się schować ;)

Kolejnym ograniczeniem w stanie full screen jest używanie klawiatury oraz myszki. W trybie pełnego ekranu, mamy tylko dostęp do:

• strzałek oraz spacji na klawiaturze

• przycisków myszki (kólko, tzw. mouse wheel, nie działa w trybie pełnego ekranu)

Co do tego ostatniego, to mam tylko uwagi pod kątem Deep Zoom Composera, gdzie mouse wheel jest używana i bez kółeczka to już nie ta sama zabawa!!!

Więcej na temat ograniczeń znajdziecie w MSDNie link.

To wszystko co do full screen-a oraz resize okna w Silverlight 2.0 RTW. Rozwiązanie jest proste i łatwo jest je wstawić do większości aplikacji. Zajmie nam to chwile, a otrzymujemy nową i ciekawą funkcjonalność.

Source code aplikacji:

source code

Działające demo:

Wciśnij przycisk żeby przejść w tryb pełnego ekranu. Rozciągnij okno, żeby zobaczyć resize aplikacji.

play demo

Resources

• Blog Mike-a Snows-a link
  
• Blog Jeffa Blankenburga link
  

english version -> link

Pozdrawiam,
Jacek Ciereszko