Step 2 of 4: Adding an Image
In This Topic
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.
| Markup |
Copy Code
|
<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>
|
- Add an image to the project:
- Select Project | Add Existing Item.
- Browse to find an image. In this example, we use the Lenna.jpg image from the sample -
C1.UWP.Imaging sample provided with ComponentOne Studio UWP Edition.
- Select the image and click Add.
In the next step, you'll add the code used to crop the image.
See Also
