Skip to end of metadata
Go to start of metadata

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

Prerequisites

You need the following components to complete this walkthrough:

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

On this page:

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.

    PropertiesValue
    HeaderSymphony - Photo Viewer
    Width400
    Height400
    ControlBoxVisibilityCollapsed
    CanMaximizeFalse
    CanMinimizeFalse
    CanCloseFalse
    IsClientVisibleTrue
    ResizeGripVisibilityVisible
  3. Add a ViewBox inside the UXWindow

    XAML

  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

  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

XAML