User avatar
jsantos
Site Admin
Topic Author
Posts: 3905
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>
Sample sources of a NineSliceImage control can be found at GitHub: https://github.com/Noesis/Tutorials/tre ... /NineSlice
 
User avatar
stonstad
Posts: 241
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

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: 2983
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 4 guests