Search code examples
wpfxamlexpression-blendcontroltemplate

WPF does not align path properly at run time


I have a 16x16 vector drawn up in Expression Design that I imported in to Blend and used in a control template. Here's the XAML:

<ControlTemplate x:Key="CircularButtonTemplate" TargetType="{x:Type Button}">
    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Layer_1" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0">
        <Ellipse x:Name="_circle" Width="15.0208" Height="15.0208" Canvas.Left="0.375033" Canvas.Top="0.479169" Stretch="Fill" Fill="#FF666666" />
        <Path x:Name="_darkShadow" Width="14.727" Height="14.686" Canvas.Left="0.232" Canvas.Top="0.357" StrokeThickness="3" StrokeLineJoin="Round" Stroke="Black" Data="M 2.02083,8.03473L 13.7501,8.03473M 7.84484,2.14584L 7.84484,13.8333"/>
        <Path x:Name="_lightShadow" Width="14.727" Height="14.686" Canvas.Left="0.857" Canvas.Top="0.732" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FFABABAB" Data="M 2.02083,8.03473L 13.7501,8.03473M 7.84484,2.14584L 7.84484,13.8333"/>
        <Path x:Name="_plus" Width="14.7292" Height="14.6875" Canvas.Left="0.520833" Canvas.Top="0.645836" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Data="M 2.02083,8.03473L 13.7501,8.03473M 7.84484,2.14584L 7.84484,13.8333"/>
    </Canvas>

While Blend and Exp Design shows image neatly, at run time, the + sign in the center does not align properly when applied to a button:

enter image description here

How do I fix this?


Solution

  • Try setting UseLayoutRounding="True" on the Canvas.