Versions Compared

Key

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

This walkthrough shows you how to create wrapping layout using WrapPanel for wrapping the Image control.

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2010
  • Silverlight 4 Tools for Visual Studio 2010
  • Intersoft ClientUI 
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.

To add the resources file

  1. In your project, create new folder with name Images.
  2. In Images folder, copy the images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Images\Hotels\

Creating Simple Application Using WrapPanel

This section shows you how to create layout using WrapPanel.

  1. First change the d:DesignWidth property to 800 and the d:DesignHeight property to 600 in UXPage.
  2. Add UXWindow control to the LayoutRoot and set the following properties to the control.

    CanMinimizeFalse
    CanMaximizeFalse
    CanCloseFalse
    CanResizeTrue
    HeaderDisplayModeContent
    IsClientVisibleTrue
    IsActiveTrue
    HeaderHotels
    Width700
    Height400
  3. Add UXScrollViewer control to the UXWindow.
  4. Add WrapPanel layout to the UXScrollViewer control.

    Code Block
    titleXAML
    languagexml
    <Grid x:Name="LayoutRoot">
        <Intersoft:UXWindow CanMinimize="False" CanMaximize="False"                         CanClose="False"
    						CanResize="True" HeaderDisplayMode="Content"
                            IsClientVisible="True" IsActive="True"                         Header="Hotels"
                            Width="700" Height="400">
            <Intersoft:UXScrollViewer>
                <Intersoft:WrapPanel>
                </Intersoft:WrapPanel>
            </Intersoft:UXScrollViewer>
        </Intersoft:UXWindow>
    </Grid>
  5. Set Background for WrapPanel using LinearGradientBrush.
  6. Add GradientStop to the LinearGradientBrush and set the Color property to AliceBlue and the Offset property to 1.
  7. Add more GradientStop to the LinearGradientBrush and repeat step 6.

    Code Block
    titleXAML
    languagexml
    <Intersoft:WrapPanel>
        <Intersoft:WrapPanel.Background>
            <LinearGradientBrush>
                <GradientStop Color="AliceBlue" Offset="0" />
                <GradientStop Color="Black" Offset="1" />
            </LinearGradientBrush>
        </Intersoft:WrapPanel.Background>
    </Intersoft:WrapPanel>

  8. Add Border to the WrapPanel and set the Margin property to 10 10 0 0, the BorderBrush property to Black and the BorderThickness property to 1.
  9. Add DropShadowEffect to the Border.
  10. Add Image control to the Border and set the Source property to /CreateWrappingLayoutUsingWrapPanel;component/Images/altira-macau.jpg, the Height property to 150 and the ToolTipService.ToolTip property to Altira macau.

    Code Block
    titleXAML
    languagexml
    <Border Margin="10 10 0 0" BorderBrush="Black" BorderThickness="1">
        <Border.Effect>
            <DropShadowEffect />
        </Border.Effect>
        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/altira-macau.jpg"
    		   Height="150" ToolTipService.ToolTip="Altira macau" />
    </Border>

  11. Add more Border and Image control to the WrapPanel and repeat step 8-10.

    Code Block
    titleXAML
    languagexml
    <Intersoft:WrapPanel>
        <Intersoft:WrapPanel.Background>
            ...
        </Intersoft:WrapPanel.Background>
        <Border Margin="10 10 0 0" BorderBrush="Black" BorderThickness="1">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/altira-macau.jpg" 
                    Height="150" ToolTipService.ToolTip="Altira macau" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/amanjiwo-resort.jpg" 
                    Height="150" ToolTipService.ToolTip="Amanjiwo resort" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/burj-al-arab.jpg" 
                    Height="150" ToolTipService.ToolTip="Burj al arab" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/emirates-palace.jpg" 
                    Height="150" ToolTipService.ToolTip="Emirates palace" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/grand-hotel-europe.jpg" 
                    Height="150" ToolTipService.ToolTip="Grand hotel Europe" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/le-meurice.jpg" 
                    Height="150" ToolTipService.ToolTip="Le meurice" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/mardan-place.jpg" 
                    Height="150" ToolTipService.ToolTip="Mardan place" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/palazzo-versace.jpg" 
                    Height="150" ToolTipService.ToolTip="Palazzo versace" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/st-regis.jpg" 
                    Height="150" ToolTipService.ToolTip="St regis" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/swissotel-berlin.jpg" 
                    Height="150" ToolTipService.ToolTip="Swiss hotel berlin" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/thornbury-castle-hotel.jpg" 
                    Height="150" ToolTipService.ToolTip="Thornbury castle hotel" />
        </Border>
        <Border Margin="10 10 0 0">
            <Border.Effect>
                <DropShadowEffect />
            </Border.Effect>
            <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/town-house-galleria.jpg" 
                    Height="150" ToolTipService.ToolTip="Town house galleria" />
        </Border>
    </Intersoft:WrapPanel>

  12. Finally, save and run the project. 

After the application is running in the browser, you can try to resize the window you will see the content will follow the size of the window, such as shown in the following figure.

Conclusion

In this walkthrough, you have learned how to create ClientUI project using project template. You also learned how to create the WrapPanel for layouting.

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="CreateWrappingLayoutUsingWrapPanel.MainPage" 
        Title="MainPage Page"
        d:DesignWidth="800" d:DesignHeight="600">
        <Grid x:Name="LayoutRoot">
        <Intersoft:UXWindow CanMinimize="False" CanMaximize="False" 
                            CanClose="False" CanResize="True" HeaderDisplayMode="Content" 
                            IsClientVisible="True" IsActive="True"
                            Header="Hotels"
                            Width="700" Height="400">
            <Intersoft:UXScrollViewer>
                <Intersoft:WrapPanel>
                    <Intersoft:WrapPanel.Background>
                        <LinearGradientBrush>
                            <GradientStop Color="AliceBlue" Offset="0" />
                            <GradientStop Color="Black" Offset="1" />
                        </LinearGradientBrush>
                    </Intersoft:WrapPanel.Background>
                    <Border Margin="10 10 0 0" BorderBrush="Black" BorderThickness="1">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/altira-macau.jpg" 
                               Height="150" ToolTipService.ToolTip="Altira macau" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/amanjiwo-resort.jpg" 
                               Height="150" ToolTipService.ToolTip="Amanjiwo resort" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/burj-al-arab.jpg" 
                               Height="150" ToolTipService.ToolTip="Burj al arab" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/emirates-palace.jpg" 
                               Height="150" ToolTipService.ToolTip="Emirates palace" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/grand-hotel-europe.jpg" 
                               Height="150" ToolTipService.ToolTip="Grand hotel Europe" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/le-meurice.jpg" 
                               Height="150" ToolTipService.ToolTip="Le meurice" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/mardan-place.jpg" 
                               Height="150" ToolTipService.ToolTip="Mardan place" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/palazzo-versace.jpg" 
                               Height="150" ToolTipService.ToolTip="Palazzo versace" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/st-regis.jpg" 
                               Height="150" ToolTipService.ToolTip="St regis" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/swissotel-berlin.jpg" 
                               Height="150" ToolTipService.ToolTip="Swiss hotel berlin" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/thornbury-castle-hotel.jpg" 
                               Height="150" ToolTipService.ToolTip="Thornbury castle hotel" />
                    </Border>
                    <Border Margin="10 10 0 0">
                        <Border.Effect>
                            <DropShadowEffect />
                        </Border.Effect>
                        <Image Source="/CreateWrappingLayoutUsingWrapPanel;component/Images/town-house-galleria.jpg" 
                               Height="150" ToolTipService.ToolTip="Town house galleria" />
                    </Border>
                </Intersoft:WrapPanel>
            </Intersoft:UXScrollViewer>
        </Intersoft:UXWindow>
    </Grid>
</Intersoft:UXPage>

 

Related Topics

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