WPF中Grid列中的TextBlock自动调整大小。

huangapple go评论78阅读模式
英文:

wpf textblock in grid columns autosize

问题

以下是翻译的内容:

我正在尝试设计一个布局,在最大化应用程序时需要文本块进行增长/缩小。

在我的设计中,网格有4列和2行。第2行的文本块会随着主窗口的大小而增长/缩小。

但是第1行的文本块却不会。属性TextAlignment或HorizontalAlignment的值为Stretch或Right都没有帮助。

有人能指导我如何使第1行的文本块:

  • 填充列1和2
  • 在最大化应用程序时增长/缩小
英文:

I am trying to layout a design where the textblock needs to grow/shrink when we maximize the app.

In my design the grid has 4 columns and 2 rows. the textblock in 2nd row grow/shrinks with respect to mainwindow size.

But not the textblock in 1st row. The properties TextAlignment or HorizontalAlignment with values Stretch or Right doesn't help.

Could someone guide me on how to make textblock in 1st row to

  • fill the columns 1 & 2
  • grow/shrink when we maximize the app
<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="600">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="Auto"/>
            <ColumnDefinition  Width="Auto"/>
            <ColumnDefinition  Width="Auto"/>
            <ColumnDefinition  Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="120"/>
        </Grid.RowDefinitions>
        <CheckBox Name="Enable" Content="Enable" Width="70" Height="20" Margin="1,0,0,0" Grid.Row="0" Grid.Column="0"></CheckBox>
        <Border Margin="2" BorderBrush="Black" BorderThickness="1" Height="20" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" >
            <TextBlock Name="Status" Text="current status" TextAlignment="Right" HorizontalAlignment="Right"></TextBlock>
        </Border>
        <Button x:Name="Clear" Content="Clear"  Width="40" Height="20" Margin="1,0,2,0" HorizontalAlignment="Right" ToolTip="clear" Grid.Row="0" Grid.Column="3">            
        </Button>
        <Border Margin="2" BorderBrush="Black" BorderThickness="1"  Height="110" Grid.ColumnSpan="4" Grid.Row="1" Grid.Column="0">
            <ScrollViewer>
                <TextBlock Name="ActionText" Text="" TextWrapping="Wrap">
                </TextBlock>
            </ScrollViewer>
        </Border>
    </Grid>
</Window>

WPF中Grid列中的TextBlock自动调整大小。

答案1

得分: 2

以下是您要翻译的内容:

首先,第1列和第2列都设置为“自动”大小,这意味着它们将根据其内部的“内容”大小调整大小。第1列和第2列包含一个名为“current status”的“TextBlock”,我猜这是您想要更改的部分。

为了实现这一点,请将第1列和第2列设置为比例大小模式(1*、2*等),尝试一些值以找到适合您用例的值。

接下来,您需要将这个“TextBlock”放在一个“ViewBox”中,以便视觉效果可以根据可用空间自动增长和缩小。

最后,充分利用“MaxWidth”和“MinWidth”属性,以确保调整窗口大小不会导致“TextBlock”变得过大或过小。

此外,我建议您完全删除包含名为ActionText的“TextBlock”的“ScrollViewer”,并将其替换为一个具有“ReadOnly”属性设置为“true”的“TextBox”。

我已经应用了这些建议,我认为它以您期望的方式呈现出来。请注意,我还调整了列以删除不需要的列,并将它们的比例大小权重设置为一些建议的值,您可以根据需要进行调整。

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
        <ColumnDefinition  Width="Auto"/>
        <ColumnDefinition  Width="1*" MaxWidth="200" MinWidth="75"/>
        <ColumnDefinition  Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition MinHeight="30" MaxHeight="35" Height="1*"/>
        <RowDefinition Height="120"/>
    </Grid.RowDefinitions>
    <CheckBox Name="Enable" Content="Enable" Width="70" Height="20" Margin="1,0,0,0" Grid.Row="0" Grid.Column="0"></CheckBox>
    <Border BorderBrush="Black" BorderThickness="1" Margin="2,5" Grid.Row="0" Grid.Column="1" >
        <Viewbox>
            <TextBlock Name="Status" Text="current status"></TextBlock>
        </Viewbox>
    </Border>
    <Button x:Name="Clear" Content="Clear"  Width="40" Height="20" Margin="1,0,2,0" HorizontalAlignment="Right" ToolTip="clear" Grid.Row="0" Grid.Column="3">
    </Button>
    <TextBox IsReadOnly="true" VerticalScrollBarVisibility="Visible" Margin="2" BorderBrush="Black" BorderThickness="1"  Height="110" Grid.ColumnSpan="4" Grid.Row="1" Grid.Column="0" Name="ActionText" Text="" TextWrapping="Wrap"/>
