seigi
Topic Author
Posts: 2
Joined: 01 Oct 2025, 17:27

9-sliced images aliasing issue

10 Nov 2025, 14:47

Hello there!

Does anybody know how to turn on anti-aliasing on 9-sliced images?

9slicing_aliasing.png
 
User avatar
sfernandez
Site Admin
Posts: 3364
Joined: 22 Dec 2011, 19:20

Re: 9-sliced images aliasing issue

11 Nov 2025, 13:14

Looking at the template used by the 9-slice control, this is caused by using RenderOptions.BitmapScalingMode="NearestNeighbor" to reduce the chance to see overlapping lines in the joins of the different slices:
  <Style TargetType="noesis:NineSliceImage">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="noesis:NineSliceImage">
          <Grid>
            <Grid SnapsToDevicePixels="True" noesis:Element.PPAAMode="Disabled">
              <Grid.RowDefinitions>
                <RowDefinition Height="{Binding Slices.Top, RelativeSource={RelativeSource TemplatedParent}}"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="{Binding Slices.Bottom, RelativeSource={RelativeSource TemplatedParent}}"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding Slices.Left, RelativeSource={RelativeSource TemplatedParent}}"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="{Binding Slices.Right, RelativeSource={RelativeSource TemplatedParent}}"/>
              </Grid.ColumnDefinitions>
              <Rectangle Grid.Row="0" Grid.Column="0" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding TopLeftViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="0" Grid.Column="1" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding TopCenterViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="0" Grid.Column="2" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding TopRightViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="1" Grid.Column="0" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding CenterLeftViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="1" Grid.Column="1" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding CenterViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="1" Grid.Column="2" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding CenterRightViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="2" Grid.Column="0" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding BottomLeftViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="2" Grid.Column="1" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding BottomCenterViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="2" Grid.Column="2" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding BottomRightViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
            </Grid>
            <ContentPresenter Margin="{TemplateBinding Padding}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
 
seigi
Topic Author
Posts: 2
Joined: 01 Oct 2025, 17:27

Re: 9-sliced images aliasing issue

12 Nov 2025, 15:35

I'm afraid this style is not exposed in the Noesis Studio. And I'd expect to be able to set it at the NineSlice element level which would then propagate to the setters via some sort of internal bindings. Is there any chance to have it implemented in case what I said made sense?
 
annasmith
Posts: 2
Joined: 14 Aug 2025, 04:59

Re: 9-sliced images aliasing issue

13 Nov 2025, 05:23

Looking at the template used by the 9-slice control, this is caused by using RenderOptions.BitmapScalingMode="NearestNeighbor" to reduce the chance to see overlapping lines in the joins of the different slices:
  <Style TargetType="noesis:NineSliceImage"> 
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="noesis:NineSliceImage">
          <Grid>
            <Grid SnapsToDevicePixels="True" noesis:Element.PPAAMode="Disabled">
              <Grid.RowDefinitions>
                <RowDefinition Height="{Binding Slices.Top, RelativeSource={RelativeSource TemplatedParent}}"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="{Binding Slices.Bottom, RelativeSource={RelativeSource TemplatedParent}}"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding Slices.Left, RelativeSource={RelativeSource TemplatedParent}}"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="{Binding Slices.Right, RelativeSource={RelativeSource TemplatedParent}}"/>
              </Grid.ColumnDefinitions>
              <Rectangle Grid.Row="0" Grid.Column="0" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding TopLeftViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="0" Grid.Column="1" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding TopCenterViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="0" Grid.Column="2" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding TopRightViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="1" Grid.Column="0" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding CenterLeftViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="1" Grid.Column="1" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding CenterViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="1" Grid.Column="2" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding CenterRightViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="2" Grid.Column="0" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding BottomLeftViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="2" Grid.Column="1" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding BottomCenterViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
              <Rectangle Grid.Row="2" Grid.Column="2" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Rectangle.Fill>
                  <ImageBrush ImageSource="{Binding ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                              Viewbox="{Binding BottomRightViewbox, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewboxUnits="Absolute"/>
                </Rectangle.Fill>
              </Rectangle>
            </Grid>
            <ContentPresenter Margin="{TemplateBinding Padding}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
Geometry Dash
Hi sfernandez, is there any plan to allow setting the BitmapScalingMode directly on the NineSliceImage element so that it can propagate automatically to all slices, instead of modifying the template manually?
 
User avatar
sfernandez
Site Admin
Posts: 3364
Joined: 22 Dec 2011, 19:20

Re: 9-sliced images aliasing issue

14 Nov 2025, 11:49

Yes, that would be the proper way to do it, could you please create a ticket in our bugtracker?
Thanks!

Who is online

Users browsing this forum: No registered users and 9 guests