Applying ControlTemplate to a WPF TreeViewItem reduced bitmap icons quality

Question

I applied a HierarchicalDataTemplate for adding icons to the tree items that way:

  <TreeView.ItemTemplate>
            <HierarchicalDataTemplate DataType="{x:Type DataAccess:IDataAccessible}" 
                                  ItemsSource="{Binding Path=Items}">                    
                    <StackPanel Orientation="Horizontal" Margin="2" DataContext="{Binding}">
                        <Image Width="16" Height="16" SnapsToDevicePixels="True"
                           Source="{Binding Converter={StaticResource treeImageConverter}}">
                    </Image>
                        <TextBlock Text="{Binding Path=Name}" Margin="5,0" />
                    </StackPanel>                    
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>

And then I added ItemContainerStyle for hiding the arrow button:

 <TreeView.ItemContainerStyle>
            <Style TargetType="TreeViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TreeViewItem" xmlns:s="clr-namespace:System;assembly=mscorlib">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" MinWidth="19" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <!-- Make the ToggleButton invisible -->
                                <ToggleButton IsChecked="False" Visibility="Hidden" ClickMode="Press" Name="Expander" >

                                </ToggleButton>
                                <Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="Bd" SnapsToDevicePixels="True" Grid.Column="1">
                                    <ContentPresenter Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}" ContentSource="Header" Name="PART_Header" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                                </Border>
                                <ItemsPresenter Name="ItemsHost" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="ItemsControl.HasItems">
                                    <Setter Property="UIElement.Visibility" TargetName="Expander">
                                        <Setter.Value>
                                            <x:Static Member="Visibility.Hidden" />
                                        </Setter.Value>
                                    </Setter>
                                    <Trigger.Value>
                                        <s:Boolean>False</s:Boolean>
                                    </Trigger.Value>
                                </Trigger>
                                <Trigger Property="TreeViewItem.IsSelected">
                                    <Setter Property="Panel.Background" TargetName="Bd">
                                        <Setter.Value>
                                            <DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="TextElement.Foreground">
                                        <Setter.Value>
                                            <DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
                                        </Setter.Value>
                                    </Setter>
                                    <Trigger.Value>
                                        <s:Boolean>True</s:Boolean>
                                    </Trigger.Value>
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="TreeViewItem.IsSelected">
                                            <Condition.Value>
                                                <s:Boolean>True</s:Boolean>
                                            </Condition.Value>
                                        </Condition>
                                        <Condition Property="Selector.IsSelectionActive">
                                            <Condition.Value>
                                                <s:Boolean>False</s:Boolean>
                                            </Condition.Value>
                                        </Condition>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Panel.Background" TargetName="Bd">
                                        <Setter.Value>
                                            <DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="TextElement.Foreground">
                                        <Setter.Value>
                                            <DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
                                        </Setter.Value>
                                    </Setter>
                                </MultiTrigger>
                                <Trigger Property="UIElement.IsEnabled">
                                    <Setter Property="TextElement.Foreground">
                                        <Setter.Value>
                                            <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
                                        </Setter.Value>
                                    </Setter>
                                    <Trigger.Value>
                                        <s:Boolean>False</s:Boolean>
                                    </Trigger.Value>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.ItemContainerStyle>

And that's how it looks before and after:

What can be a reason for this quality reduction?

Answer 1

Set the LayoutRounding property to true. This happens when after layout calculation a position cannot directly mapped to a screen pixel, and the color value bleeds into two display pixels. Consider a horizontal line placed on y=3, which would fill that line with a complete color, if it would be placed on y=3.5 it would need to half fill the line on 3 and half on 4. But there aren't half pixel obviously, thats why its blends the color between the line. So you usually get a half transparent line on y 3 and 4.

Sometimes this is desired especially with animations, because this sub pixel rendering makes everything look a little bit smoother, but for icons this is usually undesirable.