</Grid>

希望这有所帮助!如果您有其他问题,请随时提问。

英文:

OK this is a bit confusing what you got going here, but I think I see the issues.

First of all, Columns 1, and 2 are all set to Auto size, which means they will size to the Content within them. Columns 1 and 2 have the TextBlock which reads "current status" which I'm guessing is the one you want to change.

In order to do this, set Columns 1 and 2 to be a proportional size mode (1*, 2*, etc.) play around with some values to find one that looks good for your use case.

Next, you're going to want to put this TextBlock in a ViewBox so the visual will grow and shrink autonomously to the available space it has.

Finally, make good use of the MaxWidth and MinWidth properties to ensure that sizing the Window to any size doesn't result in the TextBlock becoming too large / small.

As an addendum, I suggest you remove the ScrollViewer containing the TextBlock named ActionText all together and replace it with a TextBox with the ReadOnly property set to true.

I have applied the suggestions and it comes out in I believe the way you intended. Note I also adjusted the Columns to remove the unneeded ones and set their proportional sizing weights to some suggested values that you can adjust as needed.

&lt;Grid HorizontalAlignment=&quot;Stretch&quot; VerticalAlignment=&quot;Top&quot;&gt;
        &lt;Grid.ColumnDefinitions&gt;
            &lt;ColumnDefinition  Width=&quot;Auto&quot;/&gt;
            &lt;ColumnDefinition  Width=&quot;1*&quot; MaxWidth=&quot;200&quot; MinWidth=&quot;75&quot;/&gt;
            &lt;ColumnDefinition  Width=&quot;5*&quot;/&gt;
        &lt;/Grid.ColumnDefinitions&gt;
        &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition MinHeight=&quot;30&quot; MaxHeight=&quot;35&quot; Height=&quot;1*&quot;/&gt;
            &lt;RowDefinition Height=&quot;120&quot;/&gt;
        &lt;/Grid.RowDefinitions&gt;
        &lt;CheckBox Name=&quot;Enable&quot; Content=&quot;Enable&quot; Width=&quot;70&quot; Height=&quot;20&quot; Margin=&quot;1,0,0,0&quot; Grid.Row=&quot;0&quot; Grid.Column=&quot;0&quot;&gt;&lt;/CheckBox&gt;
        &lt;Border BorderBrush=&quot;Black&quot; BorderThickness=&quot;1&quot; Margin=&quot;2,5&quot; Grid.Row=&quot;0&quot; Grid.Column=&quot;1&quot; &gt;
            &lt;Viewbox&gt;
                &lt;TextBlock Name=&quot;Status&quot; Text=&quot;current status&quot;&gt;&lt;/TextBlock&gt;
            &lt;/Viewbox&gt;
        &lt;/Border&gt;
        &lt;Button x:Name=&quot;Clear&quot; Content=&quot;Clear&quot;  Width=&quot;40&quot; Height=&quot;20&quot; Margin=&quot;1,0,2,0&quot; HorizontalAlignment=&quot;Right&quot; ToolTip=&quot;clear&quot; Grid.Row=&quot;0&quot; Grid.Column=&quot;3&quot;&gt;
        &lt;/Button&gt;
        &lt;TextBox IsReadOnly=&quot;true&quot; VerticalScrollBarVisibility=&quot;Visible&quot; Margin=&quot;2&quot; BorderBrush=&quot;Black&quot; BorderThickness=&quot;1&quot;  Height=&quot;110&quot; Grid.ColumnSpan=&quot;4&quot; Grid.Row=&quot;1&quot; Grid.Column=&quot;0&quot; Name=&quot;ActionText&quot; Text=&quot;&quot; TextWrapping=&quot;Wrap&quot;/&gt;
    &lt;/Grid&gt;

huangapple
  • 本文由 发表于 2023年5月24日 22:57:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/76324883.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定