WPF - Main ScrollViewer should not disable scrollviewer of listbox in usercontrol

Question

I have the following situation. The main window has a ScrollViewer which hosts several user controls and is set to HorizontalScrollBarVisibility="Auto". One of them contains a ListBox with horizontal items.

If the UserControl3 gets its ListBox filled, the main ScrollViewer shows the horizontal ScrollBar and the UserControl3 grows horizontally.

This is not what I want. I want, that the UserControl3 is always fit entirely in the MainContainer and the ListBox should show its own ScrollBar.

How can I do this?

Any tip is appreaciated. Best regards

UPDATE - Here is the Code

<Window x:Class="TimlineStudy.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:TimlineStudy="clr-namespace:TimlineStudy"
    xmlns:view="clr-namespace:VMS.Timeline.Common.UI.View;assembly=VMS.Timeline.Common.UI"
    Title="MainWindow"
    Width="525"
    Height="350">

<TabControl Grid.Row="1">
    <TabItem Header="Timeline with scrollviewer">
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <TimlineStudy:ScrollableUserControl x:Name="ScrollableUserControl" />
        </ScrollViewer>
    </TabItem>

    <TabItem Header="Timeline without ScrollViewer">
        <TimlineStudy:ScrollableUserControl x:Name="ScrollableUserControlWithoutScrollViewerAround" />
    </TabItem>
</TabControl>
</Window>

<UserControl x:Class="TimlineStudy.ScrollableUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:viewModel="clr-namespace:TimlineStudy.ViewModel"
         d:DataContext="{d:DesignInstance viewModel:ScrollableUserControlViewModel}"
         d:DesignHeight="300"
         d:DesignWidth="50"
         mc:Ignorable="d">

<Grid x:Name="GridLayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="25" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid x:Name="GridToolBar" Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Label x:Name="LabelNumberOfItemsToAdd" Grid.Column="0">Number of items to add:</Label>
        <TextBox x:Name="TextBoxItemsToAdd"
                 Grid.Column="1"
                 Text="{Binding NumberOfItemsToAdd,
                                Mode=TwoWay}" />
        <Button x:Name="ButtonCreateTimelineItems"
                Grid.Column="2"
                Command="{Binding CreateTimeLineItemsCommand}">
            Add TimeLine Items
        </Button>
        <Button x:Name="ButtonClearTimelineItems"
                Grid.Column="3"
                Command="{Binding ClearTimeLineItemsCommand}">
            Clear TimeLine Items
        </Button>
    </Grid>

    <ListBox x:Name="MyItemsListBox" 
             Grid.Row="1"
             ItemTemplate="{StaticResource TimelineItemTemplate}"
             ItemsSource="{Binding TimeLineItems}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Grid>
</UserControl>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:model="clr-namespace:TimlineStudy.Model">

<DataTemplate x:Key="TimelineItemTemplate" DataType="{x:Type model:TimeLineItem}">
    <Border x:Name="BorderLayoutRoot"
            BorderBrush="Red"
            BorderThickness="1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="8*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="25" />
                <RowDefinition Height="25" />
            </Grid.RowDefinitions>

            <Label Grid.Row="0" Grid.Column="0">Item name:</Label>
            <TextBlock Grid.Row="0"
                       Grid.Column="1"
                       Text="{Binding ItemName}" />


            <Label Grid.Row="1" Grid.Column="0">Item index:</Label>
            <TextBlock Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding ItemIndex}" />
        </Grid>
    </Border>
</DataTemplate>

</ResourceDictionary>

Answer 1

If you don't mind a bit of code-behind, you can handle it in a SizeChanged event:

XAML:

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" SizeChanged="ScrollViewer_SizeChanged">
    <TimlineStudy:ScrollableUserControl x:Name="ScrollableUserControl" />
</ScrollViewer>

Code-behind:

private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ScrollableUserControl.MaxWidth = e.NewSize.Width; // Subtract left and right margin if needed
}