英文:
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>
答案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.
<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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论