單擊按鈕時旋轉圖像

單擊按鈕時，我希望按鈕中的圖像旋轉+90度或-90度（取決於當前角度）。我嘗試了一些解決方案，但我只能讓整個按鈕旋轉，而不是隻在其內部的圖像。單擊按鈕時旋轉圖像

下面的代碼我到目前爲止（樣式屬性等省略了可讀性）：

<Button Width="110"> 
    <StackPanel Orientation="Horizontal"> 
     <TextBlock Text="Options" /> 
     <Image RenderTransformOrigin="0.5, 0.5" Source="../../Images/gt.png"> 
      <Image.RenderTransform> 
       <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" /> 
      </Image.RenderTransform> 
      <Image.Triggers> 
       <EventTrigger RoutedEvent="Button.Click"> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform" Storyboard.TargetProperty="Angle" To="90" Duration="0:0:5" FillBehavior="Stop" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Image.Triggers> 
     </Image> 
    </StackPanel> 
</Button>

這是按鈕的樣子（小箭頭應指向下來，當我點擊一次，然後點權當我再次點擊：

This is what the button looks like

任何人有一個想法

編輯：.NET 4.0，使用Visual Studio 2010。哦，解決這個「代碼隱藏」不是一種選擇。

來源

2012-01-11 KBoek

你使用的是什麼版本的.NET？你在使用Expression Blend嗎？ – Jens 2012-01-11 09:39:18

@Jens .NET 4和Visual Studio 2010 – KBoek 2012-01-11 09:41:26

嗯.. tricky =）請問爲什麼後面的代碼不是一個選項？這可以不必重複每個按鈕的代碼，使用ValueConverter，通過子類別按鈕或附加行爲來完成。 – Jens 2012-01-11 09:47:17

要注意的第一件事是，圖片永遠不會收到Button.Click事件，因爲它只是泡到按鈕的祖先不是它的後代。要觀察任何效果，你需要觸發例如的MouseDown。

實現此效果的一種方法是使用ToggleButton而不是Button並修改其「按下」狀態以旋轉箭頭。鬆散，這看起來像這樣：

<ToggleButton Content="Options"> 
    <ToggleButton.Style> 
     <Style TargetType="{x:Type ToggleButton}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ToggleButton}"> 
         <StackPanel Orientation="Horizontal"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="0:0:0.5"/> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"/> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ArrowImage"> 
               <EasingDoubleKeyFrame KeyTime="0" Value="-90"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentPresenter Height="100"/> 
          <Image x:Name="ArrowImage" Width="48" Height="48" RenderTransformOrigin="0.5,0.5"> 
           <Image.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform/> 
             <SkewTransform/> 
             <RotateTransform/> 
             <TranslateTransform/> 
            </TransformGroup> 
           </Image.RenderTransform> 
          </Image> 
         </StackPanel> 

        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </ToggleButton.Style> 
</ToggleButton>

來源

2012-01-11 10:17:50 Jens

這工作 - 在一些小的變化後。感謝您的努力。 – KBoek 2012-01-11 11:33:25

的Image不會觸發事件，你可以嘗試命名Button並設置EventTrigger.SourceName

來源

2012-01-11 10:03:29

嘗試過，但它給出了一個錯誤消息「在圖像中找不到元素MyFirstButton」 - 假設我將按鈕命名爲「MyFirstButton」。我嘗試了按鈕上的「名稱」和「x：名稱」。 – KBoek 2012-01-11 10:10:47

單擊按鈕時旋轉圖像

回答

相關問題