Question

我有一个图像应该在切换时旋转，但它会以u形状移动。换句话说，它以一个有角度的路径移动，即180度。

如何将图像旋转180度？

下面是透明的图像，你可以保存它来查看它： The image that i want to spin 我有一个长列表选择器，当箭头图像上的用户选项卡打开包含文本的文本块时，图像必须旋转180，即箭头必须向上指向动作，就像在wphone7主屏幕箭头上一样。

我的页面资源

<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>

我的网格

<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

好的，所以你实际上有一些事情会让你失望。看起来你的Margin会抛弃你正在旋转的TransformOrigin作为你对象的中心（这就是你偏离中心旋转的原因。）

您可以调整RenderTransformOrigin（您当前已经破坏并注释掉）以补偿此重新对齐您的对象中心。或者你可以修复你奇怪的边距和推动你想要旋转的物体的任何其他部分。

希望这会有所帮助。如果您想了解更多信息，请详细说明。（即;发布您的图像，清楚地解释您的目标，并提供更准确的示例。）

WP7 / Xaml从其中心旋转图像

1 个答案: