How can I achieve this particular resizing behavior?

I am trying to achieve a certain resizing behavior in the footer of an application, which has the following general xaml structure:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code><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>
</code>
<code><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> </code>
<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>

In the footer, the text box is truncated if there isn’t enough horizontal space to display the whole path:

When there is more than enough space, the text box expands horizontally to fill the available space:

While the former behavior is desired, I would like the text box to not expand to fill the entire available space in the latter case. Rather, I would like the text box to expand just enough to display the entire path, and then have the left button remain adjacent to it, with any excess space appearing between the two buttons, like in this mock-up:

I’ve tried wrapping the text box and left button in a nested grid like this:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code><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>
</code>
<code><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> </code>
<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>

While this does achieve the desired behavior when there is more than enough space, when there isn’t enough space the left button is overrun:

Beyond this, I’ve tried numerous other permutations of swapping the Auto and * widths for the Grids’ columns, wrapping things in StackPanels, docking things in DockPanels, and adding further Grids, but I can only ever achieve one of the two previously described sets of behavior. I.e. either the left button doesn’t get overrun when the window is narrow but the text box expands without bound when the window is wide, or the text box’s expansion is bounded when the window is wide but the left button gets overrun when the window is narrow.

Is the behavior I’m looking for achievable? Pure-xaml answers preferred, but if I can only achieve this via code in the codebehind, the viewmodel, or a converter, so be it.

0

Nested Grids as you already have will work as expected.

You just have to make sure to set HorizontalAlignment="Left" on the inner Grid, and use column widths * and Auto in that order.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code><Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" Content="Checkbox" Padding="2,0"
VerticalAlignment="Center" VerticalContentAlignment="Center" />
<TextBlock Grid.Column="1" Margin="10,0,0,0"
VerticalAlignment="Center" Text="Log Folder: " />
<Grid Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Height="24" Padding="2"
VerticalContentAlignment="Center" Focusable="False"
IsReadOnly="True" Cursor="Hand" Text="{Binding LogFolder}" />
<Button Grid.Column="1" Height="24" Width="24" Margin="4,0"
Command="{Binding SelectFolderCommand}">
<Image Width="16" Height="16" Source="/Images/Refresh.png" />
</Button>
</Grid>
<Button Grid.Column="3" VerticalAlignment="Center" Content=" Button " />
</Grid>
</code>
<code><Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <CheckBox Grid.Column="0" Content="Checkbox" Padding="2,0" VerticalAlignment="Center" VerticalContentAlignment="Center" /> <TextBlock Grid.Column="1" Margin="10,0,0,0" VerticalAlignment="Center" Text="Log Folder: " /> <Grid Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBox Grid.Column="0" Height="24" Padding="2" VerticalContentAlignment="Center" Focusable="False" IsReadOnly="True" Cursor="Hand" Text="{Binding LogFolder}" /> <Button Grid.Column="1" Height="24" Width="24" Margin="4,0" Command="{Binding SelectFolderCommand}"> <Image Width="16" Height="16" Source="/Images/Refresh.png" /> </Button> </Grid> <Button Grid.Column="3" VerticalAlignment="Center" Content=" Button " /> </Grid> </code>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

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

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

    <Grid Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

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

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

    </Grid>

    <Button Grid.Column="3" VerticalAlignment="Center" Content=" Button " />
</Grid>

3

You can use proxy elements to measure and set the size.
Look at this example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code> <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: " />
<FrameworkElement Grid.Column="2" x:Name="sizeSource"/>
<FrameworkElement Grid.Column="3"
Width="{Binding ActualWidth, ElementName=btnSource, Mode=OneWay}"
Margin="{Binding Margin, ElementName=btnSource, Mode=OneWay}"/>
<StackPanel Grid.Column="2" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBox Height="24" VerticalAlignment="Center" VerticalContentAlignment="Center" Padding="2" Focusable="False" Cursor="Hand"
MinWidth="40" MaxWidth="{Binding ActualWidth, ElementName=sizeSource, Mode=OneWay}"/>
<Button x:Name="btnSource" Height="24" Width="24" Margin="4,0" VerticalAlignment="Center" Command="{Binding SelectFolderCommand}">
<Button.Content>
<Image Width="16" Height="16" Source="/Source/CenterPicture.png" />
</Button.Content>
</Button>
</StackPanel>
<Button x:Name="button" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Right" Content=" Button " />
</Grid>
</code>
<code> <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: " /> <FrameworkElement Grid.Column="2" x:Name="sizeSource"/> <FrameworkElement Grid.Column="3" Width="{Binding ActualWidth, ElementName=btnSource, Mode=OneWay}" Margin="{Binding Margin, ElementName=btnSource, Mode=OneWay}"/> <StackPanel Grid.Column="2" Grid.ColumnSpan="2" Orientation="Horizontal"> <TextBox Height="24" VerticalAlignment="Center" VerticalContentAlignment="Center" Padding="2" Focusable="False" Cursor="Hand" MinWidth="40" MaxWidth="{Binding ActualWidth, ElementName=sizeSource, Mode=OneWay}"/> <Button x:Name="btnSource" Height="24" Width="24" Margin="4,0" VerticalAlignment="Center" Command="{Binding SelectFolderCommand}"> <Button.Content> <Image Width="16" Height="16" Source="/Source/CenterPicture.png" /> </Button.Content> </Button> </StackPanel> <Button x:Name="button" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Right" Content=" Button " /> </Grid> </code>
    <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: " />

        <FrameworkElement Grid.Column="2" x:Name="sizeSource"/>
        <FrameworkElement Grid.Column="3"
                            Width="{Binding ActualWidth, ElementName=btnSource, Mode=OneWay}"
                            Margin="{Binding Margin, ElementName=btnSource, Mode=OneWay}"/>

        <StackPanel Grid.Column="2" Grid.ColumnSpan="2" Orientation="Horizontal">
            <TextBox Height="24" VerticalAlignment="Center" VerticalContentAlignment="Center" Padding="2" Focusable="False" Cursor="Hand"
                        MinWidth="40" MaxWidth="{Binding ActualWidth, ElementName=sizeSource, Mode=OneWay}"/>

            <Button x:Name="btnSource" Height="24" Width="24" Margin="4,0" VerticalAlignment="Center" Command="{Binding SelectFolderCommand}">
                <Button.Content>
                    <Image Width="16" Height="16" Source="/Source/CenterPicture.png" />
                </Button.Content>
            </Button>
        </StackPanel>
        <Button x:Name="button" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Right" Content=" Button " />
    </Grid>

3

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị
Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật