×
Namespaces

Variants
Actions

Telerik RadControls - Rápida implementação da página Sobre para Windows Phone Apps

From Nokia Developer Wiki
Jump to: navigation, search

Este artigo mostra como implementar rapidamente uma página "Sobre" ou "Acerca de" para aplicações de Windows Phone, usando o projeto template da Telerik RadControls.

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

Exemplo de código
Testado com
Aparelho(s): Nokia Lumia

Compatibilidade
Plataforma(s): Windows Phone 7.5 and later
Windows Phone 8
Windows Phone 7.5

Artigo
Palavras-chave: Telerik, RadControls, Acerca de, Sobre, Cimbalino toolkit
Tradução:
Por saramgsilva
Última alteração feita por hamishwillee em 21 Nov 2013

Contents

Introdução

A Telerik RadControls disponibiliza um projeto template que permite escolher um conjunto de funcionalidade que serão incluida no projeto, aquando da sua criação. A página "Sobre" é uma delas.

Tip.pngTip: A Telerik oferece uma versão de teste, que permite explorar os controlos. O programa Nokia Premium Developer permite aos seus membros terem uma licença válida destes!

Ecrãs

Para compreender melhor o que iremos fazer, primeiro iremos criar a página "Sobre" que é fornecida pelo projeto template da Telerik, cujo resultado é:


Página "Sobre", gerada por omissão pelo projeto template da Telerik

Depois, iremos customizar a página para que esta tenha a sua própria informação, o resultado será:

Customização da página "Sobre"

Criação do projeto

Para começar o projeto é recomendado que se instale os Telerik RadControls (versão de teste).

  1. Seleção do projeto que se irá criar:
    Creating the project
  2. Telerik tem uma interface para a seleção inicial. Selecione a plataforma e referências da Telerik que queremos:
    Selecting the platform and Telerik references
  3. Seleção da funcionalidade página "Sobre"':
    Selecting features - About page

Quando o projeto é criado iremos obter a página por omissão podemos ver nos ecrãs.

O resultado da estrutura do projeto será:

Telerik projectScruture.png

Customização

Comecemos por analisar a página Home Page '

"Home Page" resultante

Cujo XAML é

<phone:PhoneApplicationPage x:Class="NokiaDev.RadControlsSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
SupportedOrientations="Portrait"
shell:SystemTray.IsVisible="True"
mc:Ignorable="d">
 
<!-- 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>
 
<!--
LOCALIZATION NOTE:
To localize the displayed strings copy their values to appropriately named
keys in the app's neutral language resource file (AppResources.resx) then
replace the hard-coded text value between the attributes' quotation marks
with the binding clause whose path points to that string name.
 
For example:
 
Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
 
This binding points to the template's string resource named "ApplicationTitle".
 
Adding supported languages in the Project Properties tab will create a
new resx file per language that can carry the translated values of your
UI strings. The binding in these examples will cause the value of the
attributes to be drawn from the .resx file that matches the
CurrentUICulture of the app at run time.
-->
 
<!-- TitlePanel contains the name of the application and page title -->
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle"
Style="{StaticResource PhoneTextNormalStyle}"
Text="MY APPLICATION" />
<TextBlock x:Name="PageTitle"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"
Text="page name" />
</StackPanel>
 
<!-- ContentPanel - place additional content here -->
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<ListBox Margin="14,0,-12,0"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}">
<ListBoxItem Content="About" Tap="GoToAbout" />
</ListBox>
</Grid>
 
<!--
Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.
 
Before shipping remove this XAML and the image itself.
-->
<!-- <Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" /> -->
 
</Grid>
 
<!-- Sample code showing usage of ApplicationBar -->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsMenuEnabled="True" IsVisible="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" />
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1" />
<shell:ApplicationBarMenuItem Text="MenuItem 2" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
 
</phone:PhoneApplicationPage>

Para navegar para a página "Sobre" é necessário clicar na palavra "About" (tap gesture), o código referente é:

<ListBoxItem Content="About" Tap="GoToAbout" />

E em code behind iremos ter:

        /// <summary>
/// Navigates to about page.
/// </summary>
private void GoToAbout(object sender, GestureEventArgs e)
{
this.NavigationService.Navigate(new Uri("/About.xaml", UriKind.RelativeOrAbsolute));
}


