[NET10] Add VSM to Page template styles for orientation-based SafeAreaEdges handling

[Copilot]

Description

Adds Visual State Manager (VSM) support to Page template styles that automatically adjusts SafeAreaEdges based on device orientation using OrientationStateTrigger. This provides developers with a ready-to-use pattern for handling safe areas during orientation changes.

What Changed

Added VSM configuration to the Page style in both maui-mobile and maui-multiproject templates:

<Style TargetType="Page" ApplyToDerivedTypes="True">
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BackgroundColor" Value="{AppThemeBinding ...}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="OrientationStates">
                <VisualState x:Name="Portrait">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="SafeAreaEdges" Value="Container" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Landscape">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="SafeAreaEdges" Value="Container" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Benefits

• Automatic safe area handling: Page content automatically respects safe areas (notches, status bars, home indicators) when device orientation changes
• Developer-friendly template: Provides a clear, customizable example of using OrientationStateTrigger with SafeAreaEdges
• Consistent behavior: Uses Container region in both orientations, keeping content out of system UI areas while allowing flow under keyboard

Testing

• Added 4 unit tests in SafeAreaOrientationTests.cs validating VSM behavior with SafeAreaEdges
• Added 2 UI tests with test page (PageSafeAreaOrientationVSM.xaml) demonstrating orientation-based safe area changes
• All tests verify that SafeAreaEdges updates correctly during portrait/landscape transitions

Fixes #31298 (following up on #31297)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[NET10] Add a VSM into our template styles that takes into account SafeAreaEdges</issue_title>
<issue_description>### Description

Now that we've added some nifty new triggers for Orientation #31297

Let's look at adding some sane defaults for the VSM in our templates.

This way when you rotate the device it will modify the safe area based on the rotations. </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #31887

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

Add a test for DisplayOrientation.Unknown or rapid changes to ensure VSM falls back gracefully without exceptions. This covers edge cases like startup or sensor errors, verifying default SafeAreaEdges.