My WPF UserControl must never get wider than the containing ButtonBar

Question

Hello,

I have bound at top the Width of the UserControl to the Width of the ButtonGrid at top.

It does not work. I want my UserControl always that wide as the width of the ButtonGrid. The problem is loading documents with a long name > Sum(Width of 3 buttons) makes the UserControl as wide as the document name. Now imagine having document names with 100 chars or longer and you add documents the UserContol will bump and jump...

<UserControl x:Class="TBM.View.DocumentListView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Behaviours="clr-namespace:FunctionalFun.UI.Behaviours"
             xmlns:Helper="clr-namespace:TBM.Helper"            
             mc:Ignorable="d"          
             d:DesignHeight="300"
             d:DesignWidth="300"   
             Width="{Binding ElementName=ButtonGrid,Path=Width}"
             >
    <UserControl.Resources>
        <Helper:BooleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListBox
            SelectionMode="Extended"
            VirtualizingStackPanel.IsVirtualizing="True"
            VirtualizingStackPanel.VirtualizationMode="Recycling"
            Behaviours:MultiSelectorBehaviours.SynchronizedSelectedItems="{Binding SelectedDocumentViewModelList,Mode=TwoWay}"                                                                                 
            Width="Auto"
            Focusable="True"
            ScrollViewer.HorizontalScrollBarVisibility="Auto" 
            ScrollViewer.VerticalScrollBarVisibility="Auto" 
            Grid.Row="0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Name="documentListBox"
            BorderThickness="1"                                                
            ItemsSource="{Binding DocumentList}"
            Visibility="{Binding ElementName=documentListBox,Path=HasItems, Converter={StaticResource boolToVisibilityConverter}}"
            >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <!--<TextBlock Text="{Binding Path=Id}" />-->
                        <TextBlock Text="{Binding Path=DocumentName}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>            
        </ListBox>
        <UniformGrid  x:Name="ButtonGrid"         
            Grid.Row="1"
            Rows="1"                                           
            HorizontalAlignment="Stretch"
            VerticalAlignment="Bottom"
            >
            <Button Command="{Binding Path=DeleteDocumentCommand}" HorizontalAlignment="Stretch" Content="Delete" />
            <Button Command="{Binding Path=AddDocumentCommand}" HorizontalAlignment="Stretch" Content="Add" />
            <Button Command="{Binding Path=OpenDocumentCommand}" HorizontalAlignment="Stretch" Content="Open" />           
        </UniformGrid>
    </Grid>
</UserControl>

Answer 1

Try 2 stuff

1. Use horizontal alignment on user control to stretch
2. Set binding to MaxWidth same as Width binding

Answer 2

You could also set the width of the ParentGrid(containing the control) to a fixed size, en then horizontal alignment to Stretch