Lo que es mejor en WPF para el diseño de la interfaz de usuario, usando una cuadrícula, o cuadrículas anidadas

Question

Estoy haciendo una interfaz de usuario en WPF, tengo un montón de áreas funcionales y utilizo una cuadrícula para organizarlo.

Ahora la cuadrícula que quiero no es uniforme, como en, alguna área funcional abarcará varias celdas en la cuadrícula. Me preguntaba cuál es la mejor práctica para resolver esto. ¿Debo crear una cuadrícula y luego para cada área funcional configurarla para que abarque varias celdas, o debería dividirla en múltiples Grillas anidadas?

En esta imagen, el panel de la izquierda (paneles separados por la barra gris) es lo que quiero. El panel central muestra una cuadrícula donde las líneas azules están superpuestas por un área funcional. El panel de la derecha muestra cómo podría hacerlo con grillas anidadas. Puedes ver que la grilla verde tiene una división horizontal. En la celda inferior está la Grilla amarilla con una división vertical. En el lado de la celda izquierda está la Red Grid con nuevamente una división horizontal. Grids http://www.freeimagehosting.net/uploads/08f2711bae.jpg

Me preguntaba cuáles son las mejores prácticas, el panel central o el derecho.

ACTUALIZACIÓN: Sólo una aclaración, una forma más 'código orientado' ejemplo:

el panel central

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

    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="200" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Menu   Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" /> 
    <uc:Info  Grid.Row="1" Grid.Column="0" /> 
    <uc:Control Grid.Row="2" Grid.Column="0" /> 
    <uc:Simulation Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" /> 
</Grid> 

El panel de la derecha:

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

    <Menu Grid.Row="0"/> 

    <Grid Grid.Row="1"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="200" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <Grid Grid.Column="0"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*" /> 
       <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 

      <uc:Info Grid.Row="0" /> 
      <uc:Control Grid.Row="1" /> 
     </Grid> 

     <uc:Simulation Grid.Column="1" /> 
    </Grid> 
</Grid> 

Actualización: Tengo que admitir que ahora que escribí el código para ambos enfoques, la solución "span" se ve mucho mejor.

Answer 1

Me gustaría ir personalmente con su disposición media usando una sola cuadrícula con tramos de columnas y filas para estructurar el diseño general de la interfaz de usuario, luego coloque un panel en cada una de esas secciones para contener los controles reales (y posible diseño detallado)

Answer 2

Me temo que no puedo distinguir sus soluciones con el color en las diferentes cuadrículas y subredes.

Lo que puedo aconsejar es crear un UserControl para cada área funcional, luego tener una grilla para organizar estas áreas.

Cada UserControl es libre de crear su propio diseño (con otra cuadrícula, o un StackPanel más simple, o lo que sea) y es responsable de mostrar un subconjunto de datos/manejar eventos de usuario en su propia área.

La rejilla exterior es entonces un árbitro para cosas que involucran más de un área (por ejemplo, reenvío de eventos entre áreas).

Answer 3

Recomendaría crear una cuadrícula maestra dividida en áreas funcionales, luego crear grillas/paneles de distribución/etc separados en estas áreas. Es posible que no conozca los requisitos para cada área funcional, por lo que puede organizar sus elementos libremente y alternar entre diseños. Cuando coloque todo en una cuadrícula con columnas y/o filas de tramo, obtendrá un diseño "difícil de administrar".

Answer 4

Francamente, yo iría por un dockpanel o así para la composición de nivel superior, y las rejillas para bajo nivel