9-sliced images aliasing issue
Hello there!
Does anybody know how to turn on anti-aliasing on 9-sliced images?
Does anybody know how to turn on anti-aliasing on 9-sliced images?
-
-
sfernandez
Site Admin
- Posts: 3364
- Joined:
Re: 9-sliced images aliasing issue
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>Re: 9-sliced images aliasing issue
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?
Re: 9-sliced images aliasing issue
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?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:Geometry DashCode: 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>
-
-
sfernandez
Site Admin
- Posts: 3364
- Joined:
Re: 9-sliced images aliasing issue
Yes, that would be the proper way to do it, could you please create a ticket in our bugtracker?
Thanks!
Thanks!
Who is online
Users browsing this forum: No registered users and 9 guests