¿Sólo podemos utilizar controles GridView y ListView en un SemanticZoom?

Introducción

En la mayoría de ejemplos (incluso ejemplos oficiales de la MSDN) de uso del control SemanticZoom se utilizan exclusivamente controles GridView y ListView para sus vistas ZoomedOutView y ZoomedInView.

¿A que es debido?, ¿Es técnicamente imposible utilizar otros controles?, ¿carece de sentido?.

A todas esas preguntas vamos a dar respuesta en la entrada actual.

NOTA: Recordar que ya realizamos una introducción al control SemanticZoom en la siguiente entrada.

ISemanticZoomInformation

Efectivamente, por defecto los únicos controles que podemos utilizar en un Zoom Semántico son el GridView y el Listview. Esto es asi porque ambos controles derivan de ListViewBase e implementan la interfaz ISemanticZoomInformation.

¿Qué ocurre si intentamos utilizar cualquier otro control en cualquiera de las dos vistas del SemanticZoom?.

Vamos a realizar un ejemplo lo más simple posible pero que nos sea válido para verificar que ocurre.  La plantilla selecciona para realizar el ejemplo lo más simple posible será “Blank Application”.

Blank Application

Recordamos que la estructura básica de un SemanticZoom es la siguiente:

<SemanticZoom>
     <SemanticZoom.ZoomedOutView>
          <!-- Contenido -->
     </SemanticZoom.ZoomedOutView>
     <SemanticZoom.ZoomedInView>
          <!-- Contenido -->
     </SemanticZoom.ZoomedInView>
</SemanticZoom>

Vamos a añadir a cada vista un Grid que contenga botones (MaingPage.xaml):

<SemanticZoom>
     <SemanticZoom.ZoomedOutView>
          <Grid>
               <Button/>
          </Grid>
     </SemanticZoom.ZoomedOutView>
     <SemanticZoom.ZoomedInView>
          <Grid>
               <Button/>
          </Grid>
     </SemanticZoom.ZoomedInView>
</SemanticZoom>

Si intentamos compilar nuestro proyecto nos encontraremos con los siguientes errores:

Oops!. El error es bastante descriptivo. Estamos utilizando un Grid como contenido de cada vista. El control Grid NO implementa la interfaz ISemanticZoomInformation.

¿Y si creamos un Grid personalizado que derive de dicha interfaz?

Manos a la obra. Añadimos una nueva clase a nuestro proyecto. En el ejemplo que podéis encontrar al final de la entrada se le ha llamado “CustomGrid”. Hacemos que nuestro CustomGrid derive del control Grid y de la interfaz ISemanticZoomInformation. Implementamos dicha interfaz.

Para ello hacemos clic derecho sobre la interfaz y pulsamos sobre la opción “Implementar interfaz”:

Implementar la interfaz ISemanticZoomInformation

Se nos añadirá de manera automática el siguiente código:

public class CustomGrid : Grid, ISemanticZoomInformation
{
     public void CompleteViewChange()
     {
          throw new System.NotImplementedException();
     }

     public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)
     {
          throw new System.NotImplementedException();
     }

     public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
     {
          throw new System.NotImplementedException();
     }

     public void InitializeViewChange()
     {
          throw new System.NotImplementedException();
     }

     public bool IsActiveView
     {
          get
          {
               throw new System.NotImplementedException();
          }
          set
          {
               throw new System.NotImplementedException();
          }
      }

      public bool IsZoomedInView
      {
          get
          {
               throw new System.NotImplementedException();
          }
          set
          {
               throw new System.NotImplementedException();
          }
      }

      public void MakeVisible(SemanticZoomLocation item)
      {
           throw new System.NotImplementedException();
      }

      public SemanticZoom SemanticZoomOwner
      {
          get
          {
               throw new System.NotImplementedException();
          }
          set
          {
               throw new System.NotImplementedException();
          }
      }

      public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)
      {
           throw new System.NotImplementedException();
      }

      public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
      {
           throw new System.NotImplementedException();
      }
}

