Telerik UI for Windows Phone by Progress

This article demonstrates the options to customize the look and behavior of RadCloudPictureUpload.

Custom Empty Content

When RadCloudPictureUpload is placed on a page, it first displays its empty content. This content can be modified by using the EmptyContent and EmptyContentTemplate properties.

Here's one example with CustomContent and CustomContentTemplate:

<telerikCloudControls:RadCloudPictureUpload EmptyContent="add photo">
            <Grid Width="136" Height="136" Background="{StaticResource PhoneAccentBrush}">
                <TextBlock VerticalAlignment="Bottom" Margin="12" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeLarge}" Text="{Binding}" TextWrapping="Wrap"/>

Here's how the control should be looking with this custom template:

Cloud Controls Picture Upload Empty Content

Fixed Size Image

When an image is selected from the PhotoChooserTask it can be resized, so that it is avoided to store too large images to the Cloud. This can be achieved by the PixelWidth and PixelHeight properties. When they are set, the PhotoChooserTask will provide a crop tool that will allow the user to choose what part of the selected image they want to be uploaded.

Preview Image Custom Style

When an image is successfully uploaded it is shown as a preview instead of the EmptyContent. This is preview is placed inside an Image element. This element can have a custom style applied. This style is defined by the ImageElementStyle. This style can be used for example, to change the value of the Image's Stretch property.

Static Upload

RadCloudPictureUpload can also be used for a static upload of an image. That is, the user don't need to see any visual, empty content and preview of the uploaded image. Instead the image can be uploaded on a button's Click event. This can be achieved by using the UploadImage method:

RadCloudPictureUpload pictureUpload = new RadCloudPictureUpload();

Custom Picture Info

If you want to use a custom type that can contain more information about the pictures, for example, title, author, etc., you can create a custom type that inherits from EverlivePictureItem, which contains the basic picture properties. You will have to set this type in the EverliveProviderSettings in the App.xaml.cs file where the CloudProvider is initialized. Here's an example with the custom picture type named Picture:

private void InitCloudProvider()
    EverliveProviderSettings providerSettings = new EverliveProviderSettings();
    providerSettings.ApiKey = ApiKey;
    providerSettings.PicturesType = typeof(Picture);

    CloudProvider.Init(ProviderType.Everlive, providerSettings);

You can also use the PictureUploaded event to set the additional properties to the item, before you create it in the Cloud.