Intersoft ClientUI Documentation
Walkthrough: Create Auto-sizing Layout using Viewbox
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > Panels Overview > Panel Walkthroughs > Walkthrough: Create Auto-sizing Layout using Viewbox

Glossary Item Box

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

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

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

XAML Copy Code 
<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>

See Also

©2012. All Rights Reserved.