Step 1 of 4: Setting up the Application

In this step you'll create a Silverlight application in Microsoft Expression Blend using ColorPicker for Silverlight. When you add a C1ColorPicker control to your application, you'll have a complete, functional color input selector. To set up your project and add C1ColorPicker controls to your application, complete the following steps:

In Expression Blend, select File | New Project.
In the New Project dialog box, select the Silverlight project type in the left pane and in the right-pane select Silverlight Application + Website. Enter a Name and Location for your project, select a Language in the drop-down box, and click OK. A new application will be created and should open with the MainPage.xaml file displayed in Design view.
Navigate to the Project window and right-click the References folder in the project files list. In the Add Reference dialog box choose Add Reference and locate and select the C1.Silverlight.dll and C1.Silverlight.Extended.dll assemblies and click Open. The dialog box will close and the references will be added to your project.
Click once on the design area of the UserControl to select it. Unlike in Visual Studio, in Blend you can add Silverlight controls directly to the design surface as in the next steps.
Navigate to the Toolbox and double-click the Rectangle icon to add the standard control to the Grid.
Add x:Name="rc1" Width="Auto" Height="Auto" to the < Rectangle> tag so that it appears similar to the following:
```
<Rectangle x:Name="rc1" Width="Auto" Height="Auto"></Rectangle>
```
The rectangle will now fill the Grid.

Switch to XAML view and add a Fill to the <Rectangle> tag so it appears similar to the following:

XAML	Copy Code
<Rectangle x:Name="rc1" Height="Auto" Width="Auto"> <Rectangle.Fill> <LinearGradientBrush x:Name="colors"> <GradientStop x:Name="col1" Color="Black" Offset="0" /> <GradientStop x:Name="col2" Color="White" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

XAML

Copy Code

<Rectangle x:Name="rc1" Height="Auto" Width="Auto">
    <Rectangle.Fill>
        <LinearGradientBrush x:Name="colors">
            <GradientStop x:Name="col1" Color="Black" Offset="0" />
            <GradientStop x:Name="col2" Color="White" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

This will add a black and while linear gradient fill to the rectangle. The design view of the page should now look similar to the following image:

You've successfully created a Silverlight application and customized the Rectangle control. In the next step you'll add and customize C1ColorPicker controls.