調整標簽和文本框的WPF網格布局

Question

我是WPF的新手，在布局方法和調整大小策略方面有一些問題。 這是一個選項卡的屏幕截圖，我將它放在一起，僅使用一系列嵌套網格： Sample Image

第一個網格是2行：1行為頂部的按鈕停靠窗口自動調整，1 *行為底部的其余空間，用另一個網格划分底部空間為3rds。

我對這里的布局看起來很滿意，但是想知道處理調整大小的最佳方法。 目前，如果我從屏幕截圖中看到的默認大小開始調整大小，容器的大小都很大，但字體不會調整大小並很快被剪裁。

我嘗試在視圖框中包裝中間網格，但由於網格的自動調整特性，並且因為有很多空白空間，視圖框將文本框移動到接近0寬度的文本框中並扭曲原始設計，如屏幕截圖所示。

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

理想情況下，容器會根據網格中定義的比例自然調整大小，並在窗口調整大小時創建/減少空白空間，文本可以向上和向下縮放以適合其容器

我想到的當前解決方案是執行此winforms樣式並在resize上編寫事件處理程序以計算和設置字體大小為我在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"));
    }

這不太可能是你想要的。 如果您調整寬度並保持高度不變，則會拉伸字體。 但無論您走到哪里，這些都是您需要的工具。