WP7 / Xaml rotating image from its center

Question

I have an image that should spin as it is toggled, but instead its moving in u shape. In other words it moving in an angular path i.e 180 degree.

How to spin image 180 degree ?

Below is the image its transparent you can save it to view it: I have a longlistselector when the user tab's on the arrow image it will open the textblock containing the text, Also the image must spin 180 i.e the arrow must point upward with motion just like the on wphone7 home screen arrow.

My page resource

<phone:PhoneApplicationPage.Resources>
        <local:ValueConverterBoolToVis x:Key="ValueConverterBoolToVis" />

        <Style TargetType="ToggleButton" x:Key="FlipButton">

            <Setter Property="Template">
                <Setter.Value>

                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">

                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:5"   Storyboard.TargetName="rotate"  Storyboard.TargetProperty="(RotateTransform.Angle)" To="180" />

                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:5"   Storyboard.TargetName="rotate" Storyboard.TargetProperty="(RotateTransform.Angle)" To="0" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!--RenderTransformOrigin="0.5,0.5"-->
                            <ContentPresenter  Content="{TemplateBinding Content}">
                                <ContentPresenter.RenderTransform>

                                    <RotateTransform x:Name="rotate" CenterX="0.5" CenterY="0.5" />

                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <!-- The template for the list header. This will scroll as a part of the list. -->
        <DataTemplate x:Key="citiesListHeader">
            <Border Background="Purple">
                <TextBlock Text="Cities Header" />
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="citiesListFooter">
            <Border Background="Green">
                <TextBlock Text="Cities Footer" />
            </Border>
        </DataTemplate>

        <!-- The template for city items -->
        <DataTemplate x:Key="citiesItemTemplate">
            <StackPanel Grid.Column="1"  VerticalAlignment="Top">               
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition  />
                        <ColumnDefinition  />
                        <ColumnDefinition  />                                              
                    </Grid.ColumnDefinitions>    
                    <Grid.RowDefinitions>                   
                        <RowDefinition/>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Column="0" Height="50" Tap="ProgLngGropus_Tap" Text="{Binding Name}" FontSize="26"  Margin="12,-5,12,6"/>                   
                    <ToggleButton Grid.Column="2" x:Name="MyToggleButton" Style="{StaticResource FlipButton}">
                        <ToggleButton.Content>
                            <Image Grid.Column="2" Margin="0,-10,-33,0" Height="40" Width="40" x:Name="ArrowDownImg"  Source="/Images/appbar.arrow.down.circle.rest.png" />                            
                        </ToggleButton.Content>
                    </ToggleButton>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Lang}" Grid.Column="0" Grid.Row="1" x:Name="Desc"
                       Foreground="Orange" Visibility="{Binding ElementName=MyToggleButton,
                        Path=IsChecked, Converter={StaticResource ValueConverterBoolToVis}}">                        
                    </TextBlock>

                </Grid>

            </StackPanel>
        </DataTemplate>      
    <DataTemplate x:Key="groupHeaderTemplate">
        <Border Background="YellowGreen" Margin="6">
            <TextBlock Text="{Binding Title}" FontSize="40" Foreground="Black"/>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="groupItemTemplate" >
        <Border Background="YellowGreen" Width="99" Height="99" Margin="6">
            <TextBlock Text="{Binding Title}" FontSize="40" Foreground="Black"/>
        </Border>
    </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

And my grid

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="g" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="g" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <toolkit:LongListSelector x:Name="Gropus" Background="Transparent"

                                  ItemTemplate="{StaticResource citiesItemTemplate}" 
                                  GroupHeaderTemplate="{StaticResource groupHeaderTemplate}" 
                                  GroupItemTemplate="{StaticResource groupItemTemplate}" >
                <toolkit:LongListSelector.GroupItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel/>
                    </ItemsPanelTemplate>
                </toolkit:LongListSelector.GroupItemsPanel>
            </toolkit:LongListSelector>


        </Grid>
    </Grid>

Answer 1

Ok so you actually have a few things going on here to throw you off. It appears your Margin is going to throw off your TransformOrigin you're rotating by as your center for that object (hence why you're getting your off center rotation.)

You can adjust your RenderTransformOrigin (which you currently have broken and commented out) to compensate for this to re-align your object center. Or you can fix your weird Margins and any other parts pushing your object you wish to rotate around.

Hope this helps. Please elaborate if you'd like more information. (ie; post your image, clearly explain your objective and a more accurate example can be provided. :)