Как активировать раскадровку только один раз вместо всех элементов пользовательского контроля (Silverlight + Expression Blend) - PullRequest
Новая
       19

Как активировать раскадровку только один раз вместо всех элементов пользовательского контроля (Silverlight + Expression Blend)

0 голосов
/ 15 ноября 2011

Я создал пользовательский элемент управления с изображением, текстом и описанием. Я хотел бы анимировать его для отображения границы, когда пользователь наводит курсор мыши. Я сделал это, но анимация срабатывает на каждом элементе элемента управления, поэтому граница продолжает появляться и снова исчезать.

Вот код для моего контроля. Пожалуйста, помогите и спасибо заранее! 

    <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>

Ответы [ 2 ]

1 голос
/ 16 ноября 2011

Наряду с установкой прозрачного фона (я поместил его в элемент 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>
0 голосов
/ 15 ноября 2011

Элемент управления не имеет фона. Поэтому видны только текст и изображение. Попробуйте Background = "# 00000000" (прозрачный) в LayoutRoot.

...