ユーザーコントロール（Silverlight + Expression Blend）のすべての要素ではなく、ストーリーボードを1回だけアクティブにする方法

Question

イメージ、テキスト、および説明を持つユーザーコントロールを作成しました。ユーザーがマウスを移動したときに境界線を表示するようにアニメーション化したいと思います。 私はそれをしましたが、アニメーションはコントロールの各要素で起動します。そのため、境界線は表示され続け、消えます。

私のコントロールのコードは次のとおりです。 事前にお手伝いしていただきありがとうございます。

<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
mc:Ignorable="d" 
x:Class="SilverlightApplication2.CommandLinks" 
d:DesignWidth="640" d:DesignHeight="480" Width="280" Cursor="Hand"> 
<UserControl.Resources> 
    <Storyboard x:Name="CommandLinksMounseOver"> 
     <ColorAnimation Duration="0:0:0.1" To="#FFB0D0E0" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="brdBorder" d:IsOptimized="True"/> 
     <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="brdBorder" d:IsOptimized="True"/> 
     <DoubleAnimation Duration="0:0:0.1" To="-1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="brdBorder" d:IsOptimized="True"/> 
    </Storyboard> 
    <Storyboard x:Name="CommandLinksMouseOut"> 
     <ColorAnimation Duration="0:0:0.1" To="#FFD9E8F0" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="brdBorder" d:IsOptimized="True"/> 
     <DoubleAnimation Duration="0:0:0.1" To="-1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="brdBorder" d:IsOptimized="True"/> 
     <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="brdBorder" d:IsOptimized="True"/> 
    </Storyboard> 
</UserControl.Resources> 
<i:Interaction.Triggers> 
    <i:EventTrigger EventName="MouseEnter"> 
     <ei:ControlStoryboardAction x:Name="OnMouseOut" Storyboard="{StaticResource CommandLinksMouseOut}"/> 
     <ei:ControlStoryboardAction x:Name="OnMouseOver" Storyboard="{StaticResource CommandLinksMounseOver}"/> 
    </i:EventTrigger> 
</i:Interaction.Triggers> 

<Grid x:Name="LayoutRoot"> 
    <Border x:Name="brdBorder" Margin="0" CornerRadius="3" BorderThickness="1" Padding="8" BorderBrush="#00B3D1E1" RenderTransformOrigin="0.5,0.5"> 
     <Border.RenderTransform> 
      <CompositeTransform/> 
     </Border.RenderTransform> 
     <Grid> 
      <Image x:Name="imgIcon" HorizontalAlignment="Left" Width="32" Margin="0" Source="Universal Binary.png" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Height="32"> 
       <Image.RenderTransform> 
        <CompositeTransform/> 
       </Image.RenderTransform> 
      </Image> 
      <TextBlock x:Name="txtMainInstruction" TextWrapping="Wrap" Text="Main instruction text" VerticalAlignment="Top" Padding="0" Foreground="#FF2C5A88" FontSize="13.333" FontFamily="Verdana" Margin="40,0,0,0" RenderTransformOrigin="0.5,0.5"> 
       <TextBlock.RenderTransform> 
        <CompositeTransform/> 
       </TextBlock.RenderTransform> 
      </TextBlock> 
      <TextBlock x:Name="txtDescription" TextWrapping="Wrap" Text="Enter the description here if needed" VerticalAlignment="Top" Foreground="#FF666666" FontSize="12" FontFamily="Verdana" Margin="40,20,0,0" RenderTransformOrigin="0.5,0.5"> 
       <TextBlock.RenderTransform> 
        <CompositeTransform/> 
       </TextBlock.RenderTransform> 
      </TextBlock> 
     </Grid> 
    </Border> 
</Grid> 

Answer 1

制御には、バックグラウンドを持っていません。したがって、テキストと画像のみがヒットテストで表示されます。 LayoutRootでBackground = "＃00000000"（透明）を試してみてください。

Answer 2

すでに提案されているように透明な背景（私はそれをbrdBorder要素に置きます）を設定すると、トリガーに問題があります。彼らは、次のようになります。

<i:Interaction.Triggers> 
    <i:EventTrigger EventName="MouseLeave"> 
     <ei:ControlStoryboardAction x:Name="OnMouseOut" Storyboard="{StaticResource CommandLinksMouseOut}"/> 
    </i:EventTrigger> 
    <i:EventTrigger EventName="MouseEnter"> 
     <ei:ControlStoryboardAction x:Name="OnMouseOver" Storyboard="{StaticResource CommandLinksMounseOver}"/> 
    </i:EventTrigger> 
</i:Interaction.Triggers>