一次性设置多个视觉状态

本文关键字:视觉 状态 设置 一次性 | 更新日期: 2023-09-27 17:58:07

我定义了四种视觉状态,每种状态都会影响同一个银色灯光控件中的不同子控件。我有可能创建其他视觉状态来调用这些其他状态的组合吗?

因此,如果我有Visual_Group_1、Visual_Group_2、Visual_GGroup_3、Visual_Ggroup_4

  1. 有可能制造,比如说使用Visual_Group_1和Visual_Group_3
  2. 然后制作另一个名为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>

我的目标是有一个控件,当你点击从状态1到状态3的循环时,每个状态都会在不同的路径中淡出,同时淡出其他路径。我的问题是,在"淡出其余路径"部分有大量的复制+粘贴,所以如果我想添加Path5,就意味着将其添加到已经定义的每个视觉状态中,或者如果我想更改颜色或动画的渐变,我就必须对每个视觉状态进行更改。

一次性设置多个视觉状态

感谢您提供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要干净得多!:)
希望这能有所帮助!