Telerik UI for Windows Phone by Progress

Adding a RadCloudPictureUpload instance in your Windows Phone application

The following steps will guide you through the process of setting up a RadCloudPictureUpload instance on a Windows Phone page:

  1. Define a XAML namespace in the XAML file of your page as follows:

    CopyXAML
    xmlns:telerikCloudControls="clr-namespace:Telerik.Windows.Controls.Cloud;assembly=Telerik.Windows.Controls.Cloud"

  2. Define a RadCloudPictureUpload instance on the page as follows:

    CopyXAML
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
    
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <telerikCloudControls:RadCloudPictureUpload 
                Height="132" 
                Width="132" 
                HorizontalAlignment="Left">
    
                <telerikCloudControls:RadCloudPictureUpload.EmptyContentTemplate>
                    <DataTemplate>
                            <Image Stretch="None" Source="/Assets/Images/EmptyContent.png"/>
                    </DataTemplate>
                </telerikCloudControls:RadCloudPictureUpload.EmptyContentTemplate>
    
        </telerikCloudControls:RadCloudPictureUpload>
        </Grid>
      </Grid>

  3. This will add a picture upload object with the specified empty content. When the control is tapped it will open a new PhoneChooserTask that will allow you to choose an image from your image library. Once the image is successfully uploaded to the cloud the empty content will disappear and a preview of the image will be shown instead. You can use the PictureUploaded and PictureUploadFailed events to apply your custom logic in these cases.
  4. When the image file is successfully uploaded, you will probably need to create a picture item that you will actually use to access the image, its thumbnail and any additional properties that you may want to add. You can use the PictureUploaded event, which will be fired when the image file is uploaded and you will have access to a created picture item element, which will be a parameter. This way you will be able to set any additional properties and actually save the item to the Cloud. By default the item will be of type EverlivePictureItem and you will be able to change it as explained here. You will also need to have the same content type defined on everlive.com. Here is the way the content type that you create on Everlive should look like if you decide to stay with the default type EverlivePictureItem:

    Cloud Controls Pictures Info

    Now, let's get back to the application. Even though the picture item is prepared once the image file is uploaded, you will have to manually create it in the Cloud when the PictureUploaded event occurs:

    CopyXAML
    private async void OnPictureUploadControl_PictureUploaded(object sender, PictureUploadEventArgs e)
    {
        EverlivePictureItem picture = e.PictureItem as EverlivePictureItem;
        EverliveApp app = CloudProvider.Current.NativeConnection as EverliveApp;
        await app.WorkWith().Data(typeof(EverlivePictureItem), "EverlivePictureItem").Create(picture).TryExecuteAsync();
    }

Now you have a picture item which allows you to access the whole picture through the PictureUri property and a thumbnail of the image through the PictureThumbnailUri property.