0

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);
Improve this question
2
  • try using just "Click" instead of Button.Click, I've only ever seen method names in this property Commented Aug 28, 2015 at 19:57
  • 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). Commented Aug 28, 2015 at 20:01

1 Answer 1

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

you could take this a step further by creating a set of visual states, and instead of launching the storyboard, use the GoToState action to change to a different state. much more clean and easy to add additional controls to the state. again, not sure if this is what you're wanting to do, but either way I hope this is helpful!
I liked this approach better so I updated my question to go in that direction. However, the Opacity of the other buttons aren't changing when I call GoToState
try moving the visualstatemanager xaml so that it's inside the grid tag

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.