无法在 XAML 中使用 EventTrigger 设置另一个元素的属性

Question

我有以下包含 3 个按钮的 XAML 代码。目标是在按下其中一个按钮时更改其他两个按钮的不透明度。

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

我认为使用 EventTrigger 将是此类需求的解决方案，但我收到错误：无法在设置 RoutedEvent 的行上分配给属性“Windows.UI.Xaml.EventTrigger.RoutedEvent”。我检查了，我确定值应该是“Button.Click”。

这是针对通用 Windows 应用程序的，所以我不确定这是否会有所作为。还有其他方法吗？或者解决这个问题？ 上面的代码在 UserControl 中。

更新：

经过一些研究，看起来更好的解决方案是使用视觉状态，所以我决定尝试以下方法。

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

但是，当我在代码隐藏中调用以下行时，什么都没有发生，那么我现在做错了什么？：

VisualStateManager.GoToState(this, "PinActiveState", false);

Answer 1

我不确定这是否等同于您要完成的任务，但是通过将情节提要从按钮中拉出，您可以使用行为 sdk 通过事件触发它，代码如下：

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

确保将 Behaviors SDK 引用和 xmlns 添加到控件中：

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

我刚刚在一个空白项目（在用户控件中）中对此进行了测试，然后单击第一个按钮会使其他两个按钮变暗（我猜这就是您想要做的）。由于我没有您的图片，因此我更改了按钮的内容，但希望您能理解并且对您有所帮助。