A página 'About Page será:


<phone:PhoneApplicationPage x:Class="NokiaDev.RadControlsSample.About"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:viewModels="clr-namespace:NokiaDev.RadControlsSample.ViewModels"
Name="Root"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
SupportedOrientations="Portrait"
d:DesignHeight="768"
d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
mc:Ignorable="d">
 
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.DataContext>
<viewModels:CommandSampleViewModel />
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
 
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle"
Style="{StaticResource PhoneTextNormalStyle}"
Text="APP TITLE" />
<TextBlock x:Name="PageTitle"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"
Text="about" />
</StackPanel>
 
<Grid x:Name="ContentPanel"
Grid.RowSpan="2"
Margin="12,160,12,1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
 
<StackPanel>
<TextBlock Margin="12,0,12,0"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="{Binding ApplicationName,
ElementName=Root}" />

 
<StackPanel Orientation="Horizontal">
<TextBlock Margin="12,0,12,0"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="Version number" />
<TextBlock Margin="12,0,12,0"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="{Binding Version,
ElementName=Root}" />

</StackPanel>
</StackPanel>
 
<TextBlock Grid.Row="1"
Margin="12,24,12,24"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneSubtleBrush}"
TextWrapping="Wrap">
This application show an 'About page' sample for Windows Phone applications.
<LineBreak />
See more about it, please see the following reference:&quot;
</TextBlock>
<HyperlinkButton Grid.Row="2"
Margin="0,12,0,0"
HorizontalAlignment="Left"
Command="{Binding SendAnEmailCommand}"
Content="technical support/feedback email"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneAccentBrush}" />
<HyperlinkButton Grid.Row="3"
Margin="0,12,0,0"
HorizontalAlignment="Left"
Command="{Binding RateThisAppCommand}"
Content="rate this app"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneAccentBrush}" />
<StackPanel Grid.Row="4"
Margin="12,0,12,50"
VerticalAlignment="Bottom">
<Image HorizontalAlignment="Left"
Source="Images/CompanyLogo.png"
Stretch="None" />
<TextBlock Margin="0,12,0,0"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="Copyright (c) 2013 Nokia Developer Wiki." />
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="Nokia" />
</StackPanel>
</Grid>
</Grid>
 
</phone:PhoneApplicationPage>

e

public partial class About : INotifyPropertyChanged
{
/// <summary>
/// The application manifest
/// </summary>
private readonly ApplicationManifest _applicationManifest;
 
/// <summary>
/// Initializes a new instance of the <see cref="About"/> class.
/// </summary>
public About()
{
InitializeComponent();
 
// class that helps to get the application name and version (that is defined in manifest)
var applicationManifestService = new ApplicationManifestService();
_applicationManifest = applicationManifestService.GetApplicationManifest();
}
 
/// <summary>
/// The property changed.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
 
/// <summary>
/// Gets the application name.
/// </summary>
public string ApplicationName
{
get
{
if (_applicationManifest != null)
{
return _applicationManifest.App.Title;
}
 
return "N/D";
}
}
 
/// <summary>
/// Gets the version.
/// </summary>
public string Version
{
get
{
if (_applicationManifest != null)
{
return _applicationManifest.App.Version;
}
 
return "N/D";
}
}
 
/// <summary>
/// The on property changed.
/// </summary>
/// <param name="propertyName">
/// The property name.
/// </param>
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}

Nota: O exemplo

  1. Não implementa o padrão MVVM, mas poderia.
  2. Usa a classe ApplicationManifest do (Cimbalino toolkit - cujo código fornte é este).
  3. Usa a classe SendAnEmailCommand que é a implementação do {{Icode| ICommand}, e tem como finalidade enviar emails. Sendo utilizado na opção de suporte / feedback.
  4. Usa a classe RateThisAppCommand que é a implementação do ICommand e serve para avaliar a aplicação.

Tip.pngTip: Se pretende um exemplo mais avançado consulte o artigo Página avançada Sobre para aplicações de Windows Phone.

Referências


(*) Artigos disponíveis apenas em Inglês.

This page was last modified on 21 November 2013, at 06:22.
67 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×