Working With ViewBox Control in Windows Phone 7

Introduction

In this article we explore the ViewBox control in Windows Phone 7. Further we will discuss in detail how to use a ViewBox control inside the Windows Phone application; we see all the functionality of the control in this demonstration article. In this article we will 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. Further we are going to define ViewBox; exactly what is it? Basically ViewBox takes a 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. Now to accomplish this you should follow the steps given below. But before starting, I want to explain that the 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.

Step 1: In this step first of all we have to open a Windows Phone application; let's see how you will open it.

• Go to Visual Studio 2010
• File->New->Project
• Select the template named as Silverlight for Windows Phone
• Select the Windows Phone application
• Give it a name as you want.   

Step 2: In this step let's see from where you have to add the ViewBox control inside the toolbox of a Windows Phone 7 application. Let's have a look at the figures given below.

Go to the Toolbox; just right-click on any item of the toolbox; you will see the window like as shown below:

Select choose item then a window will open which is shown below.

Now you see all the Windows Phone components there; select the component ViewBox.

Then you will see that the component has been added to the toolbox; now you can use it.

Step 3: In this step we will see an example related to the ViewBox. It shows how to scale a Button in order to fit the available size. You can see the result with and without Viewbox.

Code:

<Viewbox Stretch="Uniform">

    <Button Content="Button with ViewBox" FontFamily="Comic Sans MS">

        <Button.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black" Offset="0" />

                <GradientStop Color="#FF44ABB9" Offset="1" />

            </LinearGradientBrush>

        </Button.Background>

    </Button>

</Viewbox>

<Button Content="Without ViewBox" FontFamily="Comic Sans MS">

    <Button.Background>

        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

            <GradientStop Color="Black" Offset="0" />

            <GradientStop Color="#FF72D4FF" Offset="1" />

        </LinearGradientBrush>

    </Button.Background>

</Button>

 

 

Step 4: In this step we will take another example to 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.

 

Code:

 

<Viewbox Stretch="UniformToFill" Width="300">

     <TextBlock Text="TextBlock with ViewBox in WP7." FontSize="25" FontFamily="Comic Sans MS" Foreground="#FFA4F5FF"></TextBlock>

</Viewbox>

<TextBlock Width="300" Text="TextBlock Without ViewBox in WP7" FontSize="25" FontFamily="Comic Sans MS" Foreground="#FFDB1919" />

 

Step 5: In this step we are going to see an image with viewbox and without viewbox; let's have a look at the code and their differences which will be shown in the figure given below.

 

Code:

 

<Viewbox Stretch="Uniform">

    <Grid Width="300">

        <Image Source="imges.jpg"/>

        <TextBlock Text="Image with ViewBox" Foreground="#FFDF35AB" FontSize="22" FontFamily="Comic Sans MS" />

    </Grid>

</Viewbox>

<Grid Width="300">

    <Image Source="imges.jpg"/>

    <TextBlock Text="See the differences" Foreground="#FFFF2D9F" FontFamily="Comic Sans MS" FontSize="22" />

    <TextBlock Text="Image Without ViewBox " Foreground="#FFDF35AB" FontSize="22" FontFamily="Comic Sans MS" Margin="6,36,-6,-36" />

</Grid>
 

Step 6: In this step we are going to take a demonstration that how we will increase and decrease the size of the Grid and the code related to the MainPage.Xaml file is shown below.

 

Code:

 

<phone:PhoneApplicationPage

    x:Class="MyViewBoxDemo.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--ContentPanel - place additional content here-->

        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Button Content="Click to increase Grid Size" Click="btnIncrease_Click" FontFamily="Comic Sans MS" FontSize="28">

                <Button.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFBBDABA" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="Click to decrease Grid size" Click="btnDecrease_Click" FontFamily="Comic Sans MS" FontSize="28">

                <Button.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFDEB4C4" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Grid x:Name="MyGrid" Width="450" Height="450">

                <Grid.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFFFBFA0" Offset="1" />

                    </LinearGradientBrush>

                </Grid.Background>

                <Viewbox Stretch="Uniform">

                    <Grid>

                        <Image Source="myimage.jpg"></Image>

                    <TextBlock Text="Displaying View Box in WP7" FontFamily="Comic Sans MS" FontSize="20" Foreground="#FFE07322" />

                    </Grid>

                </Viewbox>

            </Grid>

        </StackPanel>

    </Grid>

</phone:PhoneApplicationPage>

 

Step 7: In this step, we will see the code for the MainPage.xaml.cs file which is shown below.

 

Code:

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

namespace MyViewBoxDemo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

        private void btnIncrease_Click(object sender, RoutedEventArgs e)

        {

            this.MyGrid.Width += 40;

            this.MyGrid.Height += 40;

        }

        private void btnDecrease_Click(object sender, RoutedEventArgs e)

        {

            this.MyGrid.Width -= 40;

            this.MyGrid.Height -= 40;

        }

    }

}

 

Step 8: In this step we will see the design of the MainPage.xaml file which is shown below.

 

 

Step 9: In this step we are going to run the application by pressing F5 and the output regarding it is given below.

 

Output 1: It's the default output of the running application which is given below.

 

Output 2: In this output we will see that whenever you click on the increase button then it will increase the size of the grid.

 

Output 3: In this output we will see that whenever you click on the decrease button then it will decrease the size of the grid.

 

Here are some other useful resources which may help you.

How to Work with Items Controls in Windows Phone 7
Working With Various Phone Tasks in Windows Phone 7

ViewBox Control in Silverlight

AutoComplete in Windows Phone 7