Forums | NoesisGUI

Hello there!

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

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:

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?

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:

Code: Select all

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

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