[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.