Adaptive Spalte in XAML UI

Question

Ich versuche, eine anpassungsfähige Benutzeroberfläche für Windows Universal Platform zu machen. Ich habe derzeit einen Visual State Manager, der Benutzersteuerung zeigt, wenn die Breite größer als 720 ist. Im äußeren Raster habe ich 2 gleiche Spalten. In einer Spalte habe ich eine Listview und in der anderen habe ich ein Benutzersteuerelement, das Details anzeigt. Wie kann ich die zweite Spalte verschwinden lassen, wenn die Breite kleiner als 720 ist? Alle Hilfen sind sehr geschätzt. Hier ist ein Beispiel.

<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

Sie können einen Namen auf Ihre Säulen bieten:

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

Dann ändern Sie einfach die Breite.

<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

Sie können die Breite der zweiten Spalte auf 0 setzen, wenn die globale Breite unter Verwendung eines neuen visuellen Status kleiner als 720 ist. Hier ist ein Beispiel:

<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>