Change Grid Margin Using Visual State | UWP, WinUI3

Question

I have a grid inside a Style. If this grid has a width > 640 I'd like to change its background for red. If the grid width <= 640 I'd like to change the background for yellow.

How can I do it only using xaml, without code behind?

Obs: It is the grid width, not window width (Adaptative.Trigger MinWindowWidth)

Answer 1

Hi @Anderson Rodrigues Cavalcante ,

Welcome to Microsoft Q&A!

According to the document, VisualStateManager only applies to classes that derive from Control, In WinUI3, Window is not a Control, so VisualStateManager does not work with it.

For UWP, you can use the code in 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>

But for WinUI3, you need to add a page for the Gird.

<?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>

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.