Step 2 of 3: Adding Content to the Cube Control

In the previous step you created a WPF application and added the C1Cube control to your project. In this step you'll add content to the C1Cube control. To customize your project and add content to the C1Cube control in your application, complete the following steps:

1.   Switch to XAML view. In the next steps you’ll add XAML markup to your application to add content to the cube.

2.   Add a Grid to the C1Cube control, by updating the XAML markup so it appears similar to the following:.

<c1ext:C1Cube Name="C1Cube1" Margin="138,63,138,57" Height="200" Width="200">

    <Grid c1ext:C1Cube.Face="Front">

        <Grid.Background>

            <RadialGradientBrush>

                <GradientStop Color="#FFCF5B49"/>

                <GradientStop Color="#FFA7210D" Offset="1"/>

            </RadialGradientBrush>

        </Grid.Background>

    </Grid>

</c1ext:C1Cube>

You added a grid with a radial gradient background. Notice that the Face property was set in the grid tag. The Face property is an attached property that specifies the face the content appears on. See Cube Face for more information.

3.   Add the following markup just after the </Grid> tag in the XAML markup you just added to add content to each of the cube's faces :

<Grid c1ext:C1Cube.Face="Left">

    <Grid.Background>

        <RadialGradientBrush>

            <GradientStop Color="#FF59803A"/>

            <GradientStop Color="#FF315D0E" Offset="1"/>

        </RadialGradientBrush>

    </Grid.Background>

</Grid>

<Grid c1ext:C1Cube.Face="Top">

    <Grid.Background>

        <RadialGradientBrush>

            <GradientStop Color="#FF3EA5CE"/>

            <GradientStop Color="#FF147CA7" Offset="0.996"/>

        </RadialGradientBrush>

    </Grid.Background>

</Grid>

<Grid c1ext:C1Cube.Face="Back">

    <Grid.Background>

        <RadialGradientBrush>

            <GradientStop Color="#FFF0B74C"/>

            <GradientStop Color="#FFF69B04" Offset="1"/>

        </RadialGradientBrush>

    </Grid.Background>

</Grid>

<Grid c1ext:C1Cube.Face="Right">

    <Grid.Background>

        <RadialGradientBrush>

            <GradientStop Color="#FF9A24C3"/>

            <GradientStop Color="#FF5F0080" Offset="1"/>

        </RadialGradientBrush>

    </Grid.Background>

</Grid>

<Grid c1ext:C1Cube.Face="Bottom">

    <Grid.Background>

        <RadialGradientBrush>

            <GradientStop Color="#FFFFEA70"/>

            <GradientStop Color="#FFFFD900" Offset="1"/>

        </RadialGradientBrush>

    </Grid.Background>

</Grid>

In this step you added content to the C1Cube control. In the next step you'll further customize the control and run the application to observe run-time interactions.