Größe von WPF Grid-Layout von Beschriftungen und Textfeldern

Question

Ich bin neu in WPF und hatte ein paar Fragen in Bezug auf Layout-Ansatz und Größenänderungsstrategien. Hier ist ein Screenshot einer von einer Lasche I zusammen ausschließlich put angelegt mit einer Reihe von verschachtelten Gittern: Sample Image

Das erste Gitter ist 2 Reihen: 1 Zeile für eine DockPanel von Schaltflächen oben autosized und ein 1 * Zeile für den Rest des Raumes am unteren Rand, der mit einem anderen Gitter geteilt wird, das den unteren Raum in 3tel teilt.

Ich bin glücklich mit der Art und Weise, wie das Layout hier aussieht, habe mich aber gefragt, wie man die Größenanpassung am besten anwendet. Momentan, wenn ich anfange, von der Standardgröße, die auf dem Screenshot zu sehen ist, herunterzufahren, sind die Container alle groß, aber die Schrift wird nicht verkleinert und wird bald abgeschnitten.

Ich habe versucht, das mittlere Raster in eine Viewbox zu legen, aber wegen der automatischen Skalierung der Raster und weil es viel leeren Platz gibt, quetscht die Viewbox die Textfelder in fast 0 breite Textfelder und verzerrt das ursprüngliche Design in im Screenshot gezeigt.

Ich habe dann versucht, das mittlere Raster mit absoluten Pixelgrößen zu definieren und dann in eine Viewbox gewickelt, war aber unzufrieden mit den Ergebnissen: Stretch fill verzerrte schnell die Kontrollen, und gleichmäßige Füllung lässt zu viel leeren Raum.

Idealerweise würde die Behälter Größe natürlich durch die definierten Verhältnisse in den Gittern und erstellen/reduzieren leeren Raum als das Fenster paßt die Größe und der Text würde maßstäblich nach oben und unten in ihren Behältern

Die aktuelle Lösung I habe zu passen Denken Sie daran, dies zu tun winforms Stil und schreiben Sie einen Event-Handler auf Größe ändern, um zu berechnen und Schriftgrößen zu einem Stil, den ich in XAML erstellen. Meine Fragen sind, ob es eine Möglichkeit gibt, mit der Schriftgröße in XAML eleganter umzugehen, und ob es eine bessere Möglichkeit gibt, die Steuerelemente im Fenster zu gestalten. Unten ist der Code für das mittlere Gitter, das alle der Etiketten- und Textboxsteuerelemente enthält:

