WP7/Xaml 회전 중심의 이미지

Question

이미지가 회전 할 때 회전해야하지만 이미지는 u 모양으로 움직입니다. 바꾸어 말하면, 각도 경로, 즉 180 도로 이동한다.

이미지를 180도 회전시키는 방법은 무엇입니까? 또한, 이미지가 즉, (180)를 회전해야한다 을 나는 longlistselector이 사용자 탭은 텍스트가 들어있는 TextBlock이 열립니다 화살표 이미지를 때 : 아래

는 투명한 이미지 당신이 그것을 볼 수 저장할 수있다 화살표는 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

좋아 내 격자입니다. 귀하의 여백이 TransformOrigin을 벗어 던져서 해당 객체의 중심으로 회전하고있는 것입니다 (따라서 중심 회전이 왜 돌아 오지는 않습니다).

RenderTransformOrigin을 조정할 수 있습니다 그리고 주석 처리하여) 이것을 수정하여 객체 센터를 다시 정렬하십시오. 또는 이상한 여백 및 회전하려는 개체를 밀어 넣는 다른 부분을 수정할 수 있습니다.

희망이 도움이됩니다. 자세한 정보가 필요하면 자세히 설명하십시오. (즉, 귀하의 이미지를 게시, 명확하게 귀하의 목표를 설명하고 더 정확한 예제를 제공 할 수 있습니다 :).