WPF中的stackpanel mouseover上的動畫文本塊

Question

看看下面的XAML。

我想讓«HelloText»TextBlock在我用鼠標懸停在它上面時發光（因此故事板而不是IsMouseOver上的觸發器）。下面的代碼不起作用，因爲兩個TextBlocks具有相同的名稱。如何編輯此代碼，以便可以將«MyStackPanelStyle»應用於多個StackPanel？

<Window.Resources> 
    <Style TargetType="StackPanel" x:Key="MyStackPanelStyle"> 
    <Style.Triggers> 
     <EventTrigger RoutedEvent="StackPanel.MouseEnter"> 
     <BeginStoryboard> 
      <Storyboard> 
      <ColorAnimation Duration="0:0:0.5" Storeboard.TargetName="HelloText" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="LightGray" /> 
      </Storyboard> 
     </BeginStoryboard> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="StackPanel.MouseLeave"> 
     <BeginStoryboard> 
      <Storyboard> 
      <ColorAnimation Duration="0:0:0.5" Storeboard.TargetName="HelloText" Storyboard.Target="TextBlock" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="#505050" /> 
      </Storyboard> 
     </BeginStoryboard> 
     </EventTrigger> 
    </Style.Triggers> 
    </Style> 
</Window.Resources> 

<StackPanel style="MyStackPanelStyle"> 
    <TextBlock Name="HelloText" Text="Hello" /> 
    <TextBlock Text="World" /> 
</StackPanel> 

<StackPanel style="MyStackPanelStyle"> 
    <TextBlock Name="HelloText" Text="Hello" /> 
    <TextBlock Text="World" /> 
</StackPanel> 

編輯：

我讀過的一個article by Sergio Loscialo這lookded看好。不幸的是，這個解決方案適用於從AnimationPlaceholder繼承的所有目標元素，這意味着當我在頁面上有多個這些StackPanel時，它將不起作用。

Answer 1

我想«HelloText»的TextBlock爲「發光」當我鼠標

聲音喜歡懸停在它 要用於TextBlock，而不是StackPanel被提供Style：

<StackPanel> 
    <StackPanel.Resources> 
     <Style TargetType="TextBlock" x:Key="GlowingTextBlockStyle"> 
      <Setter Property="Foreground" Value="Black" /> 
      <Style.Triggers> 
       <EventTrigger RoutedEvent="UIElement.MouseEnter"> 
        <BeginStoryboard> 
         <Storyboard> 
          <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="UIElement.MouseLeave"> 
        <BeginStoryboard> 
         <Storyboard> 
          <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Style.Triggers> 
     </Style> 
    </StackPanel.Resources> 
    <StackPanel> 
     <TextBlock Text="Hello" Style="{StaticResource GlowingTextBlockStyle}" /> 
     <TextBlock Text="World" /> 
    </StackPanel> 
    <StackPanel> 
     <TextBlock Text="Hello" Style="{StaticResource GlowingTextBlockStyle}" /> 
     <TextBlock Text="World" /> 
    </StackPanel> 
</StackPanel> 

當我懸停在它用鼠標（因此故事板代替 觸發Ô n IsMouseOver）。

請注意同樣的效果可以用IsMouseOver通過設置EnterActions和ExitActions來實現：

<StackPanel> 
     <StackPanel.Resources> 
      <Style TargetType="TextBlock" x:Key="GlowingTextBlockStyle"> 
       <Setter Property="Foreground" Value="Black" /> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.ExitActions> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </StackPanel.Resources> 
     <StackPanel> 
      <TextBlock Text="Hello" Style="{StaticResource GlowingTextBlockStyle}" /> 
      <TextBlock Text="World" /> 
     </StackPanel> 
     <StackPanel> 
      <TextBlock Text="Hello" Style="{StaticResource GlowingTextBlockStyle}" /> 
      <TextBlock Text="World" /> 
     </StackPanel> 
    </StackPanel> 
</StackPanel> 

以上回答假設你沒有它涉及的TextBlock到要求你StackPanel（如始終使用StackPanel對第一個TextBlock進行動畫製作，或始終使用特定名稱對TextBlock進行動畫製作）。如果是這樣的情況下，依靠Name會變脆，你會過得更好創建一個自定義的控制或用戶控制與屬性或命名的一部分，特殊內容。

編輯：

<Style TargetType="TextBlock" x:Key="GlowingTextBlockStyle"> 
    <Setter Property="Foreground" Value="Black" /> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Panel}}, Path=IsMouseOver}" Value="True"> 
      <DataTrigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </DataTrigger.EnterActions> 
      <DataTrigger.ExitActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </DataTrigger.ExitActions> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

希望這有助於：

要當鼠標進入StackPanel你可以只適應上述溶液使用DataTrigger，而不是啓動動畫！