我创建了一个包含图像,文本和说明的用户控件。我希望动画它以在用户悬停时显示边框。 我已经这样做了,但动画会在控件的每个元素上触发,因此边框不断出现并再次消失。
这是我控制的代码。 请提前帮助并谢谢!
<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>
答案 0 :(得分:1)
除了设置透明背景(我把它放在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>
答案 1 :(得分:0)
控件没有背景。因此,只有文本和图像被点击测试可见。在LayoutRoot上尝试Background =“#00000000”(透明)。