Cannot set property of another element using EventTrigger in XAML

0
votes

I have the following XAML code that contains 3 buttons. The goal is to change the Opacity of the other two buttons when one of them is pressed.

 <Grid x:Name="MainToolbar">
    <Grid Grid.Row="0" Background="Red">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button x:Name="pinButton" HorizontalAlignment="Center" Grid.Column="0" Background="Red">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="newsButton" Storyboard.TargetProperty="Opacity">
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="weatherButton" Storyboard.TargetProperty="Opacity">
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
            <Button.Template>
                <ControlTemplate>
                    <Image Source="/Assets/Top-Pin-Icon-60px.png" Stretch="None"/>
                </ControlTemplate>
            </Button.Template>
        </Button>
        <Button x:Name="newsButton" HorizontalAlignment="Center" Grid.Column="1" Background="Red">
            <Image Source="/Assets/Top-News-Icon-60px.png" Stretch="None"/>
        </Button>
        <Button x:Name="weatherButton" HorizontalAlignment="Center" Grid.Column="2" Background="Red">
            <Image Source="/Assets/Top-Weather-Icon-60px.png" Stretch="None"/>
        </Button>
    </Grid>
</Grid>

I would think that using EventTrigger would be the solution for this type of requirement, but I got the error: Failed to assign to property 'Windows.UI.Xaml.EventTrigger.RoutedEvent' on the line that sets the RoutedEvent. I checked and I'm sure the value should be "Button.Click".

This is for a Universal Windows App so I'm not sure if that would make a difference. Is there another way? Or a solution to this? The code above is in a UserControl.

UPDATE:

After some research, it looks like the better solution is by using Visual States, so I decided to try the following. 

<UserControl
x:Class="Innobec.Mobile.Apps.CityScope.UserControls.TopHorizontalToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Innobec.Mobile.Apps.CityScope.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="80"
d:DesignWidth="400">

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ActiveButtonStates">
        <VisualState x:Name="PinActiveState">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="newsButton" Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:2"/>
                <DoubleAnimation Storyboard.TargetName="weatherButton" Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:2"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="NewsActiveState">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="pinButton" Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:2"/>
                <DoubleAnimation Storyboard.TargetName="weatherButton" Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:2"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="WeatherActiveState">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="pinButton" Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:2"/>
                <DoubleAnimation Storyboard.TargetName="newsButton" Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:2"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MainToolbar">
    <Grid Grid.Row="0" Background="Red">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Button x:Name="pinButton" HorizontalAlignment="Center" Grid.Column="0" Background="Red" Click="pinButton_Click">
            <Image Source="/Assets/Top-Pin-Icon-60px.png" Stretch="None"/>
        </Button>
        <Button x:Name="newsButton" HorizontalAlignment="Center" Grid.Column="1" Background="Red">
            <Image Source="/Assets/Top-News-Icon-60px.png" Stretch="None"/>
        </Button>
        <Button x:Name="weatherButton" HorizontalAlignment="Center" Grid.Column="2" Background="Red">
            <Image Source="/Assets/Top-Weather-Icon-60px.png" Stretch="None"/>
        </Button>
    </Grid>
</Grid>

However, nothing happens when I make the call to the following line in code-behind, so what am I doing wrong now?:

VisualStateManager.GoToState(this, "PinActiveState", false);
1
xamlwin-universal-appvisualstatemanager
try using just "Click" instead of Button.Click, I've only ever seen method names in this property – SelAromDotNet
I tried that and the XAML code shows squiggly lines saying 'The member Click is not recognized or is not accessible'. Could this be because it's a Universal Windows App so things have changed? This XAML code is inside a UserControl (if it helps). – Ray

1 Answers

0
votes

I'm not sure if this is equivalent to what you're trying to accomplish, but by pulling the storyboard out of the button, you can use the behaviors sdk to trigger it with an event, here's the code:

<UserControl.Resources>
    <Storyboard x:Name="NewsButtonStoryBoard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="newsButton" Storyboard.TargetProperty="Opacity">
            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="weatherButton" Storyboard.TargetProperty="Opacity">
            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.FontFamily)" Storyboard.TargetName="userControl">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <FontFamily>Global User Interface</FontFamily>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="MainToolbar">
    <Grid Grid.Row="0" Background="Red">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button x:Name="pinButton" HorizontalAlignment="Center" Grid.Column="0" Background="Red">
            Button One
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Click">
                    <Media:ControlStoryboardAction Storyboard="{StaticResource NewsButtonStoryBoard}"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </Button>
        <Button x:Name="newsButton" HorizontalAlignment="Center" Grid.Column="1" Background="Red">
            Button Two
        </Button>
        <Button x:Name="weatherButton" HorizontalAlignment="Center" Grid.Column="2" Background="Red">
            Button Three
        </Button>
    </Grid>
</Grid>

make sure to add the Behaviors SDK reference and xmlns to the control:

    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"

I just tested this in a blank project (in a user control) and clicking the first button dims the other two (I'm guessing that's what you're trying to do). I changed the content of the buttons since i dont have your images, but hopefully you get the idea and it's helpful to you.