Blog o programowaniu w Silverlight i nie tylko.: 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