Drehknopf Inhalt benutzerdefinierte Schaltfläche

Question

I definiert eine benutzerdefinierte Schaltfläche hier:

<Button x:Class="Views.Controls.RefreshButton" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" 
      xmlns:local="clr-namespace:Views.Controls"    
      mc:Ignorable="d" 
      d:DesignHeight="64" 
      d:DesignWidth="64" 
      Background="Transparent" 
      Foreground="WhiteSmoke"> 

    <Controls:PackIconModern Width="40" Height="40" Kind="Refresh" Margin="0,-1.3" RenderTransformOrigin="0.5,0.5" /> 
    <Button.RenderTransform> 
     <RotateTransform x:Name="RefreshButtonTransform" Angle="0"/> 
    </Button.RenderTransform> 
    <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.Click"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RefreshButtonTransform" Storyboard.TargetProperty="(RotateTransform.Angle)"> 
          <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" /> 
          <SplineDoubleKeyFrame KeyTime="0:0:1" Value="360" /> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </Button.Triggers> 
</Button> 

ich diesen Knopf in meine Hauptansicht implementiert. Dies führt jedoch dazu, dass der gesamte Knopf um die obere linke Ecke gedreht wird und nicht der Mittelpunkt des Knopfes.

Answer 1

Sie müssen RenderTransformOrigin bis Mitte des

Button

<Button ... RenderTransformOrigin="0.5,0.5"> 

Von MSDN setzen

Render hat eine etwas Nicht-Standard Verwendung des Wertes Point-Struktur, dass der Punkt nicht eine absolute darstellt Ort in einem Koordinatensystem. Stattdessen werden Werte zwischen 0 und 1 als Faktor für den Bereich des aktuellen Elements in jeder x, y-Achse interpretiert. Zum Beispiel bewirkt (0,5,0,5), dass die Rendertransformation auf das Element zentriert wird, oder (1,1) würde die Rendertransformation in der unteren rechten Ecke des Elements platzieren.