Curso Windows Phone – Criando e utilizando UserControls

ExemploUserControlOlá pessoal, tudo bom?

Nesse post demonstro como criar e utilizar UserControls em APPs para Windows Phone. Para exemplificar, criarei um UserControl que possui uma imagem que pode ser “arrastada” através da tela do Windows Phone e, no mesmo UserControl, também temos uma espécie de cronometro para percebemos que podemos colocar o mesmo UserControl mais de uma vez na mesma página e ainda assim cada uma de suas instâncias possuirá “vida própria” dentro da APP.

O código abaixo apresenta o fonte do arquivo MyUserControl.xaml. Vamos a ele:

<UserControl x:Class="WPUserControlSample.MyUserControl"
 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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
 mc:Ignorable="d"
 FontFamily="{StaticResource PhoneFontFamilyNormal}"
 FontSize="{StaticResource PhoneFontSizeNormal}"
 Foreground="White"
 d:DesignHeight="350" d:DesignWidth="350">

 <StackPanel x:Name="LayoutRoot" Orientation="Vertical"
  Background="White"
  VerticalAlignment="Center" HorizontalAlignment="Center">
   <Image x:Name="imgLogo" Source="Imagens/wp_logo.jpg" Width="150" >
    <toolkit:GestureService.GestureListener>
     <toolkit:GestureListener GestureBegin="GestureListener_GestureBegin"
      DragDelta="GestureListener_DragDelta"
      DragCompleted="GestureListener_DragCompleted" />
    </toolkit:GestureService.GestureListener>
   </Image>
   <TextBlock x:Name="txtHoraAtual" Text="00:00:00" Foreground="Black" HorizontalAlignment="Center" />
   <TextBlock x:Name="txtMensagem" Text="Toque na imagem e arraste..." Foreground="Blue" />
  </StackPanel>
</UserControl>

Na sequência podemos observar o código do arquivo MyUserControl.xaml.cs que implementa as ações associadas à interface apresentada acima:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace WPUserControlSample
{
    public partial class MyUserControl : UserControl
    {
        private TranslateTransform transLogo;

        public string HoraAtual
        {
            get { return txtHoraAtual.Text; }
        }

        public MyUserControl()
        {
            InitializeComponent();
            transLogo = new TranslateTransform();
            imgLogo.RenderTransform = transLogo;

            DispatcherTimer dt = new DispatcherTimer();
            dt.Interval = TimeSpan.FromSeconds(1);
            dt.Tick += delegate(object s, EventArgs e)
            {
                txtHoraAtual.Text = DateTime.Now.ToLongTimeString();
            };
            dt.Start();
        }

        private void GestureListener_GestureBegin(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            imgLogo.Opacity = 0.5;
        }

        private void GestureListener_DragDelta(object sender, Microsoft.Phone.Controls.DragDeltaGestureEventArgs e)
        {
            transLogo.X += e.HorizontalChange;
            transLogo.Y += e.VerticalChange;
        }

        private void GestureListener_DragCompleted(object sender, Microsoft.Phone.Controls.DragCompletedGestureEventArgs e)
        {
            imgLogo.Opacity = 1;
        }
    }
}

Agora que temos o UserControl implementado, basta utilizá-lo nas partes da APP onde o mesmo se faz necessário. Veja no exemplo abaixo (arquivo MainPage.xaml) como associá-lo aos seus arquivos de layout:


<phone:PhoneApplicationPage
 x:Class="WPUserControlSample.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
 FontFamily="{StaticResource PhoneFontFamilyNormal}"
 FontSize="{StaticResource PhoneFontSizeNormal}"
 Foreground="{StaticResource PhoneForegroundBrush}"
 SupportedOrientations="Portrait" Orientation="Portrait"
 shell:SystemTray.IsVisible="True">

 <!--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 x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
 <TextBlock x:Name="ApplicationTitle" Text="BLOG DO EDUARDO H. RIZO" Style="{StaticResource PhoneTextNormalStyle}"/>
 <TextBlock x:Name="PageTitle" Text="usercontrol" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
 </StackPanel>

 <!--ContentPanel - place additional content here-->
 <!--Repare a declaração xmlns:uc... no StackPanel. Essa declaração "apresenta" o UserControl para o container em questão -->
 <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" xmlns:uc="clr-namespace:WPUserControlSample">
 <!--Declaração do UserControl para a página da APP -->
 <uc:MyUserControl x:Name="uc1" />
 <TextBlock x:Name="txtHorario" Text="00:00:00" HorizontalAlignment="Center" Margin="0,10,0,0" />
 <Button x:Name="btnPegarHora" Content="Pegar Hora do UC" Click="btnPegarHora_Click" />
 <!--Segunda declaração do mesmo UserControl para a mesma página da APP -->
 <uc:MyUserControl Margin="0,10,0,0" x:Name="uc2" />
 </StackPanel>
 </Grid>
</phone:PhoneApplicationPage>

A imagem abaixo apresenta um screenshot da APP em execução.

UserControlGrande abraço a todos!

Eduardo Henrique Rizo

[twitter-follow screen_name=’eduardorizo’ show_count=’yes’]

 

Post relacionado: Curso Windows Phone Gratuito

3 comentários em “Curso Windows Phone – Criando e utilizando UserControls”

  1. Pingback: Free: Curso Windows Phone – Vários tópicos | Blog do Eduardo H. Rizo

  2. O que é Usercontrol? Como adiociono isso? Para que serve? E esses códigos onde são digitados?
    Desculpe minhas interrogações, mas realmente estou interessado em saber mais sobre isto…
    Obrigado Eduardo…

    1. Wallace, UserControl é um conceito que temos tanto no WP como no ASP.NET e serve para que você possa utilizar a mesma porção de código ou funcionalidade em diferentes partes do sistema sem necessidade de implementar novamente a mesma coisa ou ficar copiando trechos de código iguais em várias partes da aplicação. Resumindo é mais uma possibilidade que temos para reaproveitar código e facilitar a manutenção da aplicação.

      Abraços,
      Eduardo

Deixe um comentário para Wallace Salviano Cancelar resposta