9-slice scaling
9-slice scaling lets you scale vector and bitmap objects without distorting their geometry, retaining the look of key elements like text or rounded corners.
Sample sources of a NineSliceImage control can be found at GitHub: https://github.com/Noesis/Tutorials/tre ... /NineSlice
Code: Select all
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Background>
<RadialGradientBrush Center="0.6,0.7" GradientOrigin="0.6,0.7" RadiusX="0.6" RadiusY="0.7">
<GradientStop Offset="0" Color="YellowGreen"/>
<GradientStop Offset="1" Color="OliveDrab"/>
</RadialGradientBrush>
</Grid.Background>
<Grid.Resources>
<ImageBrush x:Key="WoodSignTL" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="0,0,50,60"/>
<ImageBrush x:Key="WoodSignT" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="50,0,200,60"/>
<ImageBrush x:Key="WoodSignTR" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="250,0,50,60"/>
<ImageBrush x:Key="WoodSignML" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="0,60,50,80"/>
<ImageBrush x:Key="WoodSignM" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="50,60,200,80"/>
<ImageBrush x:Key="WoodSignMR" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="250,60,50,80"/>
<ImageBrush x:Key="WoodSignBL" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="0,140,50,60"/>
<ImageBrush x:Key="WoodSignB" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="50,140,200,60"/>
<ImageBrush x:Key="WoodSignBR" ImageSource="Images/9slice.png"
ViewboxUnits="Absolute" Viewbox="250,140,50,60"/>
</Grid.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid Width="200" Height="150">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="{StaticResource WoodSignTL}"/>
<Rectangle Grid.Column="1" Grid.Row="0" Fill="{StaticResource WoodSignT}"/>
<Rectangle Grid.Column="2" Grid.Row="0" Fill="{StaticResource WoodSignTR}"/>
<Rectangle Grid.Column="0" Grid.Row="1" Fill="{StaticResource WoodSignML}"/>
<Rectangle Grid.Column="1" Grid.Row="1" Fill="{StaticResource WoodSignM}"/>
<Rectangle Grid.Column="2" Grid.Row="1" Fill="{StaticResource WoodSignMR}"/>
<Rectangle Grid.Column="0" Grid.Row="2" Fill="{StaticResource WoodSignBL}"/>
<Rectangle Grid.Column="1" Grid.Row="2" Fill="{StaticResource WoodSignB}"/>
<Rectangle Grid.Column="2" Grid.Row="2" Fill="{StaticResource WoodSignBR}"/>
<TextBlock Grid.ColumnSpan="3" Grid.RowSpan="3" HorizontalAlignment="Center"
VerticalAlignment="Center" FontFamily="#Another" FontSize="40"
Foreground="#402000" Text="Welcome!"/>
</Grid>
</StackPanel>
</Grid>
Re: 9-slice scaling
For optimal aesthetics in Unity -- is the source image/texture a power of 2? If it isn't a power of 2 do you turn on non-power of 2 resize and mip map generation? Thank you!
-
sfernandez
Site Admin
- Posts: 3154
- Joined:
Re: 9-slice scaling
It is always better to work with power of 2 textures, specially in mobiles. If your source image wasn't a power of 2 then it is recommended to resize it, but take into account you have to adjust the Viewbox coordinates in the ImageBrushes as Noesis maps them to the texture final size.
Who is online
Users browsing this forum: No registered users and 0 guests