无法从WPF中的网格中心旋转用户控件中的网格

Question

I have one main page and one user control and have one button in User control with events for rotating.Events are firing for rotating but not from the centre but from corner.But I want rotate the grid withing the centre.So the user can easily rotate the see from different angle.I was trying to build one application for building map.so the user can rotate the floor to see from different angle ..Please help how to fix this issue My User Control Xamal :

    <UserControl x:Class="Floorsreen.FloorUserControl"
                 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" 
                 mc:Ignorable="d" 
                 d:DesignHeight="600" d:DesignWidth="600" Background="Yellow"   >



        <Grid Width="600" Height="600" Background="Yellow" >

            <Grid Width="500" Height="500" Background="Wheat" Name="my_grid">
                <Grid.RenderTransform>
                    <RotateTransform x:Name="transform" />
                </Grid.RenderTransform>
                <Grid HorizontalAlignment="Stretch" >
            <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />

                </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                     <RowDefinition Height="*" />
                     <RowDefinition Height="20"  />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="20"  />

                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>



            </Grid>


        </Grid>
            <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="516,582,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        </Grid>
    </UserControl>

My UserControl code behind:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;


namespace Floorsreen
{
    /// <summary>
    /// Interaction logic for FloorUserControl.xaml
    /// </summary>
    public partial class FloorUserControl : UserControl

    {

        public FloorUserControl()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Storyboard storyboard = new Storyboard();
            DoubleAnimation rotateAnimation = new DoubleAnimation()
            {
                From = 0,
                To = 90,
                Duration = new Duration(TimeSpan.FromSeconds(10.0))
            };
            Storyboard.SetTarget(rotateAnimation, my_grid);
            Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath("(UIElement.RenderTransform).(RotateTransform.Angle)"));

            storyboard.Children.Add(rotateAnimation);
            storyboard.Begin();

        }

    }

}

And my Main page xamal:

<Window x:Class="Floorsreen.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:view="clr-namespace:Floorsreen" 
        Title="MainWindow" Height="800" Width="1000">

    <Window.Resources>

    </Window.Resources>

    <Grid>


        <view:FloorUserControl />


    </Grid>
</Window>

Answer 1

You need to specify the RenderTransformOrigin . This property takes two doubles, usually from 0 - 1, which specify X and Y pivot location in percent. Meaning RenderTransformOrigin="0.5, 0.5" will start in the center where the default RenderTransformOrigin="0, 0" is the upper left corner. RenderTransformOrigin="1, 1" is bottom right and so on.

To rotate in the center you need to add this attachable property to your grid. Example:

<Grid RenderTransformOrigin="0.5, 0.5">