c# - Panel de envoltura WPF y desplazamiento

scroll wrappanel

Question

Tengo un WrapPanel simple que contiene una serie de controles amplios. Cuando redimensiono el Width de la Window todo funciona como se espera. Los controles irán a través de una sola línea si hay suficiente espacio o se ajustan a la siguiente línea cuando no hay.

Sin embargo, lo que debo hacer es que si todos los controles están básicamente apilados verticalmente (ya que no hay más espacio horizontal) y el Width de la Window se reduce aún más, aparece una barra de desplazamiento horizontal para que pueda desplazarme y ver Todo el control si quiero. A continuación se muestra mi xaml. Intenté envolver el WrapPanel en un ScrollViewer pero no pude lograr mi objetivo.

<Window x:Class="WpfQuotes.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="Auto" Width="600" Foreground="White">
    <WrapPanel>
      <Button Width="250">1</Button>
      <Button Width="250">2</Button>
      <Button Width="250">3</Button>
    </WrapPanel>
</Window>

Por lo tanto, si reduce el Width de la Window anterior a su mínimo, no podrá ver el texto de los botones. Me gustaría que apareciera una barra de desplazamiento horizontal para poder desplazarme para ver el texto pero que no interfiera con la funcionalidad de ajuste habitual.

Gracias.

Actualización: He seguido la sugerencia de Paul a continuación y la barra de desplazamiento horizontal aparece como se esperaba ahora. Sin embargo, también quería que el desplazamiento vertical estuviera disponible, así que configuré VerticalScrollBarVisibility="Auto" . El problema es que si cambio el tamaño de la ventana para que aparezca una barra de desplazamiento vertical, también aparece la barra horizontal, aunque no sea necesaria (hay espacio horizontal suficiente para ver todo el control). Parece que la barra de desplazamiento vertical aparece desordenado con el ancho del visor de desplazamiento. ¿Hay alguna manera de corregir esto para que la barra de desplazamiento horizontal no aparezca a menos que sea realmente necesaria?

A continuación se muestra mi xaml y el único código que agregué en el CustomWrapPanel :

<Window x:Class="Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cwp="clr-namespace:CustomWrapPanelExample"
        Title="Window1" Height="Auto" Width="300" Foreground="White" Name="mainPanel">
  <ScrollViewer x:Name="MyScrollViewer" HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Auto">
    <cwp:CustomWrapPanel Width="{Binding ElementName=MyScrollViewer, Path=ActualWidth}">
      <Button Width="250">1</Button>
      <Button Width="250">2</Button>
      <Button Width="250">3</Button>
      <Button Width="250">4</Button>
      <Button Width="250">5</Button>
      <Button Width="250">6</Button>
      <Button Width="250">7</Button>
      <Button Width="250">8</Button>
      <Button Width="250">9</Button>
    </cwp:CustomWrapPanel>
  </ScrollViewer>
</Window>

Lo único anulado en CustomWrapPanel :

protected override Size MeasureOverride(Size availableSize)
{
  double maxChildWidth = 0;
  if (Children.Count > 0)
  {
    foreach (UIElement el in Children)
    {
      if (el.DesiredSize.Width > maxChildWidth)
      {
        maxChildWidth = el.DesiredSize.Width;
      }
    }
  }      
  MinWidth = maxChildWidth;
  return base.MeasureOverride(availableSize);
}

Answer 1

Aquí está la cosa, si va a usar un panel de envoltura, hace dos cosas, ocupará tanto espacio disponible en una dirección y se expandirá según sea necesario en la otra. Por ejemplo, si lo coloca dentro de una ventana como la tiene, ocupa tanto espacio horizontal como puede, y luego se expande hacia abajo, por lo que una barra de desplazamiento vertical funcionará, el contenedor principal dice "esto es cuán ancho soy, pero puedes hacerte tan grande como quieras verticalmente ", si lo cambias a una barra de desplazamiento horizontal, el visor de desplazamiento esencialmente dice" esto es lo alto que puedes ser, pero puedes ser tan ancho como desea "en este caso, el panel de ajuste no se ajusta porque no hay restricciones horizontales.

Una posible solución es cambiar la dirección en la que se envuelve el panel de envoltura de horizontal a vertical de esta manera (que probablemente no sea el comportamiento ideal o esperado):

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <WrapPanel Orientation="Vertical">
            <Button Width="250">1</Button>
            <Button Width="250">2</Button>
            <Button Width="250">3</Button>
        </WrapPanel>
    </ScrollViewer>

Para obtener el comportamiento que espera, deberá hacer algo más cercano a esto:

    <ScrollViewer x:Name="MyScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <WrapPanel MinWidth="250" Width="{Binding ElementName=MyScrollViewer, Path=ViewportWidth}">
            <Button Width="250">1</Button>
            <Button Width="250">2</Button>
            <Button Width="250">3</Button>
        </WrapPanel>
    </ScrollViewer>

Sin embargo, esta segunda solución solo funciona si ya conoce el ancho de sus elementos secundarios, lo ideal sería que su ancho máximo se establezca en el ancho real del elemento secundario más grande, pero para hacer eso tendría que crear un control personalizado que se deriva del panel de envoltura y escriba el código usted mismo para verificarlo.