XAML UIのAdaptive Column

Question

Windows Universal Platform用の適応型UIを作成しようとしています。私は現在、幅が720より大きい場合にユーザーコントロールを表示するVisual State Managerを持っています。外部グリッドには2つの等しい列があります。ある列にはListviewがあり、もう1つの列には詳細を表示するユーザーコントロールがあります。幅が720より小さい場合、2番目の列が消えるようにするにはどうすればよいですか？すべての助けは非常にappriciatedです。ここにサンプルがあります。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="DetailsPage.Visibility" Value="Visible" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <ListView Name="lvElements"> 
    </ListView> 

    <local:UCDetails Visibility="Collapsed" x:Name="DetailsPage" Grid.Column="1" /> 

</Grid> 

Answer 1

あなたの列に名前を提供することができます。

<Grid.ColumnDefinitions> 
     <ColumnDefinition x:Name="DetailColumn" Width="*"/> 
     <ColumnDefinition x:Name="MasterColumn" Width="336"/> 
    </Grid.ColumnDefinitions> 

その後、単に幅を変更します。

<VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="AdaptiveStates"> 
      <VisualState x:Name="Small"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="MasterColumn.(Width)" Value="0"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="Medium"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720" /> 
       </VisualState.StateTriggers> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

Answer 2

新しい視覚状態を使用してグローバル幅が720未満になると、2番目の列の幅を0に設定できます。ここに例があります：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition x:Name="DetailColumn" Width="*" /> 
    </Grid.ColumnDefinitions> 

    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="Wide"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="DetailsPage.Visibility" Value="Visible" /> 
       </VisualState.Setters> 
      </VisualState> 
     <VisualState x:Name="Normal"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
      <Setter Target="DetailColumn.(Width)" Value="0"/> 
       </VisualState.Setters> 
     </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <ListView Name="lvElements"> 
    </ListView> 

    <local:UCDetails Visibility="Collapsed" x:Name="DetailsPage" Grid.Column="1" /> 

</Grid>