c# - Desplazamiento horizontal para stackpanel no funciona

.net wpf

Question

Intento crear un panel de distribución horizontal desplazable, pero no lo logro muy bien ...

Actualmente tengo mi stackpanel con un ancho auto (y quizás el problema esté aquí) que contiene algunos elementos como grids .

Ahora, si todas mis cuadrículas no son visibles en el panel de distribución (el ancho es demasiado corto) no puedo desplazarme. Ya traté de colocar el panel de distribución dentro de ScrollViewer pero tampoco funciona.

¿Cómo puedo dix it? Gracias

EDITAR aquí está mi código:

    <StackPanel Height="85" Margin="0,0,200,15" VerticalAlignment="Bottom">
        <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="{DynamicResource ButtonBackground}"/>
                </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>

Answer 1

Actualmente tengo mi stackpanel con un ancho automático (y quizás el problema esté aquí) que contiene algunos elementos como cuadrículas.

Este es tu problema Un StackPanel mide sus hijos con espacio horizontal infinito si su propiedad de Orientación está configurada en Horizontal y el espacio vertical infinito si está configurado en Vertical. Por lo tanto, deberá especificar un ancho explícito para el propio StackPanel o ScrollViewer para que funcione.

Alternativamente, podría colocar ScrollViewer en un Panel que mida sus elementos secundarios, como por ejemplo una Cuadrícula (pero no un Panel de Apilamiento). Esto funciona, por ejemplo:

<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>

Pero esto no ocurre porque se considera que el StackPanel tiene un ancho infinito:

<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>

Poner ScrollViewers dentro de StackPanels es una mala idea.

Answer 2

Debes colocar tu StackPanel en un ScrollViewer como este:

<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>