User avatar
jsantos
Site Admin
Topic Author
Posts: 2563
Joined: 20 Jan 2012, 17:18
Contact:

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.
9-Slice.jpg
<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>
 
stonstad
Posts: 99
Joined: 06 Jun 2016, 18:14

Re: 9-slice scaling

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!
 
User avatar
sfernandez
Site Admin
Posts: 1628
Joined: 22 Dec 2011, 19:20

Re: 9-slice scaling

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.

Who is online

Users browsing this forum: No registered users and 1 guest