如何開發的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"/>