使用Visual State更改网格边距 |UWP WinUI3

Question

我在样式中有一个grid。如果此grid的宽度> 640，我想将其背景更改为红色。如果grid宽度 <= 640，我想将背景更改为黄色。

如何仅使用 xaml 而不使用c#代码？

Obs：是grid宽度，而不是window宽度 （Adaptative.Trigger MinWindowWidth）

 

此问题由Change Grid Margin Using Visual State | UWP, WinUI3 - Microsoft Q&A总结而来.

 

Answer 1

你好

欢迎来到 Microsoft Q&A！

根据该文档，VisualStateManager仅适用于派生自 Control 的类，在 WinUI3 中，Window 不是 Control，因此VisualStateManager不适用于它。

对于 UWP，可以在Page 中使用。

<Grid x:Name="grid" Background="Yellow">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="forTablet">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="grid.Background" Value="Red"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

但对于 WinUI3，需要为 Gird 添加一个Page。

<?xml version="1.0" encoding="utf-8"?>
<Window
     ...
     ... >
    <Page>
        <Grid x:Name="grid" Background="Yellow">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="VisualStateGroup">
                    <VisualState x:Name="forTablet">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="600"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="grid.Background" Value="Red"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </Page>
        
</Window>

谢谢。

---

如果答案是正确的解决方案，请点击“接受答案”并投赞成票。如果您对此答案有其他疑问，请点击“评论”。注意：如果您想接收此线程的相关电子邮件通知，请按照我们文档中的步骤启用电子邮件通知。