Windows runtime 如何开发Windows Stroe邮件风格的应用程序

响应式UI，我知道VisualStateManager可以完成这项工作。但我不知道 怎么办

在广域模式下，它有两列。第一列显示列表，第二列显示同一页面中的内容

在狭窄模式下，它在一个页面和导航中只显示一件事。就像Win10邮件应用程序一样

---

非常感谢

这里有一个XAML代码：

  <Grid Background="White">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="VisualStateNarrow">

                <VisualState.Setters>
                    <Setter Target="emailDetails.(UIElement.Visibility)" Value="Collapsed"/>
                    <Setter Target="emailsList.(Grid.ColumnSpan)" Value="2"/>
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1"/>
                </VisualState.StateTriggers>
            </VisualState>


            <VisualState x:Name="VisualStateExtended">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="700"/>
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="340" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- Emails List -->
    <Grid x:Name="emailsList" Background="LightBlue" >
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Nothing to show!" />
    </Grid>

    <!-- Email Details -->
    <Grid Grid.Column="1" x:Name="emailDetails" Background="Blue" >
        <TextBlock HorizontalAlignment="Center" Foreground="White" VerticalAlignment="Center" Text="Select email to show!" />
    </Grid>

</Grid>

---

我已将“700 px”设置为扩展状态的最小宽度，您可以通过以下方式进行更改：

谢谢。这是非常好的代码。我不知道为什么

VisualStateExtended

没有

VisualState.Setters

，但它确实有效。您不必为主/默认设计或状态分配Setters:）。@startewho请接受它作为答案，以帮助其他人快速获得它：）