We start with RadCloudLogin and RadCloudRegistration controls. These components enable the application users to create profiles, login with valid credentials and access only the data they are authorized to.
xmlns:telerikCloud="clr-namespace:Telerik.Windows.Controls.Cloud;assembly=Telerik.Windows.Controls.Cloud"
<
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
=
"MEMORIES"
Style
=
"{StaticResource PhoneTextNormalStyle}"
/>
<
TextBlock
Text
=
"registration"
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"
>
<
telerikCloud:RadCloudRegistration
RegistrationFailed
=
"OnRegistrationFailed"
RegistrationSuccess
=
"OnRegistrationSuccess"
/>
</
Grid
>
</
Grid
>
private
void
OnRegistrationSuccess(
object
sender, EventArgs e)
{
this
.NavigationService.GoBack();
}
private
async
void
OnRegistrationFailed(
object
sender, RegistrationFailedEventArgs e)
{
await RadMessageBox.ShowAsync(
"Registration failed."
);
}
<
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
=
"MEMORIES"
Style
=
"{StaticResource PhoneTextNormalStyle}"
/>
<
TextBlock
Text
=
"login"
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"
>
<
telerikCloud:RadCloudLogin
Failed
=
"OnLogin_Failed"
RegisterNavigationUri
=
"/Views/Registration.xaml"
SuccessNavigationUri
=
"/Views/Memories.xaml"
/>
</
Grid
>
</
Grid
>
private
async
void
OnLogin_Failed(
object
sender, LoginFailedEventArgs e)
{
await RadMessageBox.ShowAsync(
"Login failed."
);
}
<
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
=
"MEMORIES"
Style
=
"{StaticResource PhoneTextNormalStyle}"
/>
</
StackPanel
>
<!--ContentPanel - place additional content here-->
<
Grid
x:Name
=
"ContentPanel"
Grid.Row
=
"1"
Margin
=
"12,0,12,0"
>
</
Grid
>
</
Grid
>
<
phone:PhoneApplicationPage.ApplicationBar
>
<
shell:ApplicationBar
>
<
shell:ApplicationBar.MenuItems
>
<
shell:ApplicationBarMenuItem
Text
=
"logout"
Click
=
"OnLogout_Click"
/>
</
shell:ApplicationBar.MenuItems
>
</
shell:ApplicationBar
>
</
phone:PhoneApplicationPage.ApplicationBar
>
private
async
void
OnLogout_Click(
object
sender, EventArgs e)
{
bool
logoutSuccess = await RadCloudLogin.LogoutAsync();
if
(logoutSuccess)
{
this
.NavigationService.GoBack();
}
}
Now you just need to update the WMAppManifest.xml file so that the Navigation Page is “Views/Login.xaml”.
Now we can run the application and see how it looks so far:
The next blog post will show you how to add more Cloud Controls to this sample and will give you more information about how you can successfully integrate these controls with your applications. Here you can read the next blog post of the series.
You can download the Memories application with its current progress here.
If you still haven't tried Cloud Controls for Windows Phone, you can read how to download the CTP here.