MaxWidth von 'Auto'?

Question

Ich versuche, ein Raster zu erstellen, das mit Bildschirmen unterschiedlicher Größe arbeitet. Mein Code sieht derzeit wie folgt aus:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    <TextBlock Grid.Column="0" ... /> 
    <TextBlock Grid.Column="1" ... /> 
</Grid> 

Dies funktioniert nicht richtig, weil ich mit einem riesigen leeren Raum am Ende am Ende der ersten Spalte, wenn ich im Vollbild bin, und ich mag den Text in jedem Spalte, um benachbart zu sein. Es schrumpft die erste Spalte jedoch korrekt, wenn ich den Bildschirm verkleinern/vergrößern möchte.

Ich habe auch versucht, Code wie folgt verwendet:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    <TextBlock Grid.Column="0" ... /> 
    <TextBlock Grid.Column="1" ... /> 
</Grid> 

Dieser Code sieht perfekt aus, wenn die Anwendung Vollbild ist, aber wenn ich den Bildschirm die erste Spalte passen nicht schrumpfen/die Größe schrumpfen. Es lässt mein Raster gleich groß, was meinen Text vom kleineren Bildschirm wegdrückt.

Wie kann ich die Breite in welcher Größe auch immer 'Auto' begrenzen, und immer noch die Größe ändern, wie es '*' ist?

Answer 1

Wie ausrichten kann ich die Kappe Breite in welcher Größe auch immer 'Auto' wäre, und habe immer noch die Größe wie '*'?

Nach Define page layouts with XAML bedeutet Auto die Spalte Größe sein Inhalt zu passen, * bedeutet, nachdem die Auto Spalten berechnet werden, wobei die Säule ein Teil der verbleibenden Breite erhält.

Width von ColumnDefinition kann nicht auf Auto sowie * eingestellt werden. Aber als Ihr Problem ist, wenn gesetzt Auto zu beiden ColumnDefinition, schiebt es Ihren Text von der kleineren Bildschirm, so dass wir hier AdaptiveTrigger verwenden können. Wir können Width standardmäßig auf * setzen Dies kann sicherstellen, dass die Größe nicht den Text abgeschnitten. Wenn das Fenster zu einer größeren Größe wird, die den Text nicht abschneiden wird, kann AdaptiveTrigger dazu beitragen, die Width-Eigenschaft von * zu Auto zu ändern. Zum Beispiel:

<Grid 
    Background="Azure" 
    BorderBrush="Pink" 
    BorderThickness="2"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition x:Name="col1" Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <TextBlock   
     Grid.Column="0"   
     Foreground="Blue" 
     Text="layouttest1layouttest1layouttest1layou" 
     TextWrapping="Wrap" /> 
    <TextBlock  
     Grid.Column="1"   
     Foreground="Red" 
     Text="layouttest2layouttest2layouttest2layouttest2layout" 
     TextWrapping="Wrap" /> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="600" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="col1.Width" Value="Auto" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid> 

Der Wert von MinWindowWidth abhängig von der Gesamt Width von TextBlock. Weitere Details entnehmen Sie bitte der official sample.

Aktualisierter Code wie folgt, wenn Width von TextBlock dynamisch ist.

XAML-Code

<Grid 
    Background="Azure" 
    BorderBrush="Pink" 
    BorderThickness="2"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition x:Name="col1" Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <TextBlock   
     Grid.Column="0" 
     x:Name="txt1" 
     Foreground="Blue" 
     Text="layouttest1layouttest1layouttest1layou" 
     TextWrapping="Wrap" /> 
    <TextBlock  
     Grid.Column="1"   
     Foreground="Red" 
     x:Name="txt2" 
     Text="layouttest2layouttest2layouttest2layouttest2layout" 
     TextWrapping="Wrap" />  
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger x:Name="adptivetrigger" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="col1.Width" Value="Auto" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid> 

-Code hinter

private void Page_Loaded(object sender, RoutedEventArgs e) 
{ 
    var testwidth = txt1.ActualWidth + txt2.ActualWidth; 
    adptivetrigger.MinWindowWidth = testwidth;   
} 

Answer 2

können Sie versuchen, dieses

<Grid> 
<Grid.ColumnDefinitions> 
    <ColumnDefinition Width="*"/> 
    <ColumnDefinition Width="*"/> 
</Grid.ColumnDefinitions> 
<TextBlock Grid.Column="0" ... HorizontalAlignment="Stretch"/> 
<TextBlock Grid.Column="1" ... HorizontalAlignment="Stretch"/> 

Hier habe ich nur noch Horizontal = "Stretch" Eigenschaft, die TextBlock- Strecke innerhalb der Säule