この手順では、画像のスタイルを設定し、新しい画像を作成するために、次の XAML を追加します。
- 次の XAML を <UserControl> タグ内に追加し、デフォルトの <Grid> タグを上書きします。
XAML でマークアップの書き方
| XAML マークアップ |
コードのコピー
|
<UserControl.Resources>
<SolidColorBrush Color="#66FFFFFF" x:Key="MaskBrush" />
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Margin="0,0,0,10">
<Button Content="Load your own image" Click="LoadImage" Margin="0 0 10 0" Width="180" HorizontalAlignment="Left" />
<Button Content="Export selection" Click="ExportImage" Grid.Column="1" Width="140" />
</StackPanel>
<Grid Name="imageGrid" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<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>
</Grid>
|
- プロジェクトに画像を追加します。
- ［プロジェクト］→［既存の項目の追加］を選択します。
- 画像を参照します。この例では、ComponentOne for UWP に付属する C1.UWP.Imagingサンプルの画像 Lenna.jpg を使用します。
- この画像を選択し、［追加］をクリックします。
次の手順では、画像のトリミングに使用するコードを追加します。
関連トピック