Ayer tuve el honor de participar con unos cracks en el pedazo de evento que organizo MADNUG.
Participe con un minitrack de Async y Await con C# 5.0 dentro de VS2012.
A pesar de los nervios, todo lo demás fue muy bien, y me lo pase genial en el evento.
Os dejo el enlace a la grabación, y los materiales de mi charla (Demos + PPT)
Espero que os sea de utilidad!
PD: De nuevo quiero felicitar a todos mis compañeros y a los amigos de SecondNug por el soporte!
En este post vamos a ver qué es y como hacer uso de este nuevo control introducido en la galería de controles de aplicaciones para la Windows Store.
Es un Control de usuario compuesto de "2 vistas”, que nos permite cambiar entre ellas haciendo 
para hacer zoom in, o el gesto contrario para hacer zoom out, lo que permite una interacción táctil adaptada a los nuevos dispositivos que vienen.
En primer lugar será necesario definir el control dentro de nuestra Vista, a través de XAML o arrastrándolo desde la barra de controles de Visual Studio.
Después pasaremos a definir las propiedades ZoomedOutView y ZoomedInView:
1: <SemanticZoom>
2: <SemanticZoom.ZoomedOutView>
3: <GridView></GridView>
4: </SemanticZoom.ZoomedOutView>
5: <SemanticZoom.ZoomedInView>
6: <GridView></GridView>
7: </SemanticZoom.ZoomedInView>
8: </SemanticZoom>
A continuación vamos a definir la vista sin zoom :
1: <GridView
2: AutomationProperties.AutomationId="ItemGridView"
3: AutomationProperties.Name="Grouped Items"
4: ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False" SelectionMode="None" ItemsSource="{Binding Source={Binding Floors}}" Margin="0" Padding="0" VerticalAlignment="Center" HorizontalAlignment="Center">
5: <GridView.Resources>
6: <ItemsPanelTemplate x:Key="ItemsPanelZoomOut">
7: <StackPanel Orientation="Horizontal"/>
8: </ItemsPanelTemplate>
9: </GridView.Resources>
10: <GridView.ItemTemplate>
11: <DataTemplate>
12: <Grid>
13: <TextBlock Text="{Binding Group.Floor}"/>
14: </Grid>
15: </DataTemplate>
16: </GridView.ItemTemplate>
17: <GridView.ItemsPanel>
18: <StaticResource ResourceKey="ItemsPanelZoomOut"/>
19: </GridView.ItemsPanel>
20: <GridView.GroupStyle>
21: <GroupStyle>
22:
23: <GroupStyle.HeaderTemplate>
24: <DataTemplate>
25: <Grid Margin="0,0,24,16">
26: <Grid.RowDefinitions>
27: <RowDefinition/>
28: <RowDefinition/>
29: </Grid.RowDefinitions>
30:
31: </Grid>
32: </DataTemplate>
33: </GroupStyle.HeaderTemplate>
34: <GroupStyle.Panel>
35: <ItemsPanelTemplate>
36: <StackPanel Orientation="Horizontal" Margin="0,0,80,0"/>
37: </ItemsPanelTemplate>
38: </GroupStyle.Panel>
39: </GroupStyle>
40: </GridView.GroupStyle>
41: </GridView>
En el GridView hemos definido el template que vamos a utilizara para la visualización de cada elemento, y una serie de caracteristicias para la visualización de la información.
Para la vista con zoom, vamos a utilizar algo parecido al siguiente GridView:
1: <GridView IsItemClickEnabled="True"
2: x:Name="gvList" IsEnabled="{Binding IsGridEnabled}"
3: SelectionMode="Single"
4: Margin="120,80,0,0" Grid.Row="2"
5: AutomationProperties.AutomationId="ItemGridView"
6: AutomationProperties.Name="Grouped Items"
7: SelectedItem="{Binding Selected}"
8: ScrollViewer.ZoomMode="Disabled"
9: ScrollViewer.IsHorizontalScrollChainingEnabled="False"
10: ScrollViewer.IsVerticalScrollChainingEnabled="False"
11: ScrollViewer.HorizontalScrollBarVisibility="Hidden" Padding="0" VerticalContentAlignment="Stretch"
12: >
13:
14: <GridView.Resources>
15: <ItemsPanelTemplate x:Key="ItemsPanelTemplateZoomIn">
16: <StackPanel Orientation="Horizontal" />
17: </ItemsPanelTemplate>
18: </GridView.Resources>
19:
20: <GridView.ItemsSource>
21: <Binding Source="{StaticResource MyViewSource}"/>
22: </GridView.ItemsSource>
23:
24: <GridView.ItemsPanel>
25: <StaticResource ResourceKey="ItemsPanelTemplateZoomIn"/>
26: </GridView.ItemsPanel>
27: <GridView.GroupStyle>
28: <GroupStyle>
29: <GroupStyle.ContainerStyle>
30: <Style TargetType="GroupItem">
31: <Setter Property="Template">
32: <Setter.Value>
33: <ControlTemplate TargetType="GroupItem">
34: <Grid Margin="0,0,40,0">
35: <Grid.RowDefinitions>
36: <RowDefinition Height="Auto"/>
37: <RowDefinition Height="*"/>
38: </Grid.RowDefinitions>
39: <ContentPresenter Content="{TemplateBinding Content}" Grid.Row="0"/>
40: <ItemsControl x:Name="ItemsControl2" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>
41: </Grid>
42: </ControlTemplate>
43: </Setter.Value>
44: </Setter>
45: </Style>
46: </GroupStyle.ContainerStyle>
47: <GroupStyle.HeaderTemplate>
48: <DataTemplate>
49: <Grid Margin="0,0,24,16">
50: <TextBlock
51: AutomationProperties.Name="Group Title"
52: Text="{Binding Floor}"
53: Foreground="#FF474747" FontFamily="Segoe UI Semibold" Margin="0"/>
54: </Grid>
55: </DataTemplate>
56: </GroupStyle.HeaderTemplate>
57:
58: </GroupStyle>
59:
60: </GridView.GroupStyle>
61:
62: </GridView>
En este GridView,, hemos definido el origen de datos, el Template que se va a aplicar a cada elemento, y la asociación con los grupos, de la vista “Zoomed Out”.
Ahora vamos a definir el origen de datos:
1: <Grid.Resources>
2: <CollectionViewSource
3: x:Name="MyViewSource"
4: IsSourceGrouped="True"
5: Source="{Binding Floors}"
6: ItemsPath="Elements"
7: />
8: </Grid.Resources>
Como podéis observar, el origen de datos está enlazado a nuestro ViewModel, en el que tenemos una propiedad llamada Floors del siguiente tipo:
1: public class ExtractionByFloor
2: {
3: private string _floor;
4:
5: public string Floor
6: {
7: get { return _title; }
8: set { _title = value; }
9: }
10:
11:
12: public IEnumerable Elements { get; set; }
13:
14: }
EDIT: Gracias a Antiocol por el reminder
Dentro del ViewModel podemos observar la propiedad Elements. Esta propiedad va a estar enlazada dentro de la vista ZommedInView especificandose en el origen de Datos.
Algo que viene al hilo de esto, es que cuando se haga zoom sobre uno de los elementos de la vista ZoomedOut, el zoom será efectivo sobre el grupo indicado haciendo el scroll (horizontal o verrtical según este configurado) .
Bien, por último desde nuestro CodeBehind vamos as asignar nuestro ViewModel, y asignaremos los grupos al zoom:
1: public MainPage()
2: {
3: this.InitializeComponent();
4: this.DataContext = new MainViewModel();
5: }
6:
7: /// <summary>
8: /// Invoked when this page is about to be displayed in a Frame.
9: /// </summary>
10: /// <param name="e">Event data that describes how this page was reached. The Parameter
11: /// property is typically used to configure the page.</param>
12: protected override void OnNavigatedTo(NavigationEventArgs e)
13: {
14: var collectionGroups = MyViewSource.View.CollectionGroups;
15: MyViewSource.View.MoveCurrentToPosition(-1);
16: ((ListViewBase)this.zoom.ZoomedOutView).ItemsSource = collectionGroups;
17: }
A través de la propiedad IsZoomedInViewActive (de tipo Bool) podemos definir como va a aparecer el control, con la vista de Zoom In o de Zoom Out.
Os dejo un enlace bastante interesante sobre el SemanticZoom.
También os dejo el enlace para que podáis descargar el proyecto.
Espero que os resulte útil =D
Bueno, pues en esta minientrada quiero decir que Microsoft me ha vuelto a elegir como Microsoft MVP en la categoría C#.
El 1 de octubre de 2011 fue mi primer nombramiento, y desde entonces me han sucedido muchas cosas tanto profesional como laboralmente.
Desde estas líneas quiero dar las gracias a todos aquellos que leeis este blog, o me seguís en Twitter / Facebook y aguantáis charlas, posts o mis tweets!
Un saludo !!
Y por cierto enhorabuena a todos los renovados Lluis, Palel, Ibon and Cia, y al nuevo MVP Josue Yeray, y a todos los que me dejo en el tintero!