This is the third part of the blog series presenting the first ever cloud-powered controls for Windows Phone. This post will show you how to add more than one image for each item, how to browse all images, edit them, share them with your friends and delete them. RadCloudPictureGallery is the component that will help us along the way.


Recap

In Part 1 and Part 2, we created an application that we called Memories. This application aims to allow the users to store information and pictures about important events in their lives, such as a birthday party, a New Year celebration, etc.

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.

The Gallery

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:

ViewMemory page

Then it would be nice if we can see the images in full screen with pan and zoom features:

Image in full screen

We will also need to add options for editing, sharing and deleting the images:

Editing an image

The Code

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"/>

Now we need to define the type that we are going to use for storing the images. Let's add a new class MemoryPicture.cs to the Models folder:

MemoryPicture.cs
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");
            }
        }
    }
}

The same type also needs to be defined on Everlive.com:


We will use the MemoryId property to associate the uploaded images to a specific Memory object.

Now that the type used for the pictures is defined, we can go to the ViewMemory page and use it to load the objects with that type by defining a new Cloud Data Service, similarly to the way we did with RadCloudJumpList:

ViewMemory.xaml.cs
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.cs
public 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);


Edit, Share, Delete

Now that we have added the gallery and we have an option to add new images, all that’s left for today is to add a way to delete images, make modifications and share them. In order to do that, we need to… do nothing! All these features are part of RadCloudPictureGallery and you don’t have to do any other modifications to the code.


Conclusion

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.


About the Author

Todor Petrov

 is Software Developer in Telerik Windows Phone Team

Related Posts

Comments