Tutorial Windows Phone – Criando Componentes Visuais no Windows Phone

On 16 de outubro de 2014 by Gustavo Quintão

Windows Phone Dev Header

Neste tutorial ensinaremos a como criar componentes visuais para a plataforma Windows Phone. Esses componentes são uteis quando você deseja que vários elementos visuais hajam em conjunto. Como exemplo criaremos um ImageButton, um componente que funciona como um botão e possui uma imagem e um texto.

botão teste

Criando o UserControl

O nosso componente visual será criado estendendo a classe UserControl. Para isso, no Visual Studio, selecione a opção Project > Create Class > Windows Phone User Control. Para seguir esse exemplo dê o nome de ImageButton para a classe a ser criada. Com a classe criada serão gerados dois novos arquivos o ImageButton.xaml e o ImageButton.xaml.cs , ou seja,  o arquivo para descrever o componente e outro para implementar o comportamento deste componente.

O arquivo ImageButton.xaml deverá possuir um Grid que contenha uma Imagem e um TextBlock. Segue abaixo o trecho de código correspondente ao xaml do nosso componente.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<UserControl
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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" x:Class="UGuideUFOP.Utils.ImageButton"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="240" d:DesignWidth="200">

<Grid x:Name="ImageButtonLayoutRoot" Background="#FFB9B9B9" RenderTransformOrigin="0.5,0.5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>

<Image x:Name="Image" Width="auto" Grid.Row="0" Margin="10,10,10,10"/>
<TextBlock x:Name="Label" TextAlignment="Center" Grid.Row="1" Foreground="White" FontSize="24" Margin="10,10,10,10"/>
</Grid>
</UserControl>
[/sourcecode]

Como pode ser visto neste trecho de código também configuramos a cor de fundo do grid, pois engloba todos os itens dentro do mesmo, e os tamanhos e alinhamentos dos elementos. Com a aparência do nosso aplicativo já definida devemos trabalhar no código que implementa esse componente. No arquivo ImageButton.xaml.cs deverão ser implementados os códigos referentes ao construtor da classe, que no nosso exemplo é gerado automaticamente, e os atributos que o desenvolvedor pode alterar quando estiver usando o componente. Neste exemplo permitiremos que o o desenvolvedor altere somente o mais relevante, a imagem e o texto do ImageButton. No trecho de código abaixo é possível ver como foi implementado esses modificadores.

[sourcecode language=”csharp” wraplines=”false” collapse=”false”]
public partial class ImageButton : UserControl
{
// Armazena o caminho pra imagem do botão.
private ImageSource _Source;
// Armazena o texto do botão.
private String _Label;

public ImageButton()
{
InitializeComponent();
}

public ImageSource Source
{
get
{
return _Source;
}
set
{
_Source = value;
Image.Source = value;
}
}

public String LabelText
{
get
{
return _Label;
}
set
{
_Label = value;
Label.Text = value;
}
}
}
[/sourcecode]

Com isso já possuímos o componente pronto para usar. Mas como usar? no arquivo xaml que o desenvolvedor quer adicionar este componente ele deverá adicionar a linha a seguir ao cabeçalho do arquivo. Ela serve para indicar ao VisualStudio onde ele pode encontrar definições locais de componentes.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<phone:PhoneApplicationPage
xmlns:local="clr-namespace:Pasta.Contendo.O.Componente" >

<!– Exemplo:
xmlns:local="clr-namespace:UGuideUFOP.Utils" –>
[/sourcecode]

E para adicionar o componente ao xaml propriamente dito, basta:

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<local:ImageButton LabelText="Botão Teste" Source="events.png" Height="180" Width="180" Tap="ImageButton_Tap"/>
[/sourcecode]

Assim criamos e usamos um componente visual que engloba tanto uma imagem como um texto. Este método de criação de componente é flexível e permite que possamos adicionar outros elementos, como por exemplo um indicador de itens não lidos por exemplo, bastando para isso poucas alterações.

Trackbacks & Pings

Deixe um comentário

O seu endereço de e-mail não será publicado.