一次设置多个视觉状态？答案

【问题标题】：Setting multiple visual states in one go?一次设置多个视觉状态？
【发布时间】：2011-05-31 16:15:05
【问题描述】：

我定义了四种视觉状态，每种状态都会影响同一个银光控件中的不同子控件。我是否可以创建其他视觉状态来调用这些其他视觉状态的组合？

所以如果我有 Visual_Group_1、Visual_Group_2、Visual_Group_3、Visual_Group_4

是否有可能制作，比如说 Visual_Comb_1 组使用 Visual_Group_1 中的状态和 Visual_Group_3？
然后再制作一个名为 Visual_Comb_2 的，它使用 Visual_Group_4 和 Visual_Group_3？

我很高兴实现solution in xaml or codebehind or a combination of both。我目前正在研究的替代方案涉及大量的代码复制+粘贴，我不太愿意这样做。

每个请求的更多细节：

这是我现在大致拥有的：

<VisualState x:Name="State1">
    <ColorAnimation Storyboard.TargetName="Path1"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="Blue" Duration="0:0:0.5" />
    // fade out the rest of the paths...
    <ColorAnimation Storyboard.TargetName="Path2"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
    <ColorAnimation Storyboard.TargetName="Path3"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
    <ColorAnimation Storyboard.TargetName="Path4"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
</VisualState>

<VisualState x:Name="State2">
    <ColorAnimation Storyboard.TargetName="Path3"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="Red" Duration="0:0:0.5" />
    // fade out the rest of the paths...
    <ColorAnimation Storyboard.TargetName="Path2"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
    <ColorAnimation Storyboard.TargetName="Path1"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
    <ColorAnimation Storyboard.TargetName="Path4"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
</VisualState>

<VisualState x:Name="State3">
    <ColorAnimation Storyboard.TargetName="Path4"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="Pink" Duration="0:0:0.5" />
    // fade out the rest of the paths...
    <ColorAnimation Storyboard.TargetName="Path2"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
    <ColorAnimation Storyboard.TargetName="Path1"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
    <ColorAnimation Storyboard.TargetName="Path3"
                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                    To="#00000000" Duration="0:0:0.5" />
</VisualState>

我的目标是有一个控件，当您单击从 state1 到 state3 的循环时，每个状态都会淡入不同的路径，同时淡出其他路径。我的问题是在“淡出其余路径”部分中有大量复制+粘贴，所以如果我想添加一个 Path5 这意味着将它添加到已经定义的每个视觉状态，或者如果我想要要更改淡出颜色或动画，我必须对每个视觉状态都进行更改。

【问题讨论】：

我希望我能提供帮助，但是根据您提供的问题描述，很难具体了解您想要发生的事情。是否可以发布基本的 XAML 结构，以便我们可以看到在可视化树中实现 VisualStates 的位置，并提供您想要发生的具体示例。（例如，我想点击这个按钮，然后让“Control A”进入这个视觉状态，“Control B”进入这个状态，其余的都进入其他状态。）
我刚刚添加了一些 xaml 来展示我目前正在做什么以及我希望如何改进上述代码 :)

标签： c# silverlight visualstatemanager visualstates

【解决方案1】：

感谢您提供 XAML。这就是我解决问题的方法。

首先，为每个Path 单独创建VisualStates。（我建议使用Style 来代替您将非常相似的VisualState 重新编码到每个路径中，但我对它们不够熟悉，不知道您是否可以为每个路径应用不同的颜色。）

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="Path1States">
        <VisualState x:Name="Activate">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Path1"
                                Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                                To="Blue"
                                Duration="0:0:0.5" />
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Deactivate">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Path1"
                                Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                                To="#00000000"
                                Duration="0:0:0.5" />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="Path2States">
        <!-- ... etc ... -->
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

现在，在包含每个相关对象的代码隐藏中创建一个 List，然后正确设置您自己的 GoToState 函数，使其打开一个对象的 in 状态，并调用 off 状态其余的。

List<Path> pathList;

public Page() // constructor
{
    InitializeComponent();
    pathList = new List<Path>();
    pathList.Add(Path1);
    // and so forth
}

// Call this function when you want to change the state
private void ActivatePath(Path p)
{
    foreach (Path listItem in pathList)
    {
        // If the item from the list is the one you want to activate...
        if (listItem == p)
            VisualStateManager.GoToState(listItem, "Activate", true);
        // otherwise...
        else
            VisualStateManager.GoToState(listItem, "Deactivate", true);
    }
}

如果我在 XAML 和样式方面做得更好，我可能会有一种更简洁的方式来创建 VisualStates。然而，我的强项更多是在逻辑和编码方面。话虽这么说，写出相同的VisualState 四五次要干净得多！ :)
希望这会有所帮助！

【讨论】：