Silverlight 4 Hosting :: ViewBox Control in Silverlight

Adding Silverlight Toolkit Reference

Before you can use a ViewBox control, you must download the Silverlight Toolkit. After that you need to add a reference to the assembly.

To add a reference, right click the References folder of your project in Solution Explorer and select Add Reference. This action will open the Add Reference dialog as you can in the following Figure 1. On this dialog, select Browse option and browse the Microsoft.Windows.Controls.dll assembly from the folder where you installed the Silverlight Toolkit. This assembly resides in the Binaries folder.


Once you add the reference, you will see the Microsoft.Windows.Controls added to your References dialog as you see below


Now, the next step is to import the Microsoft.Windows.Controls namespace to the page.  Once you type xmlns= in your page, you will see Microsoft.Windows.Controls listing in Intellisense. Select it as shown in Figure 3.

The final reference added to the page looks like following. As you can see here, I added name of this reference to ToolkitRef.

xmlns:ToolkitRef=”clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls”

Now you will see ToolkitRef in your page and once you select it, you will notice ViewBox added to the Intellisense. To add the ViewBox control to your page, just select it as you can see in Figure 4.

Creating a ViewBox

The ViewBox element represents a Silverlight ViewBox control in XAML.

< ToolkitRef:ViewBox />

The Orientation property is used to wrap child items horizontally or vertically.

The code snippet in Listing 1 creates a ViewBox control and sets its orientation to horizontal. The output looks like Figure 1 where all child controls are wrapped horizontally.

<Grid x:Name=”LayoutRoot” Background=”White” >
    <ToolkitRef:ViewBox Orientation=”Horizontal”>
            <Ellipse Width=”100″ Height=”100″ Fill=”Red” />
            <Ellipse Width=”80″ Height=”80″ Fill=”Orange” />
            <Ellipse Width=”60″ Height=”60″ Fill=”Yellow” />
            <Ellipse Width=”40″ Height=”40″ Fill=”Green” />
            <Ellipse Width=”20″ Height=”20″ Fill=”Blue” />       
    </ToolkitRef:ViewBox>
</Grid>

The output looks like Figure 5.


Now if you change orientation to vertical like Listing 2, the output looks like Figure 6.  

<ToolkitRef:ViewBox Orientation=”Vertical”>

As you can see Figure 6, the new controls are aligned vertically.

Comments are closed.

Sponsors

JaringanHosting.com

Cheap Reseller Hosting

Best Blog Hosting Provider

Best European ASP.NET 4.0 Hosting Provider