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是这类要求的解决方案，但我收到了错误：无法分配给属性＆＃39; Windows.UI.Xaml.EventTrigger.RoutedEvent＆＃39;在设置RoutedEvent的行上。我查了一下，我确定价值应该是＆＃34; Button.Click＆＃34;。

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

更新：

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

<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通过事件触发它，此处＆＃ 39;代码：

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

我刚刚在一个空白项目中测试了这个（在用户控件中），然后点击第一个按钮使其他两个调暗（我猜测你正在尝试做什么）。我改变了按钮的内容，因为我没有你的图像，但希望你能得到这个想法，它对你有帮助。

无法在XAML

1 个答案: