Question

WPF appears to be splitting my controls diagonally. What am I doing wrong? The problem is clearer on the blue button, but still noticeable on the one on the right.

Bizarrely, kaxaml renders the buttons correctly. The WPF designer never seems to. When I run the sample code in a standalone ‘WpfApplication1’ it renders correctly. However, inside my application I get the diagonal ‘cut’. It’s probably worth mentioning that at runtime WPF doesn’t seem to consistently apply the slicing effect, sometimes they render properly!

Update 1:
A Clue! It is only affecting buttons! When I created a standalone Border and put a label as its content, no slicing effect?!?!! So it’s no the xaml per se, but something magical to do with buttons?! Thinking out loud, something to do with not completely overriding the default Button template?

Update 2:
Well, this is getting even more odd by the minute. It’s something to do with the shadow effect. It seems that the first type of control to be drawn which has an effect (BitmapEffect or wpf 4.0 Effect), is split as are all other instances of control of that type. For example, here is a DatePicker with a lovely red shadow, which splits the DatePicker control diagonally, the button afterwards is fine despite also having an effect applied to it.

If I don’t apply an effect, no controls are split. If I draw a control with an effect, this control is split and subsequent controls of different types are fine. However, if you have two or three controls of the same type, they get split too. Ie, if a button is split, all buttons on the page will also be split.

This must be something to do with my GPU or graphics drivers. I’ve updated them this morning but no joy. (I’m using Radeon Mobility HD 5650, v 8.683.2.0). If this problem is isolated to just my PC, I suppose it’s not the end of the world. Possibly, I can beat it at it’s own game by drawing a transparent effect on a random Path pixel at the top of each page or something…

Update 3

Oh dear. I have reproduced this on another PC now, so its not my graphics card or drivers.

        <StackPanel.Resources>

            <!-- Background for button when IsDefault  true"-->
            <LinearGradientBrush x:Key="DefaultButtonFill" StartPoint="0.5, 0" EndPoint="0.5, 1">
                <GradientStop Color="#FFDFEDEC" Offset="0"/>
                <GradientStop Color="#FF92B1E3" Offset="0.4"/>
                <GradientStop Color="#FF749EE0" Offset="0.5"/>
                <GradientStop Color="#94DDF6" Offset="1"/>
            </LinearGradientBrush>

            <!-- default button background -->
            <LinearGradientBrush x:Key="NotDefaultButtonFill" StartPoint="0.5, 0" EndPoint="0.5, 1">
                <GradientStop Color="#FFEFEFF5" Offset="0"/>
                <GradientStop Color="#FFE1E1E6" Offset="0.4"/>
                <GradientStop Color="#FFC7CBD0" Offset="0.5"/>
                <GradientStop Color="#FFE8ECEE" Offset="1"/>
            </LinearGradientBrush>

            <Style TargetType="Button">
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border x:Name="border"
                        CornerRadius="12"
                        Background="{StaticResource NotDefaultButtonFill}"
                        Padding="25 8"
                        Margin="10"
                        Cursor="Hand">


                                <Border.BitmapEffect>
                                    <DropShadowBitmapEffect x:Name="shadow" Direction="280" Color="Black"  ShadowDepth="2" Opacity=".6"/>
                                </Border.BitmapEffect>

                                <!--
                    <Border.Effect>
                        <DropShadowEffect x:Name="shadow" Direction="280" Color="Black"  ShadowDepth="2" Opacity=".6"/>
                    </Border.Effect>-->

                                <ContentPresenter 
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Content="{TemplateBinding Content}" />

                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsDefault" Value="True">
                                    <Setter TargetName="border" Property="Background" Value="{StaticResource DefaultButtonFill}"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter TargetName="border" Property="Background" Value="LightGray"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>





        </StackPanel.Resources>

        <StackPanel Orientation="Horizontal">
            <Button>Normal</Button>
            <Button IsDefault="True">IsDefault</Button>
        </StackPanel>
    </StackPanel>

Answer 1

This is due to a bug caused by some subtle interaction between WPF and ATI graphics drivers. It seems to happen when using DropShadowEffect on elements that aren’t quite positioned on pixel boundaries.

If you set UseLayoutRounding=”True” on the elements in question (or in the appropriate style) that seems to fix the problem in a lot of cases, though not all. Another thing to do is to make sure you are not deliberately positioning elements at half-pixels (by using fractional margins, for example – this can happen if you move elements around in Expression Blend).

Here’s a simple repro case:

 <UserControl
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <UserControl.Resources>
     <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
         <Setter Property="Width" Value="28"/>
         <Setter Property="Height" Value="28"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Button}">
                     <Border x:Name="Border" Background="Transparent">
                         <Grid Margin="{TemplateBinding Padding}">
                         <ContentPresenter x:Name="contentPresenter" VerticalAlignment="Center"
                                           HorizontalAlignment="Center">
                           <ContentPresenter.Effect>
                             <DropShadowEffect BlurRadius="13" Color="Black" Opacity="1" ShadowDepth="0" Direction="0"/>
                           </ContentPresenter.Effect>
                         </ContentPresenter>
                         </Grid>
                     </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
   </UserControl.Resources>
   <Grid>  
     <Button x:Name="MinimizeButton"
                Style="{StaticResource ButtonStyle}">
            <Rectangle x:Name="MinimizeIcon"
                       Width="11"
                       Height="2"
                       HorizontalAlignment="Center"
                       Margin="0,7,0,0"
                       VerticalAlignment="Bottom"
                       Stroke="Gray"
                       StrokeThickness="2"/>
    </Button>
   </Grid>
 </UserControl>

If you stick that in Kaxaml and move the zoom slider about, you should see the split appear when the zoom is set to 150.

If you add <Setter Property="UseLayoutRounding" Value="True"/> to the Button Style, zoom level 150 renders correctly, but the split does appear at zoom level 300.

Which is why I say my work-around doesn’t work in all cases – if you only need to display your content at one fixed size, UseLayoutRounding might hide the problem at that size, but if you have a zoom feature in your app, you might still get the problem at times.

From the Microsoft Forums, here’s what ATI had to say about the issue:

The root cause is that WPF 4.0 will use DX10 style texture coordinates addressing to render thetext with point filter (Round to nearest) while using DX9 API. We are followingthe DX9 rule (Truncate to nearest) as this is DX9 driver. If we force our HW touse DX10 style texture coordinate usage, the issue will disappear. However, Ithink Microsoft should follow their own rule, use DX9 style texture coordinateaddressing while using DX9 API.”

If you can reproduce this issue too, go and add your vote to the issue I’ve added on Connect so that we can get this fixed – though I don’t hold much hope; Microsoft repsonded to a similar issue by saying that they considered the work-around acceptable for the time being.