[Desenvolvimento] Criando e utilizando UserControls em APPs para Windows Phone

4

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<UserControl x:Class="WPUserControlSample.MyUserControl"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="https://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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<phone:PhoneApplicationPage
    x:Class="WPUserControlSample.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://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 (@eduardorizo)

Fonte: Blog do Eduardo H. Rizo

Share.

About Author

Bacharel em Ciência da Computação pela FIPP/Unoeste, Pós-Graduado em Desenvolvimento de Sistemas Web, Segurança da Informação e Avaliação do Ensino e da Aprendizagem, Professor universitário e responsável pelo setor de desenvolvimento de sistemas web da Universidade do Oeste Paulista. MCP e MCPS pela Microsoft e nas horas vagas dedica um pouco do seu tempo escrevendo posts técnicos sobre desenvolvimento de sistemas web, windows phone, gerenciamento de servidores e outros assuntos para a comunidade.

  • Tobias Gomes

    Sou novo por aqui e acabei encontrando esse site, acabei-me interessando em criar APPs pro WP. E gostaria de saber qual programa utilizado para realizar o processo. O site ta de parabéns !

  • Glayson Junio

    E uma das primeiras vezes q entro no site, estão de parabéns pelos artigos, estou iniciando em desenvolvimento para wp8 e gostoria de saber se tem como instalar meu app no meu nokia 520(somente no meu) sem ter licença(pagar p microsoft)?

    • Renan C

      Acredito que sim. Basta você abrir o Windows Phone Developer Registration e colocar os dados da sua conta Microsoft para ele registrar seu telefone. Você consegue compilar e testar o aplicativo direto no seu 520 🙂

  • Lucas Nicoletto

    Eduardo, gostaria que vc pudesse fazer um tutorial de como colocar streaming de video, tipo pra clicar e abrir um determinado video. ou url

    Obrigado