Question

When I was testing a new interface for a button I noticed a blur appearing during run-time that was not present during design-time. I tracked it down to the auto property.

The image below displays to button during run-time the left has its height and width set to auto and the right has its height and width set manually. As you can see there is a blur on the left button.

Image of buttons

Why is this caused? Is there any way of getting round it?

Thanks.

Relevent XAML:

        <Border Padding="1,1,1,1"  Height="Auto" Width="Auto">
            <!-- Border Properties -->
            <Border.Effect>
                <DropShadowEffect ShadowDepth="0" BlurRadius="8"/>
            </Border.Effect>
            <Border.Background>
                <SolidColorBrush x:Name="BorderBrush" Color="Gray"/>
            </Border.Background>

                <!-- End Properties -->


            <!-- Children -->
            <Grid>
                <!-- Properties -->
                <Grid.Background>
                    <LinearGradientBrush x:Name="BackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop x:Name="BackgroundLightColor" Color="#FF282828" Offset="0.572"/>
                        <GradientStop Color="#FF3C3C3C" Offset="0"/>
                    </LinearGradientBrush>
                </Grid.Background>
                <!-- End Properties -->
                <!-- Children -->
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" Margin="20,5,20,5">
                    <TextBlock.Foreground>
                        <SolidColorBrush x:Name="ForegroundBrush" Color="#FFBBBBBB"/>
                    </TextBlock.Foreground>

                </ContentPresenter>
                <!-- End Children -->
            </Grid>
            <!-- End Children -->
        </Border>
    </ControlTemplate>
    <!-- End Template -->

Left Button:

<Border Padding="1,1,1,1"  Height="auto" Width="auto">

Right Button:

<Border Padding="1,1,1,1"  Height="29" Width="72">
Was it helpful?

Solution

It looks like a subpixel rendering issue, try setting SnapsToDevicePixels or UseLayoutRounding on your application or control.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top