Telerik UI for Windows Phone by Progress

Adding a RadCloudRegistration instance in your Windows Phone application

The following steps will guide you through the process of setting up a RadCloudDataForm 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 class called Task following the snipped shown below:

    CopyC#
    public class Task : DataItem
    {
        private string name;
        private string notes;
        private bool isCompleted;
        private TaskPriority priority;
    
        public Task()
        {
            this.Priority = TaskPriority.medium;
        }
    
        public string Name
        {
            get
            {
                return this.name;
            }
            set
            {
                if (this.name != value)
                {
                    this.name = value;
                    this.OnPropertyChanged("Name");
                }
            }
        }
    
        public string Notes
        {
            get
            {
                return this.notes;
            }
            set
            {
                if (this.notes != value)
                {
                    this.notes = value;
                    this.OnPropertyChanged("Notes");
                }
            }
        }
    
        public bool IsCompleted
        {
            get
            {
                return this.isCompleted;
            }
            set
            {
                if (this.isCompleted != value)
                {
                    this.isCompleted = value;
                    this.OnPropertyChanged("IsCompleted");
                }
            }
        }
    
        public TaskPriority Priority
        {
            get
            {
                return this.priority;
            }
            set
            {
                if (this.priority != value)
                {
                    this.priority = value;
                    this.OnPropertyChanged("Priority");
                }
            }
        }
    }

    We will use instances of this class to bind RadCloudDataForm.

  3. Define a RadCloudDataForm 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 Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="TELERIK CLOUD SYNCHRONIZATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="edit task" 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:RadCloudDataForm 
                x:Name="editTaskForm"
                CurrentItem="{Binding SelectedTask}">
                <Grid>
                    <telerikInput:DataField TargetProperty="Name" Header="Name"/>
                    <telerikInput:DataField TargetProperty="Priority"/>
                    <telerikInput:DataField TargetProperty="Notes" Header="Notes">
                        <telerikInput:DataField.EditorStyles>
                            <Style TargetType="telerikPrimitives:RadTextBox">
                                <Setter Property="AcceptsReturn" Value="True"/>
                                <Setter Property="Height" Value="250"/>
                            </Style>
                        </telerikInput:DataField.EditorStyles>
                    </telerikInput:DataField>
                </Grid>
            </telerikCloudControls:RadCloudDataForm>
        </Grid>
    </Grid>

    This XAML code additionally defines the editor fields that will be shown in the Data Form. The editor fields are mapped to properties exposed by the Task class.

    Note
    RadCloudDataForm inherits from RadDataForm so you can use it in a similar way by using the same properties and features.

  4. Use the following code snippet to bind the RadCloudDataForm instance to an instance of the Task class we have defined earlier:

    CopyC#
    this.editTaskForm.CurrentItem = new Task();

  5. Use the Commit or CommitAsync methods to save the changes and upload them to the Cloud.