Para mostrar datos en el diseñador debemos declararlos en el XAML en vez a través de la propiedad DataContext. Esto es así porque el diseñador parsea el XAML pero no ejecuta el code-behind. Existen varias alternativas para conseguir esto, así que vamos a ver una de ellas. Lo primero que haremos será definir nuestro origen de datos
public class MenuModel
{
public int IdMenu { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
public class MenuModelList : List<MenuModel>
{
public MenuModelList()
{
this.Add(new MenuModel() { IdMenu = 1, Name = "Name 1", Description = "Description 1" });
this.Add(new MenuModel() { IdMenu = 2, Name = "Name 2", Description = "Description 2" });
}
}
Después declararemos este objeto como un recurso para que pueda referenciado por otros elementos de la siguiente manera<Page.Resources>
<local:MenuModelList x:Key="MenuListData"/>
<CollectionViewSource x:Name="MenuListResource"
Source="{StaticResource MenuListData}"/>
</Page.Resources>
Y lo referenciaremos desde nuestro GridView de la siguiente forma<GridView x:Name="GridViewMenu"
HorizontalAlignment="Left"
Margin="19,70,0,0"
Grid.Row="1"
VerticalAlignment="Top"
SelectionMode="None"
IsItemClickEnabled="True"
ItemsSource="{Binding Source={StaticResource MenuListResource}}">
<!-- Resto de información del GridView -->
</GridView>
De esta manera veremos nuestro GridView en tiempo de diseño de la siguiente manera |
| GridView en tiempo de diseño |
El único inconveniente del modelo planteado anteriormente es que esos datos serán los mismos que se usarán cuando nuestra aplicación esté en ejecución. Si queremos usar otros datos en ejecución podemos optar por cambiar el origen de datos en el constructor de nuestro modelo en base a si estamos en tiempo de diseño o en tiempo de ejecución. Para conseguir esto podemos hacer los siguiente
public class MenuModelList : List<MenuModel> {
public MenuModelList()
{
if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
GetSampleData();
else
GetRealData();
}
private void GetSampleData()
{
this.Add(new MenuModel() { IdMenu = 1, Name = "Name 1", Description = "Description 1" });
this.Add(new MenuModel() { IdMenu = 2, Name = "Name 2", Description = "Description 2" });
}
private void GetRealData()
{
this.Add(new MenuModel() { IdMenu = 1, Name = "Elemento 1", Description = "Descripción del elemento 1" });
this.Add(new MenuModel() { IdMenu = 2, Name = "Elemento 2", Description = "Descripción del elemento 2" });
}
}
Si ejecutamos ahora nuestra aplicaciones veremos que obtenemos otros datos distintos a los que obteníamos en tiempo de diseño. |
| GridView en tiempo de ejecución |
Como vemos es relativamente fácil mostrar información en nuestros GridView en tiempo de ejecución lo cual hace que el diseño de nuestra aplicación sea más fácil de llevar a cabo porque evitaremos infinidad de ejecuciones innecesarias.
Happy coding!
