If you have followed the steps and created the application while reading these posts you can continue from where we left and skip the current paragraph. Otherwise, you can quickly catch-up by downloading the application in its current state from here. You also need to go to Everlive.com, create a new storage app and fill its API key on the App.xaml.cs file as explained here.
Our application already contains the memories structure and ways to add, edit and delete them. Probably the users of such an application will have more than one photo per event and we will need to add a way to add multiple images to each memory object:
Then it would be nice if we can see the images in full screen with pan and zoom features:
We will also need to add options for editing, sharing and deleting the images:
To achieve this experience, we will use RadCloudPictureGallery. The first thing that we need to do before we add this control to our application is to allow our application to use the phone's media library. Just open the WMAppManifest from the properties folder in the SolutionExplorer of the project, choose the Capabilities tab and mark the ID_CAP_MEDIALIB_PHOTO option. Now we can add the gallery control to the ViewMemory page:
ViewMemory.xaml<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ScrollViewer Margin="12,0"> <Grid> … <telerikCloud:RadCloudPictureGallery Grid.Row="2" ScrollViewer.VerticalScrollBarVisibility="Disabled" NewPictureItemCreating="OnNewPictureItemCreating" x:Name="gallery"/> </Grid> </ScrollViewer></Grid>Let’s also add a button to the application bar that will allow us to add images to the collection:
ViewMemory.xaml<shell:ApplicationBarIconButton Text="add image" IconUri="/Assets/AppBar/Upload.png" Click="OnAddImageButton_Click"/>public class MemoryPicture : EverlivePictureItem{ private Guid memoryId; public Guid MemoryId { get { return this.memoryId; } set { if (this.memoryId != value) { this.memoryId = value; this.OnPropertyChanged("MemoryId"); } } }}private void OnAddImageButton_Click(object sender, EventArgs e){ gallery.AddNewPicture();}private async void InitCloudService(){ EverliveCloudDataService<MemoryPicture> picturesService = new EverliveCloudDataService<MemoryPicture>(); Expression<Func<MemoryPicture, bool>> filterExpression = picture => picture.MemoryId == this.memory.Id; picturesService.Filter = filterExpression; gallery.CloudDataService = picturesService; await gallery.ReloadCloudItemsAsync();}private void OnNewPictureItemCreating(object sender, Telerik.Windows.Controls.Cloud.NewPictureItemCreatingEventArgs e){ MemoryPicture newPicture = e.NewPictureItem as MemoryPicture; if (newPicture != null) { newPicture.MemoryId = this.memory.Id; }}We also need to define the type of items that will be used by the current instance of the RadCloudPictureGallery and update the OnNavigatedTo method that we have already defined with a call to the InitCloudService method:
ViewMemory.xaml.cspublic ViewMemory(){ InitializeComponent();}protected async override void OnNavigatedTo(NavigationEventArgs e){ base.OnNavigatedTo(e); if (e.NavigationMode != NavigationMode.New) { return; } if (this.NavigationContext.QueryString.ContainsKey("id")) { string id = this.NavigationContext.QueryString["id"]; Guid guid = new Guid(id); EverliveApp everliveApp = CloudProvider.Current.NativeConnection as EverliveApp; this.memory = await everliveApp.WorkWith().Data<Memory>().GetById(guid).ExecuteAsync(); this.DataContext = this.memory; if (this.memory != null) { this.InitCloudService(); return; } } await RadMessageBox.ShowAsync("Memory not found!");}For the upload of new pictures RadCloudPictureGallery internally uses RadCloudPictureUpload. In order to specify the type of items that the picture upload control will use, you also need to define the picture type in the EverliveProviderSettings defined in the App constructor on App.xaml.cs:
App.xaml.cs:settings.PicturesType = typeof(MemoryPicture);
So far our Memories application has a way to add new users, authenticate the existing ones, allow them to add their own memories and enhance them with lots of images. These images can then be further explored, edited and shared.
You can download the Memories application with its current progress here.
You can go to the online documentation and read more about RadCloudPictureGallery.
Stay tuned for the next part of the series that will present you another 2 of the cloud-powered controls for Windows Phone.
If you still haven’t tried Cloud Controls for Windows Phone, you can go to your Telerik account and download Q2 2013 SP1 which contains the CTP version of these controls. For a better grasp of their capabilities you can download our Examples application which demonstrates their common usages.