調整標籤和文本框的WPF網格佈局的大小

Question

我是WPF的新手，對於佈局方法和調整策略方面有幾個問題。這裏是一個我放在一起用一系列嵌套網格的佈局僅一個選項卡的截圖： Sample Image

第一格柵是2行：1列自動調整大小在頂部按鈕的DockPanel中，和1 *爲底部空間的其餘部分劃分行，將另一個劃分底部空間的劃分爲3rds。

我很滿意佈局在這裏的樣子，但想知道處理大小調整的最佳方法。目前，如果我從屏幕截圖中顯示的默認尺寸開始縮小尺寸，容器的尺寸都很大，但字體不會調整大小，並且很快會被裁剪掉。

我嘗試在視圖框中包裹中間網格，但由於網格的自動大小化特性，並且由於存在大量空白空間，Viewbox將文本框擠壓到接近0寬度的文本框中，並將原始設計扭曲爲如屏幕截圖所示。

然後我嘗試用絕對像素大小定義中間網格，然後將其包裝到視圖框中，但對結果不滿意：快速填充快速扭曲了控件，並且均勻填充留下了太多空白空間。

理想情況下，容器將大小自然地在網格中確定的比例，並創建/減少空的空間調整窗口大小和文本將放大和縮小以適合它們的容器

目前的解決方案我在頭腦是做這winforms風格和編寫調整大小的事件處理程序來計算和設置字體大小爲我在XAML中創建的樣式。我的問題是，如果有一種方法可以更好地處理XAML中調整字體大小的方式，以及是否有更好的方法來佈置窗口上的控件。下面是一個包含所有標籤和文本框控件的中間網格代碼：

<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

一般的字體保持相同的大小和控制變化的佈局是你想要的。通過設置控件的最小高度來停止字體裁剪。

你似乎想要的是，佈局保持不變，包括字體在內的整個佈局隨窗口大小而變化。

執行此操作的方法是使用渲染轉換。下面是一個簡單的例子...

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

背後的代碼...

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")); 
    } 

這是不太可能正是你想要什麼任。如果您調整寬度並保持高度不變，則字體將被拉伸。但是這些都是你需要隨時隨地獲得的工具。