Question

我正在尝试创建一个处理不同大小屏幕的网格。我的代码目前看起来像这样：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" ... />
    <TextBlock Grid.Column="1" ... />
</Grid>

这不能正常工作，因为当我在全屏时，我在第一列末尾有一个巨大的空白区域，我希望每列中的文本都是相邻的。但是，当我缩小/调整屏幕大小时，它会正确缩小第一列。

我也尝试使用这样的代码：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" ... />
    <TextBlock Grid.Column="1" ... />
</Grid>

当应用程序是全屏时，此代码看起来很完美，但是当我收缩/调整屏幕大小时，第一列不会缩小以适应。它使我的网格大小相同，从而将我的文本从较小的屏幕上移开。

如何将宽度设置为“自动”的大小，并且仍然将其调整为“*”？

Answer 1

如何以任何尺寸限制宽度＆＃39;自动＆＃39;会是，并且仍然会调整大小，就像它是＆＃39; *＆＃39;？

根据Define page layouts with XAML，Auto表示该列的大小将适合其内容，*表示在计算自动列后，该列将获得剩余宽度的一部分。

<{1}} Width的{{1}}无法设置为ColumnDefinition以及Auto。但是，当您将*设置为Auto时，问题就在于它将您的文字从较小的屏幕上移开，因此我们可以使用AdaptiveTrigger。我们默认情况下可以将ColumnDefinition设置为Width，这可以确保调整大小不会切断文本。当窗口调整为不会导致文本被截断的较大尺寸时，*可以帮助将AdaptiveTrigger属性从Width更改为*。例如：

Auto

<Grid Background="Azure" BorderBrush="Pink" BorderThickness="2"> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="col1" Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Foreground="Blue" Text="layouttest1layouttest1layouttest1layou" TextWrapping="Wrap" /> <TextBlock Grid.Column="1" Foreground="Red" Text="layouttest2layouttest2layouttest2layouttest2layout" TextWrapping="Wrap" /> <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="600" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="col1.Width" Value="Auto" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid>的值取决于MinWindowWidth的总Width。更多详情请参阅official sample。

如果TextBlock的{{1}}是动态的，则更新代码如下。

XAML代码

Width

背后的代码

TextBlock

Answer 2

你能试试这个

吗？

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" ... HorizontalAlignment="Stretch"/>
<TextBlock Grid.Column="1" ... HorizontalAlignment="Stretch"/>

在这里，我刚刚添加了HorizontalAlignment =“Stretch”属性，该属性将对齐列中的textblock拉伸

最大宽度为“自动”？

2 个答案: