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

Question

的响应UI，我知道VisualStateManager能做到这一点work.Bu我不知道 怎么办

以宽屏幕模式，它有两个columns.The第一列显示一个列表和第二场演出在同一个页面中的内容

而且在狭窄的模式，它只能说明一两件事一次在一个页面，白衣导航。就像Win10邮件应用程序一样。

非常感谢

Answer 1

下面是一个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像素' 作为一个最小宽度状态，可以通过以下方式更改：<AdaptiveTrigger MinWindowWidth="700"/>