我怎样才能实现这种特殊的调整大小行为？

Question

我试图在应用程序的页脚中实现某种大小调整行为，该应用程序具有以下通用 xaml 结构：

<Window>
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>

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

        ... 

        <Grid Grid.Row="3" Grid.Column="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <CheckBox Grid.Column="0" VerticalContentAlignment="Center" VerticalAlignment="Center" Padding="2,0" Content="Checkbox" />

            <TextBlock Grid.Column="1" Margin="10,0,0,0" VerticalAlignment="Center" Text="Log Folder: " />

            <TextBox Grid.Column="2" Height="24" VerticalAlignment="Center" VerticalContentAlignment="Center" Padding="2" Focusable="False" IsReadOnly="True" Cursor="Hand" Text="{Binding LogFolder}" />

            <Button Grid.Column="3" Height="24" Width="24" Margin="4,0" VerticalAlignment="Center" Command="{Binding SelectFolderCommand}">
                <Button.Content>
                    <Image Width="16" Height="16" Source="/Images/Refresh.png" />
                </Button.Content>
            </Button>

            <Button Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Right" Content=" Button " />
        </Grid>
    </Grid>
</Window>

在页脚中，如果没有足够的水平空间来显示整个路径，文本框将被截断：

应用页脚

当空间足够时，文本框会水平扩展以填充可用空间：

应用程序页脚已调整大小

虽然需要前一种行为，但我希望在后一种情况下文本框不会扩展以填充整个可用空间。相反，我希望文本框扩展得足以显示整个路径，然后让左侧按钮保持与其相邻，两个按钮之间出现任何多余的空间，就像在这个模型中一样：

所需行为模型

我尝试将文本框和左按钮包装在嵌套网格中，如下所示：

<Grid Grid.Row="3" Grid.Column="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <CheckBox Grid.Column="0" VerticalContentAlignment="Center" VerticalAlignment="Center" Padding="2,0" Content="Checkbox" />

    <TextBlock Grid.Column="1" Margin="10,0,0,0" VerticalAlignment="Center" Text="Log Folder: " />

    <Grid Grid.Column="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <TextBox Grid.Column="0" Height="24" VerticalAlignment="Center" VerticalContentAlignment="Center" Padding="2" Focusable="False" IsReadOnly="True" Cursor="Hand" Text="{Binding LogFolder}" />

        <Button Grid.Column="1" Height="24" Width="24" Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Center" Command="{Binding SelectFolderCommand}">
            <Button.Content>
                <Image Width="16" Height="16" Source="/Images/Refresh.png" />
            </Button.Content>
        </Button>
    </Grid>

    <Button Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Right" Content=" Button " />
</Grid>

虽然当空间足够时，这确实实现了所需的行为，但当空间不足时，左侧按钮就会溢出：

左键超出范围的不良行为

除此之外，我还尝试了许多其他排列，例如交换网格列的

Auto

和

*

宽度、将内容包装在 StackPanel 中、将内容停靠在 DockPanel 中以及添加更多网格，但我只能实现一种前面描述的两组行为。 IE。当窗口较窄时，左侧按钮不会溢出，但当窗口较宽时，文本框会无限制地扩展，或者当窗口较宽时，文本框的扩展受到限制，但当窗口较窄时，左侧按钮会溢出.

我正在寻找的行为可以实现吗？首选纯 xaml 答案，但如果我只能通过代码隐藏、视图模型或转换器中的代码来实现这一点，那就这样吧。

Answer 1

您可以再添加一个 ColumnDefinition 并且不要在其中放置任何元素：

<Grid Grid.Row="3" Grid.Column="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" /> <!-- left empty-->
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <CheckBox Grid.Column="0" VerticalContentAlignment="Center" VerticalAlignment="Center" Padding="2,0" Content="Checkbox" />

    <TextBlock Grid.Column="1" Margin="10,0,0,0" VerticalAlignment="Center" Text="Log Folder: " />

    <TextBox Grid.Column="2" Height="24" VerticalAlignment="Center" VerticalContentAlignment="Center" Padding="2" Focusable="False" IsReadOnly="True" Cursor="Hand" Text="{Binding LogFolder}" />

    <Button Grid.Column="3" Height="24" Width="24" Margin="4,0" VerticalAlignment="Center" Command="{Binding SelectFolderCommand}">
        <Image Width="16" Height="16" Source="/Images/Refresh.png" />
    </Button>

    <!-- skip * column, button is in column 5-->
    <Button Grid.Column="5" VerticalAlignment="Center" HorizontalAlignment="Right" Content=" Button " />
</Grid>