ComponentOne Gauges for WPF and Silverlight
Silverlight Quick Start / Step 1 of 4: Setting up the Application
In This Topic
    Step 1 of 4: Setting up the Application
    In This Topic

    In this step you'll begin in Visual Studio to create a Silverlight application using Gauges for Silverlight and add StackPanel panels to customize the layout of the controls you'll be adding to the application.

    To set up your project, complete the following steps:

    1. In Visual Studio, select File | New | Project.
    2. In the New Project dialog box, select a language in the left pane, and in the templates list select Silverlight Application. Enter a Name for your project and click OK. The New Silverlight Application dialog box will appear.
    3. Click OK to close the New Silverlight Application dialog box and create your project.
    4. Right-click your project in the Solution Explorer and choose Add Reference.
    5. In the Add Reference dialog box, locate and choose the C1.Silverlight.dll and C1.Silverlight.Gauge.dll assemblies and click OK to add references to those assemblies to your application.
    6. Navigate to the Toolbox and double-click the StackPanel icon to add the panel to MainPage.xaml. The XAML markup will now look similar to the following:
      XAML
      Copy Code
      <UserControl
      xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"  
      x:Class="C1Gauges.MainPage"
      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" d:DesignWidth="640" d:DesignHeight="480">
        <Grid x:Name="LayoutRoot">
      <StackPanel></StackPanel>
          </Grid>
      

       

    7. Add  x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" to the <StackPanel> tag so that it appears similar to the following:

      XAML
      Copy Code
      <StackPanel x:Name="sp1" Width="Auto" Height="Auto"
      Orientation="Vertical" HorizontalAlignment="Center"
      VerticalAlignment="Center"></StackPanel>
      

       

      Elements in the panel will now appear centered and vertically positioned.

    8. In the XAML window of the project, place the cursor between the <StackPanel> and </StackPanel> tags.
    9. Navigate to the Toolbox and double-click the StackPanel icon to add the panel to the existing StackPanel.
    10. Add  x:Name="sp2" Width="Auto" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" to the <StackPanel> tag so that it appears similar to the following:

      XAML
      Copy Code
      <StackPanel x:Name="sp2" Width="Auto" Height="Auto"
      Orientation="Horizontal" HorizontalAlignment="Center"
      VerticalAlignment="Center"></StackPanel>
      

       

      Elements in the panel will now appear centered and horizontally positioned.

      You've successfully created a new Silverlight project and set up your application. In the next step you'll added Gauges for Silverlight controls to the application and customize those controls.