WPF网格大小调整Auto vs Star

In my XAML I have a certain amount of horizontal space. In it I need to put a text (of unknown length) followed by a button. Button should be placed directly after text. I am using following XAML:

在我的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>

Everything works fine when the text in TextBlock is short, however when text is long enough, TextBlock will overflow parent element and button will not be visible. To fix this I could set width of the first column definition to *, but this would mean that button is always on the right (even when text is single word, but I want it right after the text).

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

In past I fixed similar problems by setting MaxWidth of the first column definition trough converter from ActualSize of parent, however this is quite complicated and highly unreliable.

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

It would seem that such basic layout requirement would be a part of WPF, but I could not find anything. Am I missing something?

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

I want something like this:

我想要这样的东西：

2 个解决方案

#1

You could use a DockPanel to achieve this. Something like:

您可以使用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>

#2

To do this without forcing a predetermined size you need to use the columns to get the layout size but don't use the columns for the actual layout. Add the two columns and then put a border in the first column that you can use to get the size for the TextBlock. In this example I bind the width of the second column to the width of the button, this way it will still work if you change the button text.

要在不强制预定大小的情况下执行此操作，您需要使用列来获取布局大小，但不要将列用于实际布局。添加两列，然后在第一列中放置一个边框，您可以使用该边框来获取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>