UserControls w Silverlight i MVVM [WSSG]

Zapraszamy wszystkich chętnych na siódme spotkanie grupy Warsaw Silverlight Study Group (WSSG). Spotkanie rozpocznie się 8 czerwca (wtorek), o godzinie 18:00 w siedzibie firmy Microsoft w Warszawie (al. Jerozolimskie 195A - zobacz na mapie).   

Agenda spotkania:
18:00 – 19:20 Grzegorz Wiśniewski: „Wstęp do tworzenia własnych kontrolek w WPF i Silverlight”;

19:20 – 19:40 Przerwa;
19:40 – 21:00 Michał Korzunowicz: „MVVM – Gdzie? Co? I jak? Na podstawie prostej gry typu shooter ”;

Wtorkowe spotkanie rozpoczniemy od prezentacji Grzegorza, który już od 8 lat zajmuje się rozwojem komercyjnego oprogramowania.  

Tworzenie kontrolek z wykorzystaniem Windows Forms nastręczało bardzo często dużo problemów szczególnie dla początkujących programistów. Możliwości jakie oferuje WPF i Silverlight otwierają drogę do tworzenia rozwiązań efektowych w sposób efektywny. Grzegorz podczas swojej prezentacji postara się przedstawić jak łatwo można uszczegółowić kontrolkę czy w zależności od potrzeb zaprojektować ją od podstaw.

Po przerwie gościć będziemy Michała Korzunowicza, który na co dzień pracuje w firmie Creadhoc, technologią Silverlight interesuję się od 2 lat.

Z prezentacji Michała dowiemy się co powinno znajdować się w każdej części wzorca i jaka jest ich rola. Zobaczymy jak je ze sobą połączyć i przedstawić dane w widoku przy pomocy Data Bindingu.

Strona spotkania: http://ms-groups.pl/wssg/7_spotkanie/

Udział w spotkaniu jest bezpłatny. Wskazana rejestracja (tutorial do rejestracji).

Zapraszamy!

Silverlight Center And Scale Behavior

W ostatnim poście pisałem o tym jak wyśrodkować i skalować aplikację. Tym razem poszedłem o krok dalej i stworzyłem prosty behavior który z łatwością podłączymy do każdej aplikacji i nie musimy modyfikować istniejącego kodu.

Co należy zrobić?
1. Ściągnąć kod bahaviora:  http://gallery.expression.microsoft.com/en-us/CenterAndScale
2. Podłączyć kod do aplikacji:

<usercontrol .....="" ....="" xmlns:behavior="clr-namespace:CenterAncScaleBehavior;assembly=CenterAncScaleBehavior" xmlns:interaction="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">

    <interaction:interaction.behaviors>
        <behavior:centerancscalebehavior>
    </behavior:centerancscalebehavior>

    <grid> ... </grid>
</interaction:interaction.behaviors>
</usercontrol>

3. Gotowe. W 95% aplikacji powinno działać. :]

Jeżeli używacie Microsoft Expression Blend-a, wystarczy przeciągnąć klasę na aplikację (patrz video).

Prezentacja, a więc behavior w akcji (66 sekund)


Prosty przykład działania
Aplikacja bez behaviora:  http://bit.ly/cVinEC
Aplikacja już z podłączonym bahaviorem: http://bit.ly/ba8UsI

Nie bangla?
Behavior powinień działać dla więkoszości aplikacji ale niekoniecznie dla wszystkich. Jeśli macie specyficzne ustawienia, stałe rozmiary dla UserControl itp., to bez zmian w aplikacji niestety skalowanie nie zadziała.

Pozdrawiam,
Jacek Ciereszko

Jak wyśrodkować i skalować aplikację przy użyciu ViewBox-a

Istnieje wiele sposobów na skalowanie i wyśrodkowanie aplikacji Silverlight w przeglądarce. Zwykle używamy dwóch kontrolek typy Grid do pozycjonowania oraz panela (np. Canvy) do skalowania aplikacji.

Takie rozwiązanie może wyglądać np. tak:

<UserControl … >
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Canvas x:Name="scalePanel" VerticalAlignment="Top" HorizontalAlignment="Center">
                …
            </Canvas>
        </Grid>
    </Grid>
</UserControl>

Zaprezentowany sposób przy odpowiednim dopieszczeniu działa bez zarzutów ale można prościej. Jak? Otóż używając kontrolki ViewBox która posiada wewnętrzne mechanizmy skalowania zawartości, a umieszczona w Gridzie, zapewni kompleksowe rozwiązanie.

Dobre rozwiązanie:

<UserControl … >
    <Grid x:Name="LayoutRoot" Background="White">
        <Viewbox>
            ...
        </Viewbox>
    </Grid>
</UserControl>

Jak znaleźć ViewBoxa?

Ci którzy używają Silverlight 4 posiadają kontrolkę ViewBox natywnie wbudowaną i dostępna w każdym typie aplikacji. Natomiast dla aplikacji które zostały stworzone w Silverlight 3, ViewBox jest dostępny w pakiecie Microsoft Silverlight Toolkit.

Demo

Stwórzmy prostą aplikację która będzie zawierać: przycisk, pole tekstowe oraz czerwony kwadrat. Aplikacja będzie posiadała także odpowiedni margines, w postaci: 100 od lewej, 50 od góry, 100 od prawej i 50 od dołu. Na początku aplikacja nie będzie ani skalowana, ani wyśrodkowana:

<UserControl … >
    <Grid x:Name="LayoutRoot">
        <Grid Margin="100, 50, 100, 20">
                <StackPanel Orientation="Horizontal">
                    <Button Width="100" Height="100" Content="test"/>
                    <TextBlock Text="Button" Width="100" Height="100" />
                    <Rectangle Width="100" Height="100" Fill="Red"/>
                </StackPanel>
        </Grid>
    </Grid> 
</UserControl> 

Uruchom demo: RUN

Natomiast jeśli wprowadzimy drobną modyfikację i dodamy kontrolkę ViewBox, otrzymamy pożądany efekt.

<Grid x:Name="LayoutRoot">
        <Viewbox>
            <Grid Margin="100, 50, 100, 20">
                    <StackPanel Orientation="Horizontal">
                        <Button Width="100" Height="100" Content="test"/>
                        <TextBlock Text="bottom" Width="100" Height="100" />
                        <Rectangle Width="100" Height="100" Fill="Red"/>
                    </StackPanel>
            </Grid>
        </Viewbox>
    </Grid>

Uruchom demo: RUN (Zmień wielkość okna żeby zobaczyć skalowanie)
Link do źródeł: SilverlightCenterApplication.zip

References

• ViewBox w Silverlight 3 http://silverlight.codeplex.com/
  

 
Jacek Ciereszko