'Auto' 的最大宽度？

Question

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

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

这不能正常工作，因为当我处于全屏模式时，第一列末尾有一个巨大的空白 space，并且我希望每列中的文本相邻。但是，当我 shrink/resize 屏幕时，它确实正确地缩小了第一列。

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

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

此代码在应用程序全屏时看起来很完美，但当我 shrink/resize 屏幕时，第一列不会缩小以适合。它使我的网格保持相同大小，从而将我的文本推离较小的屏幕。

我怎样才能将宽度限制在 'Auto' 的任何大小，并且仍然像“*”一样调整大小？

Answer 1

你能试试这个吗

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

在这里，我刚刚添加了 HorizontalAlignment="Stretch" 属性，它将在列内对齐文本块拉伸

Answer 2

How can I cap the width at whatever size 'Auto' would be, and still have it resize like it is '*'?

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

ColumnDefinition 的

Width 不能设置为 Auto 和 *。但是由于您的问题是将 Auto 设置为两个 ColumnDefinition，它会将您的文本从较小的屏幕上推开，所以这里我们可以使用 AdaptiveTrigger。我们可以默认设置 Width 到 * 这样可以确保调整大小不会切断文本。当 window 调整到不会导致文本被截断的更大尺寸时， 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的值取决于TextBlock的总数Width。更多详情请参考official sample.

更新代码如下，如果 TextBlock 的 Width 是动态的。

XAML代码

<Grid
    Background="Azure"
    BorderBrush="Pink"
    BorderThickness="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="col1" Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBlock        
        Grid.Column="0"  
        x:Name="txt1"
        Foreground="Blue"
        Text="layouttest1layouttest1layouttest1layou"
        TextWrapping="Wrap"  />
    <TextBlock     
        Grid.Column="1"           
        Foreground="Red"
        x:Name="txt2"
        Text="layouttest2layouttest2layouttest2layouttest2layout"
        TextWrapping="Wrap" />     
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger x:Name="adptivetrigger"   />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="col1.Width" Value="Auto" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

代码隐藏

 private void Page_Loaded(object sender, RoutedEventArgs e)
 {
     var testwidth = txt1.ActualWidth + txt2.ActualWidth;
     adptivetrigger.MinWindowWidth = testwidth;          
 }

'Auto' 的最大宽度？

MaxWidth of 'Auto'?

uwp

uwp-xaml