Question

I have a button (25×25) with a background brush applied to it. If I rotate the button, WPF treats the button like a square rather than a circle. How do I get the button bounding box to be treated like the content, or background of the button?

Here’s the markup for the background brush

<DrawingBrush x:Key="MetroArrowBrush"
                  Stretch="Uniform">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <GeometryDrawing Brush="#ffffff"
                                 Geometry="F1M724.371,610.402C724.402,610.356 724.431,610.312 724.459,610.263 724.488,610.211 724.511,610.159 724.595,609.975 724.619,609.919 724.634,609.862 724.652,609.803 724.666,609.756 724.68,609.71 724.691,609.662 724.704,609.606 724.712,609.548 724.72,609.492 724.728,609.443 724.732,609.395 724.738,609.347 724.743,609.288 724.743,609.23 724.74,609.171 724.74,609.124 724.743,609.078 724.738,609.031 724.735,608.97 724.726,608.91 724.718,608.85 724.71,608.804 724.704,608.76 724.694,608.714 724.68,608.655 724.663,608.596 724.644,608.539 724.631,608.492 724.619,608.448 724.53,608.24 724.507,608.196 724.486,608.152 724.462,608.108 724.434,608.056 724.399,608.006 724.286,607.842 724.246,607.792 724.204,607.746 724.103,607.632L713.832,597.36C712.972,596.502 711.584,596.502 710.728,597.36 709.871,598.215 709.871,599.606 710.728,600.462L717.256,606.988 696.934,606.988C696.176,606.988 695.507,607.372 695.114,607.956 694.876,608.307 694.738,608.728 694.738,609.184 694.738,609.79 694.983,610.338 695.382,610.735 695.778,611.134 696.327,611.378 696.934,611.378L717.256,611.378 710.728,617.904C709.871,618.762 709.871,620.151 710.728,621.007 711.158,621.436 711.718,621.652 712.28,621.652 712.843,621.652 713.402,621.438 713.832,621.01L724.166,610.666C724.204,610.622 724.246,610.576 724.283,610.528 724.314,610.487 724.343,610.444 724.371,610.402z" />
                <GeometryDrawing Brush="#ffffff"
                                 Geometry="F1M711.074,631.265C698.899,631.265 688.993,621.358 688.993,609.185 688.993,597.012 698.899,587.106 711.074,587.106 723.246,587.106 733.153,597.012 733.153,609.185 733.153,621.358 723.246,631.265 711.074,631.265z M711.072,583.325C696.79,583.325 685.213,594.901 685.213,609.184 685.213,623.465 696.79,635.044 711.072,635.044 725.353,635.044 736.932,623.465 736.932,609.184 736.932,594.901 725.353,583.325 711.072,583.325z" />
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>

And here’s my button markup

<ToggleButton Name="btnToggleTaskBar"
                          Style="{StaticResource MetroArrow1RightStyle}"
                          FocusVisualStyle="{x:Null}"
                          VerticalAlignment="Top">
</ToggleButton>

<Style x:Key="MetroArrow1RightStyle"
           TargetType="{x:Type Control}">
        <Setter Property="Background"
                Value="{DynamicResource MetroArrowBrush}" />
        <Setter Property="BorderBrush"
                Value="{x:Null}" />
        <Setter Property="Foreground"
                Value="{x:Null}" />
        <Setter Property="BorderThickness"
                Value="0" />

    </Style>

Answer 1

I’m not sure what the problem is, but should you be animating RenderTransform instead of LayoutTransform?