c# - tutorial - wpf presentacion

Cómo usar DockStyle.Fill para controles estándar en WPF?

Question

Soy muy nuevo en WPF. Me utilizan los formularios de Windows, creo un panel, coloco controles dentro de él y les doy DockStyle.Fill para maximizar su tamaño en el panel circundante.

En WPF quiero tener lo mismo. Tengo un control de pestañas y quiero que su tamaño complete la mayor cantidad de la forma posible. Tengo un control de cinta (RibbonControlsLibrary) y quiero que el resto del formulario se rellene con el control de pestañas en el tamaño máximo.

(No quiero acoplar controles como el acoplamiento en Visual Studio, solo mecanismos de acoplamiento antiguos)

Answer 1

El equivalente de WPF del DockStyle.Fill de WinForms es:

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

Este es el valor predeterminado para casi los controles, por lo que, en general, no tiene que hacer nada para que un control WPF llene su contenedor principal : lo hacen de forma automática. Esto es cierto para todos los contenedores que no exprimen a sus hijos al tamaño mínimo.

Errores comunes

Ahora explicaré varios errores comunes que impiden que HorizontalAlignment="Stretch" VerticalAlignment="Stretch" funcione como se esperaba.

1. Altura o ancho explícitos

Un error común es especificar explícitamente un ancho o alto para un control. Entonces, si tienes esto:

<Grid>
  <Button Content="Why am I not filling the window?" Width="200" Height="20" />
  ...
</Grid>

Simplemente elimine los atributos de Ancho y Altura:

<Grid>
  <Button Content="Ahhh... problem solved" />
  ...
</Grid>

2. El panel que contiene comprime el control al tamaño mínimo

Otro error común es tener el panel de contención apretando su control tan fuerte como sea posible. Por ejemplo, un StackPanel vertical siempre comprimirá su contenido verticalmente tan pequeño como sea posible:

<StackPanel>
  <Button Content="Why am I squished flat?" />
</StackPanel>

Cambie a otro Panel y estará listo:

<DockPanel>
  <Button Content="I am no longer squished." />
</DockPanel>

Además, cualquier fila o columna de cuadrícula cuya altura sea "Auto" comprimirá de forma similar su contenido en esa dirección.

Algunos ejemplos de contenedores que no exprimen a sus hijos son:

• ContentControls nunca exprime a sus hijos (esto incluye borde, botón, casilla de verificación, ScrollViewer y muchos otros)
• Cuadrícula con una sola fila y columna
• Cuadrícula con filas y columnas de tamaño "*"
• DockPanel no exprime a su último hijo
• TabControl no comprime su contenido

Algunos ejemplos de contenedores que exprimen a sus hijos son:

• StackPanel se aprieta en su dirección de orientación
• La cuadrícula con una fila o columna de tamaño "automático" se aprieta en esa dirección
• DockPanel exprime a todos menos a su último hijo en la dirección del muelle
• TabControl comprime su encabezado (lo que se muestra en la pestaña)

3. Altura explícita o ancho más alejado

Es sorprendente cuántas veces veo que Grid o DockPanel tienen una altura y un ancho explícitos, como este:

<Grid Width="200" Height="100">
  <Button Content="I am unnecessarily constrainted by my containing panel" />
</Grid>

En general, nunca desea otorgarle a ningún Panel un Alto o Ancho explícito. Mi primer paso al diagnosticar problemas de diseño es eliminar cada alto o ancho explícito que puedo encontrar.

4. La ventana es SizeToContent cuando no debería ser

Cuando use SizeToContent, su contenido se comprimirá al tamaño mínimo. En muchas aplicaciones, esto es muy útil y es la elección correcta. Pero si su contenido no tiene un tamaño "natural", es probable que desee omitir SizeToContent.

Answer 2

He intentado muchos métodos aquí pero no puedo resolver mi problema. (Rellene otro control en control)

Hasta que lo encontré

<Name_Control Height="auto" Width="auto"/>
//default
//HorizontalAlignment="Stretch" 
//VerticalAlignment="Stretch"

Ejemplo:

//UserControl:
<UserControl Name="UC_Test" Height="auto" Width="auto" />
//Grid: 
<Grid Name="Grid_test" Grid.ColumnSpan="2" Grid.Row="2" />
//Code: 
Grid_test.Children.Add(UC_Test);

Para un diseño fácil

<UserControl Name="UC_Test" Height="100" Width="100" />
//Code
Grid_test.Children.Add(UC_Test);
UC_Test.Width = Double.NaN;
UC_Test.Height = Double.NaN;

Answer 3

Puedes hacer lo que quieras con solo decir DockPanel LastChildFill="True" y luego asegurarte de que lo que quieres ser el relleno sea en realidad el último hijo.

The Grid es la bestia de un diseño que puede hacer casi cualquier cosa, pero DockPanel suele ser la opción correcta para su panel de diseño más externo. Aquí hay un ejemplo de psuedocode:

<DockPanel LastChildFill="True">
    <MyMenuBar DockPanel.Dock="Top"/>
    <MyStatus DockPanel.Dock="Bottom"/>

    <MyFillingTabControl />
</DockPanel>

Answer 4

simplemente envuelva sus controles en una cuadrícula con dos filas. La grilla usará automáticamente todo el espacio que se le haya asignado y podrá definir las filas para ocupar todo el espacio que quede al darles una altura de "*". La primera fila en mi ejemplo (Height = "Auto") ocupará tanto espacio como necesite la cinta. Espero que ayude.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Ribbon Grid.Row="0" />

  <TabPage Grid.Row="1" />
</Grid>

Al agregar el atributo "Grid.Row = .." a los controles secundarios de la cuadrícula, se asignan a las filas de la grilla. Entonces la grilla dimensionará sus hijos según lo definen las definiciones de fila.