网格的视觉状态答案

【问题标题】：Visual States for Grid网格的视觉状态
【发布时间】：2016-09-16 22:13:31
【问题描述】：

我想为 Grid 定义一个样式，我想根据不同的状态更改 Grid 的边框粗细。就像在鼠标/指针上一样，我想让厚度为 1 并且在正常状态下（当点不在网格上时）我希望它为 0.5 此外，我的 Grid 有一个文本框，因此当该文本框处于焦点位置（正在编辑）时，Grid 边框应设置为 1（如指针悬停状态）。

这是我的代码：

<Grid>
    <TextBox
        BorderThickness="0"
        Height="40"
        Text="Text" />
</Grid>

【问题讨论】：

标签： wpf uwp uwp-xaml

【解决方案1】：

您可以使用样式触发器来更改鼠标悬停的粗细。对于文本框获取焦点，您可以使用事件触发器。

【讨论】：

此链接将有助于您实现这一目标。 wpf-tutorial.com/styles/trigger-datatrigger-event-trigger
感谢您的链接。实际上 UWP 中没有 Style.Triggers。另外，我想如何更改网格的边框而不是文本框的边框。我可以以某种方式将目标元素绑定到我想要更改边框粗细属性的位置吗？
我已经按照WPF解释过了。我认为这在 UWP 中应该是一样的。
不是，但我想必须有一个解决方法（对于 Style.Triggers）。等着瞧。谢谢

【解决方案2】：

如果您使用的是 UWP，则可以使用 Xaml 交互库来触发此操作。一个例子：

<Page>
    <Page.Resources>
        <Storyboard x:Name="HideTextBoxAnimation">
            <DoubleAnimation
                Storyboard.TargetName="TxtBx"
                Storyboard.TargetProperty="Opacity"
                From="1"
                To="0"
                Duration="0:0:0.2" />
        </Storyboard>
    </Page.Resources>
    <Grid>
        <i:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="Tapped">
                <media:ControlStoryboardAction Storyboard="{StaticResource HideTextBoxAnimation}" />
            </core:EventTriggerBehavior>
        </i:Interaction.Behaviors>
        <TextBox x:Name="TxtBx" Opacity="1"
            BorderThickness="0"
            Height="40"
            Text="Text" />
    </Grid>
</Page>

这不是您等待的确切故事板，但我想您得到了。只需更改 EventTriggerBehavior 的 EventName 和情节提要以满足您的需要。

在页面顶部，您需要这些：

xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:media="using:Microsoft.Xaml.Interactions.Media"

希望这会有所帮助。

【讨论】：

【解决方案3】：

绝对可以在 UWP 中完成。他们不允许您使用样式触发器（为什么，我不知道），但您必须使用 VisualStates 和 Storyboards。恕我直言，它们比 WPF 触发器更加混乱和复杂，但它们确实有效，这就是所有 UWP 默认样式的工作方式。

如果您还没有，请查看default UWP styles and templates。 Button 是 good place to start。您可以确切地看到它们如何更改Button 的视觉属性以响应不同的VisualStates。不幸的是——这就是触发器可以派上用场的地方——输入事件和VisualStates 之间的关系都是在代码中完成的，所以如果你正在使用的控件的内置VisualStates 不是' t 足以满足您的需求，您需要在代码隐藏中手动设置它们。但是，您仍然可以为同一个控件使用不同的Styles，这似乎是您的主要目标。

Blend 对于这样的事情也非常有用，因为您可以很容易地测试出所有的Storyboards。

希望这会有所帮助。顺便说一句，大约一年前我放弃了 Windows Store / UWP 并回到了直接的 WPF 并且没有回头。随着桌面应用程序转换器的推出，我认为没有任何理由使用 UWP，除非你想使用 XBox，但那是你的决定。 :)

【讨论】：