Horizontal scroll for stackpanel doesn't work

后端 未结 2 608
一整个雨季
一整个雨季 2020-11-27 23:02

I try to create a scrollable horizontal StackPanel but I do not succeed very well...

Currently I have my StackPanel with an auto width (and the problem

相关标签:
2条回答
  • 2020-11-27 23:37

    You should put your StackPanel into a ScrollViewer like this:

    <ScrollViewer Height="85" VerticalAlignment="Bottom" Margin="0,0,200,15" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
        <StackPanel x:Name="Film"  Orientation="Horizontal" >
            <StackPanel.Background>
                <SolidColorBrush Color="Black"/>
            </StackPanel.Background>
            <Grid Width="100" Background="Red"/>
            <Grid Width="100" Background="#FFFF0051"/>
            <Grid Width="100" Background="#FFB900FF"/>
            <Grid Width="100" Background="#FF002EFF"/>
            <Grid Width="100" Background="#FF00FFDC"/>
            <Grid Width="100" Background="#FF51FF00"/>
            <Grid Width="100" Background="Red"/>
        </StackPanel>
    </ScrollViewer>
    
    0 讨论(0)
  • 2020-11-27 23:56

    Currently I have my stackpanel with an auto width (and the problem is maybe here) that contains some items like grids.

    This is your problem. A StackPanel measures its children with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. So you will have to specify an explicit width for the StackPanel itself or the ScrollViewer for this to work.

    Alternatively you could put the ScrollViewer in a Panel that measures its children, like for example a Grid (but not a StackPanel). This works for example:

    <Window x:Class="WpfApplication1.Window1"
        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:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="Window" Height="300" Width="300">
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" Height="85" CanContentScroll="True">
            <StackPanel x:Name="Film" Height="85" Width="Auto" Margin="0,0,0,0" Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" CanHorizontallyScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.CanContentScroll="True" d:LayoutOverrides="TopPosition, BottomPosition">
                <StackPanel.Background>
                    <SolidColorBrush Color="Yellow"/>
                </StackPanel.Background>
                <Grid Width="100" Background="Red"/>
                <Grid Width="100" Background="#FFFF0051"/>
                <Grid Width="100" Background="#FFB900FF"/>
                <Grid Width="100" Background="#FF002EFF"/>
                <Grid Width="100" Background="#FF00FFDC"/>
                <Grid Width="100" Background="#FF51FF00"/>
                <Grid Width="100" Background="Red"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
    </Window>
    

    But this doesn't because the StackPanel is considered to have an infinite width:

    <StackPanel>
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" Height="85" CanContentScroll="True">
            <StackPanel x:Name="Film" Height="85" Width="Auto" Margin="0,0,0,0" Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" CanHorizontallyScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.CanContentScroll="True" d:LayoutOverrides="TopPosition, BottomPosition">
                <StackPanel.Background>
                    <SolidColorBrush Color="Yellow"/>
                </StackPanel.Background>
                <Grid Width="100" Background="Red"/>
                <Grid Width="100" Background="#FFFF0051"/>
                <Grid Width="100" Background="#FFB900FF"/>
                <Grid Width="100" Background="#FF002EFF"/>
                <Grid Width="100" Background="#FF00FFDC"/>
                <Grid Width="100" Background="#FF51FF00"/>
                <Grid Width="100" Background="Red"/>
            </StackPanel>
        </ScrollViewer>
    </StackPanel>
    

    Putting ScrollViewers inside StackPanels is a bad idea.

    0 讨论(0)
提交回复
热议问题