WPF 网格大小调整 Auto vs Star答案

【问题标题】：WPF grid sizing Auto vs StarWPF 网格大小调整 Auto vs Star
【发布时间】：2018-06-05 11:57:15
【问题描述】：

在我的 XAML 中，我有一定数量的水平空间。在其中我需要放置一个文本（长度未知），然后是一个按钮。按钮应直接放在文本之后。我正在使用以下 XAML：

<Border Name="Boundaries" MaxWidth="500" MinWidth="500" Height="20">
      <Grid>
         <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" TextTrimming="CharacterEllipsis">
                Lorem ipsum dolor sit amet, pri ex option legendos. Ludus solet at mel, facilisis urbanitas nam ad.
            </TextBlock>
         <Button Grid.Column="1">Button</Button>
     </Grid>
</Border>

当TextBlock中的文本很短时一切正常，但是当文本足够长时，TextBlock会溢出父元素并且按钮将不可见。为了解决这个问题，我可以将第一列定义的宽度设置为 *，但这意味着按钮总是在右边（即使文本是单个单词，但我希望它在文本之后）。

过去我通过从父级的 ActualSize 设置第一列定义槽转换器的 MaxWidth 来解决类似的问题，但是这非常复杂且非常不可靠。

这样的基本布局要求似乎是 WPF 的一部分，但我找不到任何东西。我错过了什么吗？

我想要这样的东西：

【问题讨论】：

使用 StackPanel 方向：水平或 WrapPanel

标签： wpf xaml

【解决方案1】：

您可以使用DockPanel 来实现此目的。比如：

<Border Name="Boundaries" MaxWidth="500" MinWidth="500" Height="20">
    <DockPanel HorizontalAlignment="Left" LastChildFill="False">
        <Button DockPanel.Dock="Right">Button</Button>
        <TextBlock DockPanel.Dock="Right" TextTrimming="CharacterEllipsis">
            Lorem ipsum dolor sit amet, pri ex option legendos. Ludus solet at mel, facilisis urbanitas nam ad.
        </TextBlock>
    </DockPanel>
</Border>

【讨论】：

看来我迟到了一分钟 :)
@appa yip yip，在您删除之前看到了您的答案。如何使用 StackPanel 做到这一点？
@PaoloGo 发布后我意识到使用StackPanel 会复杂得多。由于它为TextBlock 提供了无限空间，因此有必要设置其MaxWidth（基于StackPanel 的Width ）以便为Button 留出一些空间
谢谢，这正是我所需要的。

【解决方案2】：

要在不强制规定大小的情况下执行此操作，您需要使用列来获取布局大小，但不要将列用于实际布局。添加两列，然后在第一列中放置一个边框，您可以使用它来获取 TextBlock 的大小。在此示例中，我将第二列的宽度绑定到按钮的宽度，这样即使您更改按钮文本，它仍然可以工作。

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="{Binding ElementName=mybutton, Path=ActualWidth}" />
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" Name="myborder"/>

        <StackPanel Orientation="Horizontal" Grid.ColumnSpan="2">
            <TextBlock MaxWidth="{Binding ElementName=myborder, Path=ActualWidth}" Text="test text" TextTrimming="CharacterEllipsis"/>
            <Button Name="mybutton" Content="button" />
        </StackPanel>
    </Grid>

【讨论】：