Image in ToggleButton not displaying properly in WPF

Question

I am trying to place an image in front of the text in ToggleButton. Everything is going well. But the image is not displayed correctly. I enlarged the image here so you can see what I'm talking about. As you can see, some parts of the image are not displayed correctly.

The image I'm trying to display

Result

Increased result

<BitmapImage x:Key="ColumnsLayoutMiniIcon" UriSource="pack://application:,,,/Main/Resources/dark/images/mini/columns_layout_mini_icon.png"/>

                                  

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="Border" Width="13" Height="13" Source="{StaticResource ColumnsLayoutMiniIcon}">
                    </Image>
                    <Border x:Name="Content"
                            Padding="10 0 10 0">
                        <ContentPresenter HorizontalAlignment="Center" 
                                          VerticalAlignment="Center" 
                                          Margin="-2 -3 0 0"
                                          RecognizesAccessKey="True" />
                    </Border>                        
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Cursor" Value="Hand"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">

                    </Trigger>

                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Foreground" Value="LightGray"/>
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<RadioButton Content="Plan View"
             GroupName="View"
             Style="{StaticResource BaseToggleButton}"
             Checked="SwitchToPlanView_Selected"
             IsEnabled="{Binding SwitchToModelViewsEnabled}"
             IsChecked="{Binding SwitchToPlanViewSelected}">
</RadioButton>

Answer 1

Add UseLayoutRounding="true"to the root of your element Window. This will make sure that the image is snapped to pixels and does not display strange artifacts.