<Grid x:Name="JobTabMiddleGrid" Grid.Column="1"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="89*"/> 
     <ColumnDefinition Width="33*"/> 
     <ColumnDefinition Width="107*"/> 
     <ColumnDefinition Width="264*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="40*"/> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="40*"/> 
     <RowDefinition Height="39*"/> 
     <RowDefinition Height="180*"/> 
    </Grid.RowDefinitions> 

    <!--Labels for the top part input panel in job tab--> 
    <Label Grid.ColumnSpan="4">Company</Label> 
    <Label Grid.Row="1" Grid.ColumnSpan="2">Location</Label> 
    <Label Grid.Row="2" Grid.ColumnSpan="2">Rig</Label> 
    <Label Grid.Row="3" Grid.ColumnSpan="2">Well Name</Label> 
    <Label Grid.Row="4" Grid.ColumnSpan="2">API Job No.</Label> 
    <Label Grid.Row="5" Grid.ColumnSpan="2">State/Province</Label> 
    <Label Grid.Row="6" Grid.ColumnSpan="2">County/Parish</Label> 
    <Label Grid.Row="7" Grid.ColumnSpan="2">Country</Label> 
    <Label Grid.Row="8" >Job Status</Label> 
    <Label Grid.Row="9" >Job Type</Label> 
    <Label Grid.Row="10">Field</Label> 

    <!--Input boxes for the top part input panel in job tab--> 
    <TextBox Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2">Company</TextBox> 
    <TextBox Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2">Location</TextBox> 
    <TextBox Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2">Rig</TextBox> 
    <TextBox Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2">Well Name</TextBox> 
    <TextBox Grid.Row="4" Grid.Column="2" Grid.ColumnSpan="2">API Job No.</TextBox> 
    <TextBox Grid.Row="5" Grid.Column="2" Grid.ColumnSpan="2">State/Province</TextBox> 
    <TextBox Grid.Row="6" Grid.Column="2" Grid.ColumnSpan="2">County/Parish</TextBox> 
    <TextBox Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="2">Country</TextBox> 
    <ComboBox Grid.Row="8" Grid.Column="1" Grid.ColumnSpan="2"/> 
    <ComboBox Grid.Row="9" Grid.Column="1" Grid.ColumnSpan="2"/> 
    <TextBox Grid.Row="10" Grid.Column="1" Grid.ColumnSpan="3">Field</TextBox> 


    <!--Job Comments Section of input panel--> 
    <Grid x:Name="JobCommentsGrid" Grid.Row="7" Grid.Column="3" Grid.RowSpan="3"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="31*"/> 
      <RowDefinition Height="88*"/> 
     </Grid.RowDefinitions> 

     <Label FontWeight="Bold">Job Comments:</Label> 
     <TextBox Grid.Row="2" AllowDrop="False" VerticalScrollBarVisibility="Auto" AcceptsReturn="True" TextWrapping="Wrap" VerticalContentAlignment="Top"/> 
    </Grid> 

    <!--Canada and Custom Field Input Panel--> 
    <Grid x:Name="JobTabMiddleBottomGrid" Grid.Row="11" Grid.ColumnSpan="4"> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="103*"/> 
      <ColumnDefinition Width="62*"/> 
      <ColumnDefinition Width="103*"/> 
      <ColumnDefinition Width="62*"/> 
      <ColumnDefinition Width="102*"/> 
      <ColumnDefinition Width="61*"/> 
     </Grid.ColumnDefinitions> 

     <!--Canada Data inputs and button--> 
     <Label>Section</Label> 
     <TextBox Grid.Column="1"></TextBox> 
     <Label Grid.Column="2">Township</Label> 
     <TextBox Grid.Column="3"></TextBox> 
     <Label Grid.Column="4">Range</Label> 
     <TextBox Grid.Column="5"></TextBox> 
     <Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" Padding="0"> 
      <DockPanel> 
       <Image Source="canadaleaf.png" HorizontalAlignment="Left" VerticalAlignment="Center"/> 
       <Label>Canada Location Data</Label> 
      </DockPanel> 
     </Button> 

     <!--Custom field labels at bottom of job input panel--> 
     <Label Grid.Row="2">Shoe Depth</Label> 
     <Label Grid.Row="2" Grid.Column="2">Shoe Depth</Label> 
     <Label Grid.Row="2" Grid.Column="4">Next CSG</Label> 
     <Label Grid.Row="3">Work Order</Label> 
     <Label Grid.Row="4">Contact No.</Label> 

     <!--Custom field textboxes at bottom of job input panel--> 
     <TextBox Grid.Row="2" Grid.Column="1"/> 
     <TextBox Grid.Row="2" Grid.Column="3"/> 
     <TextBox Grid.Row="2" Grid.Column="5"/> 
     <TextBox Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="5"/> 
     <TextBox Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="5"/> 


    </Grid> 
</Grid> 

Answer 1

Im Allgemeinen ist die Schrift die gleiche Größe und das Layout der Bedienelemente Wechsel des Aufenthaltes ist das, was Sie wollen. Sie stoppen die Zeichensatzbegrenzung, indem Sie die minimale Höhe des Steuerelements festlegen.

Was Sie zu wünschen scheint ist, dass das Layout gleich bleibt und das gesamte Layout, einschließlich der Schriftarten, mit der Fenstergröße skaliert.

Der Weg dazu ist mit einer Render-Transformation. Hier ist ein einfaches Beispiel ...

<Window.RenderTransform> 
    <ScaleTransform ScaleX="{Binding ZoomX}" ScaleY="{Binding ZoomY}"/> 
</Window.RenderTransform> 
<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="40*"/> 
     <ColumnDefinition Width="60*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="10*"/> 
     <RowDefinition Height="20*"/> 
     <RowDefinition Height="30*"/> 
     <RowDefinition Height="40*"/> 
    </Grid.RowDefinitions> 
    <Label Grid.Row="0" Grid.Column="0" FontSize="30">Look here</Label> 
    <Label Grid.Row="0" Grid.Column="1" FontSize="30">Look here</Label> 
    <Label Grid.Row="1" Grid.Column="0" FontSize="30">Look here</Label> 
    <Label Grid.Row="1" Grid.Column="1" FontSize="30">Look here</Label> 
    <Label Grid.Row="2" Grid.Column="0" FontSize="30">Look here</Label> 
    <Label Grid.Row="2" Grid.Column="1" FontSize="30">Look here</Label> 
    <Label Grid.Row="3" Grid.Column="0" FontSize="30">Look here</Label> 
    <Label Grid.Row="3" Grid.Column="1" FontSize="30">Look here</Label> 
</Grid> 

mit Code hinter ...

public GridBench2() 
    { 
     InitializeComponent(); 
     DataContext = this; 
    } 
    public double ZoomX 
    { 
     get 
     { 
      return Width/300; 
     } 
    } 
    public double ZoomY 
    { 
     get 
     { 
      return Height/300; 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 

    private void Window_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("ZoomX")); 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("ZoomY")); 
    } 

Dies ist unwahrscheinlich, genau das sein, was Sie wollen entweder. Wenn Sie die Breite ändern und die Höhe beibehalten, wird die Schriftart gestreckt. Aber das sind die Werkzeuge, die Sie benötigen, um zu bekommen, wohin Sie gehen.