Step 2 of 4: Adding an Image

In this step, you will add the following XAML to set the image styles and create a new image.

Add the XAML within the <UserControl> tags and overwrite the default <Grid> tags.

XAML	Copy Code
<UserControl.Resources> <Style x:Key="CE_SampleText" TargetType="TextBlock"> <Setter Property="Foreground" Value="#FFF0F8FE" /> <Setter Property="FontWeight" Value="Normal" /> <Setter Property="FontSize" Value="11" /> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="Width" Value="400"/> </Style> <Style x:Key="CE_SampleTextBkg" TargetType="Border"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#99071D2E" Offset="0.003"/> <GradientStop Color="#00071D2E" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="CornerRadius" Value="2"/> <Setter Property="Padding" Value="5 0 0 0"/> </Style> <SolidColorBrush Color="#55FFFFFF" x:Key="MaskBrush"/> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Border BorderBrush="#FF8FB4CC" BorderThickness="3" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center"> <Grid Name="imageGrid"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image Stretch="None" Name="image" Grid.RowSpan="3" Grid.ColumnSpan="3"/> <Grid Name="topMask" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" /> <Grid Name="bottomMask" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" /> <Grid Name="leftMask" Grid.RowSpan="2" Grid.Row="1" Background="{StaticResource MaskBrush}" /> <Grid Name="rightMask" Grid.Column="2" Grid.RowSpan="2" Background="{StaticResource MaskBrush}" /> </Grid> </Border> </Grid>

XAML

Copy Code

<UserControl.Resources>
        <Style x:Key="CE_SampleText" TargetType="TextBlock">
            <Setter Property="Foreground" Value="#FFF0F8FE" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontSize" Value="11" />
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="Width" Value="400"/>
        </Style>
        <Style x:Key="CE_SampleTextBkg" TargetType="Border">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#99071D2E" Offset="0.003"/>
                        <GradientStop Color="#00071D2E" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="CornerRadius" Value="2"/>
            <Setter Property="Padding" Value="5 0 0 0"/>
        </Style>
        <SolidColorBrush Color="#55FFFFFF" x:Key="MaskBrush"/>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
      
        <Border BorderBrush="#FF8FB4CC" BorderThickness="3" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Grid Name="imageGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Stretch="None" Name="image" Grid.RowSpan="3" Grid.ColumnSpan="3"/>
                <Grid Name="topMask" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" />
                <Grid Name="bottomMask" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" />
                <Grid Name="leftMask" Grid.RowSpan="2" Grid.Row="1" Background="{StaticResource MaskBrush}" />
                <Grid Name="rightMask" Grid.Column="2" Grid.RowSpan="2" Background="{StaticResource MaskBrush}" />
            </Grid>
        </Border>
    </Grid>

Add an image to the project:
1. Select Project | Add Existing Item.
2. Browse to find an image. In this example, we use the Lenna.jpg image from the C1.Silverlight.Imaging\Crop sample provided with Silverlight Edition.
3. Select the image and click Add.

In the next step, you'll add the code used to crop the image.