“自动”的最大宽度？

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

如何将宽度限制为“自动”的任何大小，并且仍然像“*”一样调整大小？

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

ColumnDefinition 中的Width 不能设置为Auto 和*。但是由于您的问题是当将Auto 设置为ColumnDefinition 时，它会将您的文本推离较小的屏幕，因此我们可以在这里使用AdaptiveTrigger。我们可以将Width默认设置为*，这样可以保证resize不会截断文本。当窗口调整到不会导致文本被截断的更大尺寸时，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;          
 }

Answer 2

你可以试试这个

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

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