It looks like a subpixel rendering issue, try setting SnapsToDevicePixels
or UseLayoutRounding
on your application or control.
Setting width and height properties to auto in WPF causes button to blur
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.
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">
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow