1

An odd problem appears to be happening to icons placed within my TabControl tabs. When a single tab is constructed, the icon appears correct.

When another tab is added, or the tab is selected, the icon(s) seem to offset upwards by one pixel, and duplicate the bottom row.

enter image description here

My ItemTemplate looks similar to the following slimmed-down version:

<TabControl.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Orientation="Horizontal">
                <Image Source="{Binding Tab.IconFilename}" Width="16" Height="16" Stretch="None" />
                <TextBlock Text="{Binding Tab.DisplayHeader}" />
            </StackPanel>
            <Button Grid.Column="1" Name="ButTabClose" Width="16" Height="16" Click="ButTabClose_Click">
                <Image Source="{StaticResource CloseCross}" Stretch="None" />
            </Button>
        </Grid>
    </DataTemplate>
</TabControl.ItemTemplate>

Images are styled application-wide with the following:

<Style TargetType="Image">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor"/>
    <Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>
</Style>

Removing the BitmapScalingMode shows the whole image, but it is blurred.

Dan
  • 1,130
  • 2
  • 20
  • 38
  • Does the 'render size' change in either case? (You can look at this using the "Live Visual Tree" and selecting the item and viewing it's "Live Properties", see the little black box on the top of a debugging WPF window) Looks like the image is changing from 16 to 17px high or something. The non-bitmap scaling mode causes blur, the bitmap scaling would do something like you see. – Joe Jul 05 '17 at 15:41
  • @Joe Snoop says the render size is 16x16 still. It looks like the top row gets cut off, and the bottom row duplicated. But you're right, it does appear to zoom in slightly. – Dan Jul 05 '17 at 15:53
  • Trying to reproduce, does the ItemTemplate not apply to the TabItems, not their headers? Could you show a bit more of the tab control? – Joe Jul 05 '17 at 16:15
  • Don't worry I got it to work with your code. Does display bluring on mine too. – Joe Jul 05 '17 at 16:19
  • @Joe I'm glad it's reproducible. Did you have any luck figuring out what's going on here? – Dan Jul 06 '17 at 10:25
  • No, everything I tried had no effect. But all the tabs had the same thing, with an extra line at the bottom like you describe, some were more blurred than others regardless of the bitmapscaling options. Looks like it's just WPF being lousy at rendering images... Couldn't find a solution. – Joe Jul 06 '17 at 10:41
  • Have you tried to disable `SnapsToDevicePixels` and set `Stretch` to `Uniform` or `UniformToFill`. For me the following works fine: `` – WPFGermany Jul 13 '17 at 05:48
  • @WPFGermany Huh. Well I'll be darned. That worked. I wonder what's happening internally to cause the artefact. If you post that as an answer, I can award the bounty. – Dan Jul 13 '17 at 10:11

2 Answers2

2

You need to set UseLayoutRounding="True" on the top-level element (the UserControl / Window), not on the Image itself.

Andy
  • 3,631
  • 2
  • 23
  • 32
  • Thanks! This works, in addition to the other answer. I've accepted the other though, as it was first and is equally preferable depending on context. – Dan Jul 14 '17 at 12:14
1

I would suggest to change the Stretch and SnapsToDevicePixels property for the images to:

<Image Source="icon.jpg" Width="16" Height="16" Stretch="Uniform" SnapsToDevicePixels="False" />

In my sample code everything worked as expected.

WPFGermany
  • 1,639
  • 2
  • 12
  • 30