Pokazywanie postów oznaczonych etykietą full screen. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą full screen. Pokaż wszystkie posty

czwartek, 26 czerwca 2008

Materiały z sesji „Nowości w Silverlight 2.0” na wg-net (www.wg.net.pl)

W dniu 26-06-2008 miałem zaszczyt poprowadzić wykład na temat Silverlight-a 2.0. Wykład trwał około godziny i (mam nadzieje) zawarł podstawowe informacje o używanych narzędziach do pracy z Silverlightem oraz krótkie demo bazujące na znanym przykładzie aplikacji "Hello World". Głównym celem sesji, było zapoznanie słuchaczy z tematyką Silverlight-a i pokazanie kilka "bajerów", które zachęcą ich do samodzielnego zapoznania się z tą technologią.



Czy się udało oraz czy poprowadzona sesja spodobała się Wam, okaże się w ankiecie ;) A teraz czas na materiały z wykładu.

Sesja składała się z kilku slajdów i dwóch dem:

Slajdy w postaci Deep Zoom Composera


Prezentacja (odpalać w IE, w pełnym ekranie od wersji SL 2.0 Beta 2 nie działa Mouse Whell ;) )

Demo 1

Pierwsze demo


Demo 2

Drugie demo

Filmik nagrany w trakcie spotkania


Download

Zapraszam do wypełnienia ankiety ze spotkania link. Wyniki jej, pozwolą określić, jakie błędy robię oraz czy chcecie abym w przyszłości "wystąpił" przed wami ponownie.



p.s. a Ci co wyszli z mojej prezentacji na mecz i tak w pierwszej połowie bramki nie zobaczyli (Hiszpania poczekała ) :P

p.s.2 kto robił zdjęcia? Jak fajne to proszę o podesłanie, załączę do wpisu no i chciałbym mieć sobie na pamiątkę :)

Pozdrawiam i dziękuje wszystkim przybyłym,
Jacek Ciereszko

wtorek, 10 czerwca 2008

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