Windows Phone 7 Mango: Using Viewbox control

published on: 5/27/2011 | Views: N/A | Tags: Mango

by WindowsPhoneGeek

In this post I am going to talk about the new WP7 Viewbox control. Viewbox  is a well known control in Silverlight 4, so with the recent Windows Phone 7.1(Mango) release it is now available for WP7 as well.

Basically ViewBox takes one child element and automatically stretches or scales it to fit the size of the Viewbox. If does nothing more than scale to fit the content to the available size without resizing it, but transforming it. That is why this control is very helpful when text sizes or other UIElements are scaled.

For now ViewBox control does not appear in the toolbox. To resolve this issue, add the control to your XAML manually, or build it dynamically in code.

Example1: This example shows how to scale text inside TextBlock control in order to to fit the available size. You can see the result with and without Viewbox:

<Viewbox Stretch="UniformToFill" Width="300">
     <TextBlock Text="TextBlock Demo with long string text 1." FontSize="25"/>           
</Viewbox>
<TextBlock Width="300" Text="TextBlock Demo with long string text 2" FontSize="25"/>

Example2:This example shows how to scale a Button in order to fit the available size. You can see the result with and without Viewbox:

<Viewbox Stretch="Uniform">
    <Button Content="ViewBox Test Button"/>
</Viewbox>
<Button Content="NO ViewBox"/>

Example3: This example shows how to stretch content placed inside Grid panel in order to fit the available size. Note that the text is  transformed! You can see the result with and without Viewbox:

<Viewbox Stretch="Uniform">
    <Grid Width="300">
        <Image Source="pic1.jpg"/>
        <TextBlock Text="Some Title Here"/>
    </Grid>
</Viewbox>
<Grid Width="300">
    <Image Source="pic1.jpg"/>
    <TextBlock Text="Some Title Here"/>
</Grid>

Example4: This example demonstrates how the Text is scaled when the available size is changes dynamically.

XAML:

<Button Content="Increase Size" Click="btnIncrease_Click"/>
<Button Content="Decrease Size" Click="btnDecrease_Click"/>
<Grid x:Name="resizableGrid" Width="450" Height="450">
    <Viewbox Stretch="Uniform">
        <TextBlock Text="Some text to be scaled using ViewBox"/>
    </Viewbox>
</Grid>

C#:

private void btnIncrease_Click(object sender, RoutedEventArgs e)
{
    this.resizableGrid.Width += 50;
    this.resizableGrid.Height += 50;
}

private void btnDecrease_Click(object sender, RoutedEventArgs e)
{
    this.resizableGrid.Width -= 50;
    this.resizableGrid.Height -= 50;
}

NOTE: The WP7 documentation is still not available but you can take a look at the Silverlight MSDN documentation.

That was all about how to use Viewbox in WP7 Mango. Here is the full source code:

I hope that the post was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Windows Phone 7 Mango: Using Viewbox control'

Title Your Name

Comment