This walkthrough shows you to create auto-sizing layout using ViewBox.

In this walkthrough, you perform the following tasks:

• Use ViewBox to create fluid, resizable container layout. 
• Use ImageLoader to represent an image container.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI 2010

Creating a new ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create the ClientUI Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI Application project using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.

Creating Auto-sizing layout using Viewbox

This section show how to create auto-sizing layout using Viewbox.

To create the View pattern

1. Open MainPage.xaml
2. Add a UXWindow.
   Reset all property and set the Width and Height properties to 400.
   

   Properties	Value
   Header	Symphony - Photo Viewer
   Width	400
   Height	400
   ControlBoxVisibility	Collapsed
   CanMaximize	False
   CanMinimize	False
   CanClose	False
   IsClientVisible	True
   ResizeGripVisibility	Visible

    
3. Add a ViewBox inside the UXWindow.
   

   XAML	Copy Code
   <Intersoft:UXWindow Header="Symphony - Photo Viewer" ... > <Intersoft:Viewbox Name="viewbox1" /> </Intersoft:UXWindow>

   
   
4. Add an ImageLoader inside the ViewBox.
   Set the ImageSource property to the file you just put inside the project, in this case is using 1.jpg.
   

   XAML	Copy Code
   <Intersoft:Viewbox Name="viewbox1"> <Intersoft:ImageLoader Name="imageLoader1" ImageSource="/ViewBox;component/Assets/Images/1.jpg" /> </Intersoft:Viewbox>

   
   
5. Run the project
   
   
   Try to resize the window and you'll see that the content is stretch. Note the content is not resized but transformed. To learn more about Viewbox, see Viewbox Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

<Intersoft:UXPage 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:Intersoft="http://intersoft.clientui.com/schemas"
    x:Class="ViewBox.MainPage" 
    Title="MainPage Page"
    d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">
        <Intersoft:UXWindow Header="Symphony - Photo Viewer" Name="uXWindow1" Width="400" Height="400" ControlBoxVisibility="Collapsed" CanMaximize="False" CanMinimize="False" CanClose="False" IsClientVisible="True" ResizeGripVisibility="Visible">
            <Intersoft:Viewbox Name="viewbox1">
                <Intersoft:ImageLoader Name="imageLoader1" ImageSource="/ViewBox;component/Assets/Images/1.jpg" />
            </Intersoft:Viewbox>
        </Intersoft:UXWindow>
    </Grid>
</Intersoft:UXPage>