There is an element that, when clicked, should change its background, but it doesn’t work to properly set a parameter for this to RoutedEvent in XAML . My code is:

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

Error text:

Event "Tapped" is different from RoutedEvent

    1 answer 1

    It would seem a trivial task and an error in something less, but simply supported Loaded and that's it. Everything is connected because of the change from Silverlight . Rotate this case with the Behaviors SDK (XAML)

    Add Library References -> Add Reference ...

    enter image description here

    Add references to the namespace:

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

    We rewrite your code a little

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

    Added x: Name to Border for which we will animate the Background . The animation itself is not located inside the media:ControlStoryboardAction , this is due to the fact that Behavior is not in the element tree, hence it does not have access to the Border by 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>

    UPDATE

    If you need to change something else, then it is worth noting that when declaring elements inside the 'Storyboard', they are added to the TimelineCollection . Add x:Name="MyTextBlock" to our TextBlock and update the animation:

      <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>
    • Thanks, looks quite nice. True, I have already managed to remake the Border in a Button and master the ControlTemplate for different states. I did not really have time to unsubscribe, as I am still finishing it. - user200141
    • I used your hint elsewhere, but I can’t figure out how to change the property of another element in parallel with the animation. Specifically to this example, let's say we are animating its color on a border, and changing the Text box (not the animation), or its Visibility. - user200141
    • one
      updated answer by adding - Andrii Krupka
    • Thank you for what you need! - user200141
    • Can I have a small question? I noticed the difference between Tapped="SomeEvent_Handler" and Behavior on the Grid element. The event extended to Tap for children, and for some reason, Behavior does not always work out at Tapa on the areas occupied by children. Is it possible to somehow replicate Behavior on children without copy-paste of the whole Behavior? - user200141 February