9-slice scaling

11 Jan 2014, 17:11

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.

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

Sample sources of a NineSliceImage control can be found at GitHub: https://github.com/Noesis/Tutorials/tre ... /NineSlice

14 Jun 2019, 15:02

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!

17 Jun 2019, 16:53

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.

9-slice scaling

9-slice scaling

Re: 9-slice scaling

Re: 9-slice scaling

Who is online