Image.NineGridプロパティ

 System.Windows.ControlsのImageクラスにはありませんが、Windows.UI.XamlのImageクラスにはNineGridプロパティが存在します。


<UserControl x:Class="NineGridSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<UserControl.Resources>
<Style TargetType="Image">
<Setter Property="Margin" Value="50"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Source" Value="/Images/NineGridImage.png"/>
</Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Stretch="None" />
<Image Grid.Row="1" Width="200" Height="200" />
<Image Grid.Row="2" Width="200" Height="200" NineGrid="3" />
</Grid>

</UserControl>






 「NineGridImage.png」は下の図のような8×7ピクセルの画像です。





 NineGridプロパティを"3"、もしくは"3, 3, 3, 3"に設定すると、下の図のようなかたちで画像が9つの領域で分けられます。





 この状態で画像を引き伸ばした場合、(1)の部分は左右方向にのみ引き伸ばされ、(2)の部分は上下方向にのみ引き伸ばされ、(3)は四方に引き伸ばされ、(4)の部分は引き伸ばされません。