手順 2：画像の追加

この手順では、画像のスタイルを設定し、新しい画像を作成するために、次の XAML を追加します。

次の XAML をタグ内に追加し、デフォルトのタグを上書きします。

XAML	コードのコピー
<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

コードのコピー

<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>

プロジェクトに画像を追加します。
- ［プロジェクト］→［既存のアイテムの追加］を選択します。
- 画像を参照します。この例では、ComponentOne Studio for Silverlight に付属する C1.Silverlight.Imaging\Crop サンプルの画像 Lenna.jpg を使用します。
- この画像を選択し、［追加］をクリックします。

次の手順では、画像のトリミングに使用するコードを追加します。