martedì 12 novembre 2013

Syncfusion TileView - Windows Phone


I found a nice Windows Phone control in the Syncfusion suite: the TileView.
That control has the ability to show a collection of items but one can be maximized to display more informations.





The code is very simple, so let's start to explain the wp8 version!

First of all you need to reference two dll in your project:
  1.  Syncfusion.SfTileView.WP8.dll
  2.  Syncfusion.SfShared.WP8.dll
In the xaml, add the namespace:
xmlns:syncTileView="clr-namespace:Syncfusion.WP.Controls.Layout;assembly=Syncfusion.SfTileView.WP8"

and your TileView object:
<syncTileView:SfTileView ItemsSource="{Binding ComingSoonFilms}" MinimizedItemsOrientation="Right">
   ....
   ....
   ....
</syncTileView:SfTileView>
"MinimizedItemsOrientation property change the orientation of items while the maximized item is displayed"

Now you need the ItemTemplate to show your items and a MaximizedItemTemplate to show the detail.
You can create a simple ItemTemplate with an image:
<syncTileView:SfTileView.ItemTemplate>
 <DataTemplate>
  <Image Source="{Binding Picture}" Width="100" Height="160" Stretch="Fill"/>
 </DataTemplate>
</syncTileView:SfTileView.ItemTemplate>

and a MaximizedItemTemplate like this:
<syncTileView:SfTileView.MaximizedItemTemplate>
 <DataTemplate>
  <Grid>
   <Grid.RowDefinitions>
    <RowDefinition Height="auto"/>
    <RowDefinition/>
   </Grid.RowDefinitions>
   <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextLargeStyle}"/>
   <Image Grid.Row="1" Source="{Binding Picture}" Stretch="UniformToFill"/>
  </Grid>
 </DataTemplate>
</syncTileView:SfTileView.MaximizedItemTemplate>

Nessun commento:

Posta un commento