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:

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

</Viewbox>

<Button.Background>

</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>

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:

</Grid>

</Viewbox>

</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">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

<Grid>

</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