Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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
Panel

On this page:

Table of Contents
maxLevel2
stylecircle

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

    Code Block
    titleXAML
    languagexml
    <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

    Code Block
    titleXAML
    languagexml
    <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

Code Block
titleXAML
languagexml
<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>

 

Related Topics

Content by Label
spaces@self
reversetrue
showLabelsfalse
max5
sortmodified
labelskb-how-to-article -create-auto-sizing-layout-using-viewbox
showSpacefalse
typepage