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

通常，保持相同大小的字体和控件的布局更改是您想要的。您可以通过设置控件的最小高度来停止字体裁剪。

您似乎想要的是布局保持不变，整个布局（包括字体）与窗口大小一致。

执行此操作的方法是使用渲染变换。这是一个简单的例子......

msg=3

if [ $msg -gt 0 ]; then
    echo $msg;
fi

代码背后......

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

这不太可能是你想要的。如果您调整宽度并保持高度不变，则会拉伸字体。但无论您走到哪里，这些都是您需要的工具。

调整标签和文本框的WPF网格布局

1 个答案: