1

Есть элемент, по клику на который должна происходить смена его фона, но никак не получается правильно задать для этого параметр для RoutedEvent в XAML. Мой код:

<Border Tapped="Border_Tapped"
        Height="50"
        HorizontalAlignment="Stretch"
        CornerRadius="5"
        BorderBrush="#9e9e9e"
        BorderThickness="0 0 0 3">
        <Border.Background>
            <SolidColorBrush x:Name="Background" Color="#ff567cd3"/>
        </Border.Background>
        <Border.Triggers>
            <EventTrigger RoutedEvent="Tapped">   <!-- Вот тут ошибка -->
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background"
                                                      Storyboard.TargetProperty="Color"
                                                      Duration="0:0:.3"
                                                      EnableDependentAnimation="True">
                            <LinearColorKeyFrame Value="#ff9e9e9e" KeyTime="0:0:0.15"/>
                            <LinearColorKeyFrame Value="#ff567cd3" KeyTime="0:0:0.3"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>

        <TextBlock VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   FontSize="20"
                   FontWeight="SemiBold"
                   Foreground="#fff"
                   Text="Нажми меня"/>
</Border>

Текст ошибки:

Событие "Tapped" отлично от RoutedEvent

1 ответ 1

2

Казалось бы тривиальная задача и ошибка в чем-то меньшем, но попросту поддерживается только Loaded и все. Все связано из-за смены с Silverlight. Провернуть это дело можно с помощью Behaviors SDK (XAML)

Добавляем бибилиотеку References -> Add Reference ...

введите сюда описание изображения

Добавляем ссылки на пространство имен:

xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:media="using:Microsoft.Xaml.Interactions.Media"

Ваш код немного переписываем

<Border Height="50"
        HorizontalAlignment="Stretch"
        CornerRadius="5"
        x:Name="MyBorder"
        BorderBrush="#9e9e9e"
        Background="#ff567cd3"
        BorderThickness="0 0 0 3">
    <i:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="Tapped">
            <media:ControlStoryboardAction Storyboard="{StaticResource ColorStoryboard}"/>
        </core:EventTriggerBehavior>
    </i:Interaction.Behaviors>

    <TextBlock VerticalAlignment="Center"
            HorizontalAlignment="Center"
            FontSize="20"
            FontWeight="SemiBold"
            Foreground="#fff"
            Text="Нажми меня"/>
</Border>

Добавил x:Name к Border для которого будем анимировать Background. Саму анимацию расположим не внутри media:ControlStoryboardAction, это связано с тем, что Behavior находится не в дереве элементов, отсюда не имеет доступ к Border по x:Name:

<Page.Resources>
    <Storyboard x:Name="ColorStoryboard">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
                                      Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                      Duration="0:0:0.3"
                                      EnableDependentAnimation="True">
            <LinearColorKeyFrame Value="#ff9e9e9e"
                                 KeyTime="0:0:0.15"/>
            <LinearColorKeyFrame Value="#ff567cd3"
                                 KeyTime="0:0:0.3"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

ОБНОВЛЕНИЕ

Если нужно изменить ещё что-то, то стоит заметить, что при объявление элементов внутри 'Storyboard' они добавляется в колелкцию TimelineCollection. Добавим x:Name="MyTextBlock" к нашему TextBlock и обновим анимацию:

    <Storyboard x:Name="ColorStoryboard">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
                                      Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                      Duration="0:0:0.3"
                                      EnableDependentAnimation="True">
            <LinearColorKeyFrame Value="#ff9e9e9e"
                                 KeyTime="0:0:0.15"/>
            <LinearColorKeyFrame Value="#ff567cd3"
                                 KeyTime="0:0:0.3"/>
        </ColorAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyTextBlock"
                                       Storyboard.TargetProperty="Text">
            <DiscreteObjectKeyFrame KeyTime="0"
                                    Value="Спасибо"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
6
  • Спасибо, выглядит весьма неплохо. Правда я уже успел переделать Border в Button и освоить ControlTemplate для разных состояний. Не успел правда отписаться, так как доделываю еще.
    – user200141
    16 фев 2016 в 12:31
  • Использовал Вашу подсказку в другом месте, но не могу понять, как можно параллельно анимации изменить свойство другого элемента. Конкретно к этому примеру, допустим мы по тапу на бордер анимируем его цвет, и у текстбокса(не анимация) меняем Текст, или его Visibility.
    – user200141
    17 фев 2016 в 11:36
  • 1
    обновил ответ дополнением 17 фев 2016 в 12:07
  • Спасибо, то что нужно!
    – user200141
    17 фев 2016 в 12:09
  • А можно еще небольшой вопрос? Заметил разницу между Tapped="SomeEvent_Handler" и Behavior на элементе Grid. Событие распространялось на Тап по дочерним элементам, а Behavior почему-то не всегда отрабатывает при Тапе на областях, занятых дочерними элементами. Можно как-то растиражировать Behavior на дочерние элементы без копипаста всего бехавиора?
    – user200141
    18 фев 2016 в 6:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.