Continuamos. Para nuestro ejemplo no vamos a sobreescribir el comportamiento base de los métodos creados. Debido a ello vamos a comentar los lanzamientos de excepciones por no implementación. También vamos a modificar las propiedades a utilizar añadiendo sus get y set:

public bool IsActiveView
{
     get;
     set;
}

public bool IsZoomedInView
{
     get;
     set;
}

public SemanticZoom SemanticZoomOwner
{
     get;
     set;
}

Añadimos el contructor a la clase:

public CustomGrid()
: base()
{

}

La clase completa quedaría:

public class CustomGrid : Grid, ISemanticZoomInformation
{
     public CustomGrid()
     : base()
     {

     }

     public void CompleteViewChange()
     {
          //throw new System.NotImplementedException();
     }

     public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)
     {
          //throw new System.NotImplementedException();
     }

     public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
     {
          //throw new System.NotImplementedException();
     }

     public void InitializeViewChange()
     {
          //throw new System.NotImplementedException();
     }

     public bool IsActiveView
     {
          get;
          set;
     }

     public bool IsZoomedInView
     {
          get;
          set;
     }

     public void MakeVisible(SemanticZoomLocation item)
     {
          //throw new System.NotImplementedException();
     }

     public SemanticZoom SemanticZoomOwner
     {
          get;
          set;
     }

     public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)
     {
          //throw new System.NotImplementedException();
     }

     public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
     {
          //throw new System.NotImplementedException();
     }
}

Lo tenemos todo listo para usar. Nos dirigimos al XAML donde vamos a trabajar (MainPage.xaml):

xmlns:local="using:Ejemplo_ISemanticZoomInformation"

Vamos a definir un Zoom Semántico que utilizará en ambas vistas nuestro CustomGrid:

<SemanticZoom>
     <SemanticZoom.ZoomedInView>
           <local:CustomGrid>
                <Grid.ColumnDefinitions>
                     <ColumnDefinition/>
                     <ColumnDefinition/>
                     <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                     <RowDefinition/>
                     <RowDefinition/>
                </Grid.RowDefinitions>
               <Button Grid.Column="0" Grid.Row="0" Background="Red">1</Button>
               <Button Grid.Column="1" Grid.Row="0" Background="Blue">2</Button>
               <Button Grid.Column="2" Grid.Row="0" Background="Orange">3</Button>
               <Button Grid.Column="0" Grid.Row="1" Background="DeepPink">4</Button>
               <Button Grid.Column="1" Grid.Row="1" Background="Purple">5</Button>
               <Button Grid.Column="2" Grid.Row="1" Background="Yellow">6</Button>
          </local:CustomGrid>
     </SemanticZoom.ZoomedInView>
     <SemanticZoom.ZoomedOutView>
          <local:CustomGrid>
               <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
               </Grid.ColumnDefinitions>
               <Button Background="OrangeRed">1</Button>
               <Button Grid.Column="1" Background="DarkBlue">2</Button>
               <Button Grid.Column="2" Background="DarkGreen">3</Button>
          </local:CustomGrid>
     </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Fácil, ¿verdad?

Hemos añadido a cada vista un CustomGrid. Dentro de cada grid personalizado hemos añadido una serie de botones (podrían haber sido otros controles).

El resultado tras ejecutar la aplicación es el siguiente:

ZoomedInView

ZoomedOutView

Puedes descargar el ejemplo realizado:

Conclusiones

  • Hemos podido probar con este ejemplo que SI podemos utilizar otros controles diferentes al GridView y al ListView en un SemanticZoom.
  • Para que un control puede ser utilizado en un SemanticZoom debe implementar la interfaz ISemanticZoomInformation.
  • En determinadas situaciones, el utilizar controles personalizados en alguna de las vistas del SemanticZoom puede ser un elemento distintivo y positivo en nuestra aplicación. Pero CUIDADO, en la mayoría de circustancias estarás rompiendo con las guías de diseño marcadas para el uso del SemanticZoom y no es recomendable. Analiza con detenimiento la implementación y usabilidad de vistas personalizadas en el Zoom Semántico.

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s