Установка нескольких визуальных состояний за один раз? - PullRequest
Новая
       38

Установка нескольких визуальных состояний за один раз?

2 голосов
/ 30 мая 2011

У меня есть четыре визуальных состояния, каждое из которых влияет на разные дочерние элементы управления в пределах одного элемента управления серебристым светом. Могу ли я создать другие визуальные состояния, которые вызывают комбинацию этих других?

Так что, если у меня есть Visual_Group_1, Visual_Group_2, Visual_Group_3, Visual_Group_4

  1. Можно ли сделать, скажем, Группа Visual_Comb_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, каждое состояние исчезает на своем пути, затухая на других путях. Моя проблема в том, что в разделе «исчезновение остальных путей» есть тонна copy + paste, поэтому, если бы я хотел добавить Path5, это означало бы добавление его в каждое определенное визуальное состояние или, если бы я хотел чтобы изменить цвет затухания или анимацию, я должен сделать это для каждого визуального состояния.

1 Ответ

4 голосов
/ 31 мая 2011

Спасибо за предоставление XAML. Вот как бы я решил эту проблему.

Прежде всего, создайте VisualStates индивидуально для каждого Path. (Я бы порекомендовал использовать 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 так, чтобы она включала входное состояние для одного объекта и вызывала отключенное состояние для остальное. 

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 четыре или пять раз! :)
Надеюсь, это поможет!

...