Controles de Lista XAML | Cómo crear apps para win8, Cap 6

Serie de Videos:
Introducción al desarrollo de Apps para Windows 8 (WinRT), Capítulo 6: Controles de Lista

Video: Controles de Lista XAML | Cómo crear apps para win8, Cap 6

En esta sesión se revisa como utilizar controles contenedores como Grid, StackPanel y FlipView.
Este video cuenta con ejemplos de código prácticos y sencillos que puedes replicar de manera sencilla.

Comments

• Anonymous
  January 17, 2013
  Hola Juan Tengo dos dudas... En mi aplicación tengo algo muy similar al ejemplo que muestras aquí (Excelente por cierto!!), es decir, cada item de mi ListView tiene muchos objetos como border, grid, ViewBox, image, y textblock. Ahora bien mi propósito es hacerle al ListView binding mediante un webservice que me trae una url (imagen) y un texto. Pero es aquí donde me surgen varias dudas... Cómo hago para LLenar esa lista automáticamente, puede que hayan 10 datos, uno solo, o 3 datos o inclusive ningún dato, pero si exiten datos, me los llene con ese Style que tengo. Existe algo llamado StyleSelector dentro del ListView, supongo entonces que cada item de la lista viene siendo ese Style (image, textblock, ViewBox, Grid etc)y supongo tbn se define en el diseñador (xaml), y cuando el WebService me traiga datos ir adicionando elementos al listView con el Style Creado, pero intento y no me sale, no sé como crearlo, y com hacer ese ejercicio de hacer binding con el ListVIew. Gracias Juan, espero salgan muchos tutos más y de temas interesantes, me gustaría ver unos implementando un sevicio rest x ej.

• Anonymous
  January 17, 2013
  MAKITO, la buena noticia es que ese es el siguiente capítulo que estoy listo para publicar! entre hoy y el lunes estara disponible, por el momento revisa el ItemTemplate, alli creas un DataTemplate y los datos los asocias a al propiedad ItemsSource del ListView.

• Anonymous
  January 22, 2013
  Hola Juank, ya ví el nuevo video (cap 7). pese a haber implementado el modelo vista- vistamodelo del que hablas y acondicionándolo a mi entorno y a mi ejemplo, no logro mostrar los datos en el ListView. el template que cree tiene entoncs como elemento final un textBlock y un image. y ese template se agrega automáticamente a medida que crea un item el ListView. (hasta ahí todo bien). comencé a hacer el ejemplo del cap 7 y creé mi clase en el folder Models, llamada: "Segment" con las propiedades "SetSegment" y "SetImage" después en el folder ViewModels creé la clase: "ViewModelSegments" con la propiedad "Segments" declaro una variable global en el page hub.xaml.cs el ws me trae una lista de strings con la descripcion y la url de la imagen private async void GetSegments() {  //Aqui agrego los datos del ws a MyViewModelSegment de forma automática  //Segun lo que reciba el ws  for (int i = 0; i <= itemsList.Count - 1; i=+2)  {     MyViewModelSegment.Segments = new Segment()     {        SetSegment = itemsList[i].ToString(),        SetImage = new Uri(itemsList[i+1].ToString())     };  } } el xaml es el sgte (JUNTO CON LOS BINDING): <Page.Resources>       <DataTemplate x:Key="ItemTemplateStyleSegment">            <Viewbox>                <Grid Height="200" Width="300">                    <Grid.RowDefinitions>                        <RowDefinition></RowDefinition>                        <RowDefinition></RowDefinition>                    </Grid.RowDefinitions>                    <Viewbox x:Name="ViewBoxImage" Grid.Row="0">                        <Image x:Name="imgSegment"  Margin="10" Source="{Binding SetImage}"></Image>                    </Viewbox>                    <Viewbox x:Name="ViewBoxText" Grid.Row="1" Margin="10">                        <TextBlock x:Name="tbckNameSegment" Margin="10" Text="{Binding SetSegment}"></TextBlock>                    </Viewbox>                </Grid>            </Viewbox>        </DataTemplate> </Page.Resources> .... <ListView x:Name="ListViewSegments" Grid.Row="1" Margin="0,0,0,0" DataContext="{Binding Segments}" ItemContainerStyle="{StaticResource ListViewSItemtyleECFood}" ItemTemplate="{StaticResource ItemTemplateStyleSegment}"> </ListView> al ejecutarlo suceden varias cosas: 1.tengo una imagen de fondo y cuando le coloco el datacontext al ListView (xaml)el fondo desaparece.  2.No me carga ningún dato en el listView. aún así, sé que el error que debo estar cometiendo debe ser muy tonto y sencillo, pero no lo decifro.

• Anonymous
  January 22, 2013
  MAKITO, el bckground desaparece porque asi tiene que ser, en su lugar debes colocarle la imagen de fondo al control principal de tu template. Sino te muestra datos posiblemente es porque el modelo no esta marcado como publico, si revisas el video te daras cuenta de que antes de crear el template siempre creo el item normalmente dentro del view para segurarme que todo se muestra como debe, y luego de eso si creo el template.

• Anonymous
  January 22, 2013
  mmmm, no, el background es de mi grid general no del listView ni el grid que contiene al ListView, y la imagen la asigno directamente desde xaml solo al grid general, el grid que está conteniendo el ListView es otro y no tiene porqué interferir pensaría yo. en cuanto a las clases todas están públicas... no hay nda privado, todo es asequible desde el hub.xaml.cs.(mainpage mejor dicho) estoy intentando llenar desde código una descripción y colocar una imagen para llenar un item del ListView. lo que hice fué borrar el template, coloqué ese template dentro del ListView y tampoco me funciona, evidentemente al correr la aplicación tengo un item en el ListView, pero no me muestra nada, ni el texto, ni la imagen, no sé que estoy haciendo mal. y en la primera rta que me diste hablabas de asignarle al ListView.ItemSource los datos..... pero cómo si lo estoy haciendo con las clases que creé..            MyViewModelSegment.Segments = new Segment()            {                SetSegment = itemsList[0].ToString(),                SetImage = new Uri(itemsList[1].ToString())            }; Ahora is estoy mas perdido de lo q estaba antes. en tu video tienes 5 elementos (Juank, Chocorramo, link, Carl sagan, walter bishop) pero los mios no son estáticos, Mi listView va a ser dinámico, puede que sean 10 como sea 1. por eso cree un itemTemplate como me dijo

• Anonymous
  January 22, 2013
  Ahora te entiendo, quieres hacer Binding es a una colección verdad? oops eso es capítulo 8, ya esta grabado pero no esta publicado, lo estará el fin de semana... contactame por twitter, vere como ayudarte.

• Anonymous
  January 25, 2013
  Exacto!, trabajar binding con colecciones es lo que necesito aunque estos dos capítulo me han resultado muy buenos y he implementado varias cosas con estos tutos!, excelente!, lo esperaré con ansias!, listo, ya estoy siguiéndolo en twt.