自动但拉伸(stretch)的WPF网格列宽度

Question

在我的应用程序中，我的窗口底部最多有 4 个显示一些信息的文本。直到运行时我才知道这些文本的内容，我不知道是零还是最多 4。永远不会超过 4。



如图所示，问题是第三个文本溢出。现在，这是因为目前 this 的实现是项目控件中的统一网格:

<ItemsControl Grid.Row="2" Height="20" ItemsSource="{Binding VersionInfoItems}">
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type ess:VersionInformation}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="viGroup"/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" Margin="3 0 5 0" HorizontalAlignment="Center">
                    <TextBlock Text="{Binding Key}"/>
                    <TextBlock Margin="0 0 4 0"><Run Text=":"/></TextBlock>
                    <TextBlock Text="{Binding Value}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

因此，我尝试使用将所有列定义设置为自动的网格来创建测试，但这只会使它们全部堆叠在一侧:



我希望他们这样做:



是否可以配置网格或统一网格来实现这一点(或者我应该使用不同的控件)，还是必须在代码隐藏中完成并以某种方式分析哪些区域溢出，然后更正宽度以适应文本?

我试图将拉伸(stretch)应用于内容的宽度，但这没有效果。我还找到了一篇关于覆盖统一网格列定义的文章，但由于我只知道运行时的内容和它们的数量，所以这不适用。

解决方案(基于 Mikes 的回答):

Mike suggenstion 让我走上了正轨，我让它工作，所以它可以处理我可能收到的任意数量的文本:





我所做的是我添加了两个转换器，它们要么返回 Double.NaN for auto 要么 new GridLength(1,GridUnitType.Star);对于星柱。然后我从一个集合切换到我设置的特定对象，然后将它们绑定(bind)到列定义和文本 block :

<Grid Grid.Row="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="{Binding Vi1, Converter={StaticResource StarConverter}}"/>
        <ColumnDefinition Width="{Binding Vi1, Converter={StaticResource AutoConverter}}"/>
        <ColumnDefinition Width="{Binding Vi2, Converter={StaticResource StarConverter}}"/>
        <ColumnDefinition Width="{Binding Vi2, Converter={StaticResource AutoConverter}}"/>
        <ColumnDefinition Width="{Binding Vi3, Converter={StaticResource StarConverter}}"/>
        <ColumnDefinition Width="{Binding Vi3, Converter={StaticResource AutoConverter}}"/>
        <ColumnDefinition Width="{Binding Vi4, Converter={StaticResource StarConverter}}"/>
        <ColumnDefinition Width="{Binding Vi4, Converter={StaticResource AutoConverter}}"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Orientation="Horizontal" Margin="3 0 5 0" HorizontalAlignment="Center" Grid.Column="1">
        <TextBlock Text="{Binding Vi1.Key}"/>
        <TextBlock Margin="0 0 4 0"><Run Text=":"/></TextBlock>
        <TextBlock Text="{Binding Vi1.Value}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="3 0 5 0" HorizontalAlignment="Center" Grid.Column="3">
        <TextBlock Text="{Binding Vi2.Key}"/>
        <TextBlock Margin="0 0 4 0"><Run Text=":"/></TextBlock>
        <TextBlock Text="{Binding Vi2.Value}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="3 0 5 0" HorizontalAlignment="Center" Grid.Column="5">
        <TextBlock Text="{Binding Vi3.Key}"/>
        <TextBlock Margin="0 0 4 0"><Run Text=":"/></TextBlock>
        <TextBlock Text="{Binding Vi3.Value}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="3 0 5 0" HorizontalAlignment="Center" Grid.Column="7">
        <TextBlock Text="{Binding Vi4.Key}"/>
        <TextBlock Margin="0 0 4 0"><Run Text=":"/></TextBlock>
        <TextBlock Text="{Binding Vi4.Value}"/>
    </StackPanel>
</Grid>

因此，如果设置了我的 Vi 对象，则对应的列定义将获得 Auto 或 Star 宽度。如果未设置，则两者都为 0。以下是很好的转换器:

//Star converter
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    if(value != null)
        return new GridLength(1,GridUnitType.Star);
    return 0;
}

//Auto converter
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    if (value != null)
        return Double.NaN;
    return 0;
}

Answer 1

我不是 100% 确定这是否是您正在寻找的，但我想您希望标签之间有统一的空格。我想到的一个快速而肮脏的技巧需要在标签之间添加空列(宽度为星形)，如下所示:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="1" Text="Text1: longer text" HorizontalAlignment="Center" />
    <TextBlock Grid.Column="3" Text="Text2" HorizontalAlignment="Center" />
    <TextBlock Grid.Column="5" Text="Very very extremly long text that gets clipped, or not" HorizontalAlignment="Center" />
    <TextBlock Grid.Column="7"  Text="Text3" HorizontalAlignment="Center" />
</Grid>

此代码为您提供以下结果(取决于标签中的文本长度):




让我知道这是否解决了您的问题。