嵌套于StackPanel中的ScrollViewer如何随内容自动调整宽度？

Alright, let's break down how to fix this. The root of the issue is that your original Grid (with a fixed 1500px width) forces the ScrollViewer to stretch to its full width. When you move this whole structure into a horizontal StackPanel, we need to override that default stretching behavior so the ScrollViewer can size itself to its content (your 2500px Rectangle).

Here are three reliable approaches, depending on whether you need to keep the Grid or not:

Approach 1: Adjust Alignment & Let Grid Adapt #

If you want to keep the Grid but remove its fixed width constraint (or let it size to fit the ScrollViewer), set the ScrollViewer's HorizontalAlignment to Left—this prevents it from stretching to fill the Grid's width, and instead lets it grow with its content.

<StackPanel Orientation="Horizontal">
    <!-- Remove the fixed Width="1500" or set it to Width="Auto" -->
    <Grid>
        <ScrollViewer HorizontalAlignment="Left" 
                      HorizontalScrollBarVisibility="Auto">
            <Rectangle Width="2500" Fill="LightSteelBlue"/>
        </ScrollViewer>
    </Grid>
</StackPanel>

If you must keep the Grid's 1500px width, this setup will still let the ScrollViewer extend beyond the Grid's bounds (since Grid doesn't clip content by default), and the horizontal StackPanel will accommodate the wider ScrollViewer.

Approach 2: Bind ScrollViewer Width to Content #

For precise control where the ScrollViewer always matches its content's exact width, bind its Width property directly to your content element's ActualWidth. This works even if you keep the Grid's fixed width:

<StackPanel Orientation="Horizontal">
    <Grid Width="1500">
        <ScrollViewer Width="{Binding ElementName=contentRect, Path=ActualWidth}"
                      HorizontalScrollBarVisibility="Auto">
            <!-- Name the content element so we can bind to it -->
            <Rectangle x:Name="contentRect" Width="2500" Fill="LightSteelBlue"/>
        </ScrollViewer>
    </Grid>
</StackPanel>

Now the ScrollViewer will automatically adjust if you change the Rectangle's width later.

Approach 3: Ditch the Grid (If Unnecessary) #

If the Grid doesn't serve any other layout purpose (like holding other elements), just move the ScrollViewer directly into the horizontal StackPanel. By default, the StackPanel will let the ScrollViewer size to its content without forcing it to stretch:

<StackPanel Orientation="Horizontal">
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <Rectangle Width="2500" Fill="LightSteelBlue"/>
    </ScrollViewer>
</StackPanel>

Quick Notes #

• Set HorizontalScrollBarVisibility to Auto so scrollbars only appear if your content ever exceeds the ScrollViewer's width (e.g., if you dynamically shrink it). Use Disabled if you never want scrollbars and just want the content to overflow.
• Remember that horizontal StackPanel doesn't restrict child element widths—it lets them grow as needed, so the key is overriding the ScrollViewer's default stretch behavior from the Grid.

内容的提问来源于stack exchange，提问作者Muzib