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.