如何为 UWP 元素设置状态？答案

【问题标题】：How to set state for UWP element?如何为 UWP 元素设置状态？
【发布时间】：2017-07-01 03:09:32
【问题描述】：

我有一个按钮，其状态会根据某些条件而改变。例如，当切换按钮打开时，改变颜色、大小、启用/禁用。我的目标是封装状态，以便我们可以执行以下操作：

 if (toggleButton.IsOn) btnName.state = State1;
 else btnName.state = State2;

我们在哪里定义状态 1 和状态 2（可能在 XAML 中？）。

这可能与 UWP 相关吗？

【问题讨论】：

“这可能与 UWP 相关吗？” -- 当然。基于 XAML 的 API 都希望您使用 MVVM 风格的编程来分离业务逻辑和 UI。根据state 的实际情况，您将需要在按钮样式中使用触发器，或者在视图模型中使用根据切换按钮状态进行调整的属性。鉴于您的问题有多模糊，它实在是太宽泛了，无法真正回答。您需要使用minimal reproducible example 和清晰、详细的说明准确地展示您正在做什么、尝试过什么以及遇到了什么具体问题。

标签： c# xaml uwp uwp-xaml windows-applications

【解决方案1】：

您可以使用VisualStateManager 调用控件的特定状态。例如，如果你想手动让ToggleSwitch进入它的On状态，你可以写-

VisualStateManager.GoToState(MyToggleSwitch, "On", true);

但不要这样做。因为这只是直观地设置状态，所以底层的IsOn属性仍然是False。

实际上，通过将IsOn 设置为True，将自动应用On 状态。这是因为在ToggleSwitch 的default style 的ToggleStates 视觉状态组内，有一个On 状态与一堆Storyboards，如下所示 -

<VisualState x:Name="On">
  <Storyboard>
    <DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                     Storyboard.TargetProperty="X"
                     To="24"
                     Duration="0" />
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
                                   Storyboard.TargetProperty="Opacity">
      <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
                                   Storyboard.TargetProperty="Opacity">
      <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
                                   Storyboard.TargetProperty="Opacity">
      <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
                                   Storyboard.TargetProperty="Opacity">
      <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
    </ObjectAnimationUsingKeyFrames>
  </Storyboard>
</VisualState>

这些Storyboards 将在IsOn 设置为True 时开始。这个触发逻辑封装在ToggleSwitch的代码中。因此，当您想为自定义控件定义自己的视觉状态时，您需要手动将状态属性（例如IsChecked、IsSelected、IsOn、IsEnabled）与其相应的状态挂钩，所以当其他人正在使用您的控件，他们可以简单地更新它们并期望应用正确的状态。

【讨论】：