Telerik UI for Windows Phone

The RadWindow control provides you with a control that represents a window that can be shown upon a user's action.

This topic will explain the following:

Using RadWindow

In order to use the RadWindow control in your application you have to reference the following assembly in your project:

  • Telerik.Windows.Controls.Primitives.dll

After adding reference to the aforementioned dll, you can declare a new RadWindow instance as any normal Silverlight control.

Note

To use the RadWindow control in the XAML you have to add the following namespace declaration:

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
CopyXAML
<telerikPrimitives:RadWindow x:Name="radWindow" />
CopyC#
RadWindow radWindow = new RadWindow();

Setting Content

The RadWindow control allows you to display content in it. In order to set the content of the RadWindow control you have to use its Content property. It is of type object, so you can assign everything to it - simple strings, UIElements, UserControls etc.

Note
You can directly wrap the content of the window inside the tag of the RadWindow control.

Here is an example of a RadWidnow control showing a list of countries.

CopyXAML
<telerikPrimitives:RadWindow x:Name="radWindow" IsFullScreen="True">
<ListBox x:Name="countriesListBox" Background="Black" Padding="20">
<ListBoxItem Content="United Kingdom" IsSelected="True" />
<ListBoxItem Content="Germany" />
<ListBoxItem Content="Russia" />
<ListBoxItem Content="Japan" />
<ListBoxItem Content="Bulgaria" />
</ListBox>
</telerikPrimitives:RadWindow>
Tip
You can also bind the Content of the RadWindow control to a data object and use the ContentTemplate property to define a DataTemplate to visualize the object.

Adding Buttons to the Application Bar Info

As the RadWindow control purpose is to provide the user with some kind of interaction, it exposes the ApplicationBarInfo property. It allows you to define buttons for the Application Bar of the application. The buttons will get shown when the RadWindow control gets opened.

To implement this feature you have to use the ApplicationBarInfo and the ApplicationBarButton classes. To handle their clicks you have to attach a handler to the ButtonClick event of the ApplicationBarInfo class.

Note
ApplicationBarButton cannot be used without an icon. Also the image representing the icon should have its BuildAction property set to Content.

Here is an example of two buttons representing OK and Cancel options.

CopyXAML
<telerikPrimitives:RadWindow x:Name="radWindow" IsFullScreen="True">
<telerikPrimitives:RadWindow.ApplicationBarInfo>
<telerikPrimitives:ApplicationBarInfo ButtonClick="ApplicationBarInfo_ButtonClick">
<telerikPrimitives:ApplicationBarButton IconUri="/Demos/Images/ok.png" Text="OK" />
<telerikPrimitives:ApplicationBarButton IconUri="/Demos/Images/cancel.png" Text="Cancel" />
</telerikPrimitives:ApplicationBarInfo>
</telerikPrimitives:RadWindow.ApplicationBarInfo>
</telerikPrimitives:RadWindow>
CopyC#
private void ApplicationBarInfo_ButtonClick( object sender, Telerik.Windows.Controls.ApplicationBarButtonClickEventArgs e )
{
if ( e.Button.Text == "OK" )
{
//implement the desired logic
this.radWindow.IsOpen = false;
}
else
{
//implement the desired logic
this.radWindow.IsOpen = false;
}
}

Here is a snapshot of the result.

Window-Getting Started-01

Opening the Window

In order to open the RadWindow control you have to set its IsOpen property to True. Here is an example, where upon clicking a button a RadWindow control gets opened.

CopyXAML
          <Grid x:Name="LayoutRoot" Background="{StaticResource
PhoneChromeBrush}">
          <Button Content="Open Window" Click="OpenButton_Click" VerticalAlignment="Center" HorizontalAlignment="Center" />
          <telerikPrimitives:RadWindow x:Name="radWindow"></telerikPrimitives:RadWindow>
          </Grid>
CopyC#
private void OpenButton_Click( object sender, RoutedEventArgs e )
{
this.radWindow.IsOpen = true;
}

Closing the Window

In order to close the RadWindow control you have to set its IsOpen property to False. Here is an example, where upon clicking a button inside the RadWindow control, it gets closed.

CopyXAML
<telerikPrimitives:RadWindow x:Name="radWindow" IsFullScreen="True">
<Grid>
<Button Content="Close" VerticalAlignment="Bottom" HorizontalAlignment="Center" Click="CloseButton_Click" />
</Grid>
</telerikPrimitives:RadWindow>
CopyC#
private void CloseButton_Click( object sender, RoutedEventArgs e )
{
this.radWindow.IsOpen = false;
}

Handling the Opening and the Closing of the Window

In order to execute custom logic before the window gets opened or closed, you have to handle the WindowOpening and WindowClosing events of the RadWindow control. To execute the logic after the window gets opened or closed use the respective events of the RadWindow control - WindowOpened and WindowClosed.

Configuring the RadWindow