logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Jul 29

Busca por controles na árvore visual de aplicações Silverlight e WPF

Escrito por Kelps Sousa em .NET, 1, 2.0, 4, 6, AR, bar, Behavior, Behaviors, Blend, blog, busca, C#, camp, class, classe, código, Componente, Componentes, control, Controles, Dica, Dicas, DRE, event, Evento, Eventos, exemplo, expression, Expression Blend, for, galeria, Google, IE, if, int, layout, map, mg, Microsoft, mousewheel, MSDN, News, O, on, padrão, painel, problema, problemas, procura, pt, RIA, Ria’s Geral, S+S, Scroll, silverlight, Silverlight 3, Silverlight 4, site, social, TAT, template, Tree, UI, window, WPF, XAML, XP @ 07 29th, 2011 | via http://kelps-sousa.blogspot.com/ | Sem comentários
Kelps Sousa
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Ontem eu vi uma pergunta no fórum de Silverlight do MSDN sobre como achar todos os campos TextBox que existem dentro de uma ChildWindow. Já havia algumas respostas para a pergunta mas elas eram bem pontuais para aquele problema específico e necessitavam de várias suposições sobre a estrutura da aplicação para funcionar sem problemas (por exemplo, saber quais tipos de Panel estão sendo usados). Alguns anos atrás, quando eu comecei a fazer uma das minhas primeiras behaviors para publicar na galeria do Expression Blend, eu descobri uma classe do Silverlight (também existe no WPF) que serve justamente para permitir navergarmos na árvore visual de uma aplicação, tanto procurando controles filhos quanto pais de um determinado controle.

A behavior em questão é a que permitia que se fizesse scroll com a wheel do mouse (a rodinha) em controles que apresentassem scrollbar para aplicações feitas em Silverlight 3. Hoje essa behavior praticamente não é mais necessárias pois o Silverlight 4 já implementa esse comportamento nativamente, mas não era esse o caso na época. Para poder implementar essa função eu precisei criar um código que fosse capaz de ler toda a hierarquia visual do controle (vasculhando todos os componentes do qual o template do controle era composto), procurando por algum ScrollViewer. Se eu o encontrasse, a behavior assinava os eventos necessários do controle para que o scroll funcionasse como esperado.

Para navegar pela árvore visual, a classe que utilizei foi a VisualTreeHelper. Voltando ? dúvida do fórum, eu decidi criar um método genérico que fosse capaz de encontrar todos os controles de um determinado tipo em uma hierárquia utilizando essa classe, assim estaria garantindo que não precisaria ficar colocando “if”s para cada tipo de painel diferente que aparecesse na minha frente. Sem mais delongas, segue abaixo o método que eu fiz.

public static T[] SearchUIElements(UIElement root, int maxlevel = int.MaxValue, int level = 0)     where T : UIElement 

    var result = new List();

    if (root != null)         if (root is T)             result.Add(root as T);

        if (level < maxlevel)             var childrencount = VisualTreeHelper.GetChildrenCount(root);            DependencyObject child;            for (var i = 0; i < childrencount; i++)                 child = VisualTreeHelper.GetChild(root, i);                if (child is UIElement)                     result.AddRange(SearchUIElements(child as UIElement, maxlevel, level + 1));

            }        }    }

    return result.ToArray();}

Como vocês podem ver o método não é grande e é bem simples. Ele aceita 3 parâmetros:

  • root: controle raiz a partir de onde será iniciada a busca. Por exemplo: LayoutRoot.
  • maxlevel: número máximo de níveis que a busca irá “descer” nos descendentes. Este parâmetro é opcional e o seu valor padrão é int.MaxValue, garantindo que será lida a hierarquia inteira a partir do ponto inicial.
  • level: nível atual da busca. Esse parâmetro é utilizado apenas pela própria função para controlar quando a busca atingirá o nível máximo solicitado pelo usuário.

A função é genérica. O parâmetro T serve para indicar qual tipo de controle será procurado, assim como permitir que o retorno sejá tipado corretamente. A é executada de forma recursiva, chamando a si mesma para cada novo ítem na hierarquia.

O resultado da função é sempre um array do tipo de controle solicitado. Esta função sempre retorna uma array, mesmo que seja vazio (não será retornado null).

Abaixo temos um xaml de exemplo e algumas chamada ? função com a descrição do que será encontrado em cada caso.

<Grid x:Name="LayoutRoot">    <TextBox />    <TextBox />    <Grid>        <TextBox />        <TextBox />        <Grid>            <TextBox />        Grid>    Grid>Grid>
//acha TODOS os 5 campos TextBox var textboxes = SearchUIElements<TextBox>(LayoutRoot);

//acha apenas os 2 campos TextBox de LayoutRoottextboxes = SearchUIElements<TextBox>(LayoutRoot, 1);

//acha 4. Os 2 acima e os 2 que estão no primeiro Grid filhotextboxes = SearchUIElements<TextBox>(LayoutRoot, 2);

//acha TODOS os Grids a partir de LayoutRoot, inclusive ele mesmo var grids = SearchUIElements<Grid>(LayoutRoot);         

Agora que eu já mostrei como faz, você acha que consegue fazer uma função semelhante que navegue ao contrário na hierárquia? (procurando nos pais de um controle até chegar na raíz da aplicação…). Fica o desafio. Winking smile



Mai 20

Windows Phone 7–UI Thread e Composition Thread

Escrito por Alexandre Tadashi em 1, 2.0, 2009, 3.5, 4, 6, Animação, Animações, app, AR, Artigo, auto, back, Behavior, BI, bitmap, busca, C#, cache, class, CSharp, Curso, Cursos, demo, desempenho, dispatch, Diversos, Draw, DRE, event, exemplo, Experiência do Usuário, for, function, git, Gráfico, handle, html, ide, IE, if, image, imagens, int, interface, Introdução, library, map, maps, mg, Microsoft, monitor, Monitoramento, movimento, MSDN, O, on, Outros, RIA, Ria’s Geral, S+S, silverlight, Silverlight 3, SmartPhone, Software, Storyboard, Sun, super(), TAT, Tema, try, UI, Vídeo, Visual Studio, Visual Studio 2010, vs, window, windows, XP @ 05 20th, 2011 | via http://alexandretadashi.net/ | Sem comentários
Alexandre Tadashi
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

imageA renderização da interface gráfica do Windows Phone 7 foi projetada para buscar o máximo de performance que o smartphone pode proporcionar, a UI Thread é responsável pelo desenho da interface principal do aplicativo, quando criamos um software para o WP7, devemos evitar bloquear a UI Thread, pois ela está diretamente relacionada a performance do software e também com a experiência do usuário com o aplicativo.

Os smartphones com Windows Phone 7, tem disponível um recurso que utiliza a aceleração da GPU, aumentando consideravelmente o desempenho gráfico para algumas tarefas relacionadas a manipulação de imagens e animações, principalmente as que usam a rotação de eixos, escalas e alguns tipos de? animações que usam de Storyboard. Não é necessário acionar nada para que alguns tipos de Storyboards utilizem esse recurso, eles automaticamente usam o Composition Thread ou também chamado de Render Thread.

O Render Thread pode ser usado para animações simples utilizando DoubleAnimation ou Easing Functions, ou em propriedades? como Opacity, Render Transforms e Rectangular Clip. Habilitando o EnableRedrawRegions podemos ver quais regiões na aplicação estão sendo desenhadas no momento, visualizando? quadro a quadro:

Application.Current.Host.Settings.EnableRedrawRegions = true;

Composition Frame Rate Thread? e UI Frame Rate Thread

Quando executamos um aplicativo através do Visual Studio 2010 com o smartphone plugado no computador,? podemos visualizar alguns números no lado superior direito da tela, esses números servem para você ter como parâmetro alguns pontos sobre a renderização gráfica, memória, etc, os dois primeiros números de 3 dígitos são referente a Render Thread e a UI Thread.

Thread

O Composition Frame Rate Thread está associado a velocidade com que a tela é atualizada em uma thread separada da UI Thread, como referência, o Windows Phone 7 utiliza o valor 30 como ponto de equilíbrio, ou seja, quando for abaixo de 30, os números estarão na cor vermelha, acima de 30 ele ficará com a cor default, o valor mais próximo de uma boa performance é 60, sua aplicação deve buscar sempre se aproximar desse número.

O UI Frame Rate Thread mostra a taxa de atualização da Thread principal, enquanto a interface do usuário estiver ativa, o valor de 30 também foi definido como ponto de equilíbrio, ficando vermelho se a aplicação estiver abaixo deste valor, porém este valor deve ser acima de 20 para ter um tempo de resposta aceitável e quanto maior o valor , o tempo de resposta será mais rápido.

Exemplo prático de UI Thread VS Render Thread

Vou criar um aplicativo simples com dois elementos Ellipse na tela, um com o nome BolaVermelha e outro com BolaAzul, as duas Ellipses serão animadas na tela, a BolaAzul vai utilizar o Render Thread, pois vamos utilizar uma Storyboard com a propriedade RenderTransform, já a BolaVermelha vamos anima-lá atualizando a mesma propriedade, mas utilizando um timer DispatcherTimer para atualizar a propriedade, ou seja, não utilizaremos uma Storyboard para realizar a animação e ela estará utilizando a UI Thread.

   1:    public partial class MainPage : PhoneApplicationPage
   2:      
   3:  
   4:          DispatcherTimer timer;
   5:          RotateTransform rotateVermelho;
   6:          bool bateVolta;
   7:          int contador = 0;
   8:  ? 
   9:          public MainPage()
  10:          
  11:              InitializeComponent();
  12:              Loaded += new RoutedEventHandler(MainPage_Loaded);
  13:  ? 
  14:              Application.Current.Host.Settings.EnableRedrawRegions = true;
  15:  
  16:              this.BolaVermelha.RenderTransform =
  17:                  new RotateTransform();
  18:              this.BolaAzul.RenderTransform =
  19:               new RotateTransform();
  20:  
  21:              rotateVermelho =
  22:              BolaVermelha.RenderTransform as RotateTransform;
  23:              rotateVermelho.Angle = -50;
  24:  ? 
  25:              timer = new DispatcherTimer();
  26:              timer.Tick += new EventHandler(timer_Tick);
  27:              timer.Interval = new TimeSpan(0, 0, 0, 0, 33);
  28:              timer.Start();
  29:  ? 
  30:              bateVolta = false;
  31:  
  32:          
  33:  ? 
  34:          void MainPage_Loaded(object sender, RoutedEventArgs e)
  35:          
  36:  ? 
  37:              Storyboard storyboard = new Storyboard();
  38:              DoubleAnimation animation = new DoubleAnimation();
  39:              animation.From = 0;
  40:              animation.To = 180;
  41:              animation.Duration = new Duration(new TimeSpan(0, 0, 1));
  42:              animation.AutoReverse = true;
  43:              Storyboard.SetTarget(animation, this.BolaAzul.RenderTransform);
  44:              Storyboard.SetTargetProperty(animation, new PropertyPath("Angle"));
  45:              storyboard.Children.Add(animation);
  46:              storyboard.RepeatBehavior = RepeatBehavior.Forever;
  47:              storyboard.Begin();
  48:  
  49:          
  50:  ? 
  51:          void timer_Tick(object sender, EventArgs e)
  52:          
  53:              if (rotateVermelho .Angle == 120)
  54:              
  55:                  bateVolta = true;
  56:              
  57:              if (rotateVermelho.Angle == -50)
  58:              
  59:                  bateVolta = false;
  60:              
  61:  ? 
  62:              if (bateVolta == true)
  63:              
  64:                  rotateVermelho.Angle -= 1;
  65:              
  66:              else
  67:              
  68:                  rotateVermelho.Angle += 1;
  69:              
  70:  ? 
  71:              contador++;
  72:  ? 
  73:              if (contador == 600)
  74:              
  75:                  MessageBox.Show("Parando a UI Thread");
  76:                  Thread.Sleep(1000);
  77:              
  78:  ? 
  79:              if (contador == 1000)
  80:              
  81:                  MessageBox.Show("Inserindo BitmapCache");
  82:                  BitmapCache cache = new BitmapCache();
  83:                  BolaVermelha.CacheMode = cache;
  84:  ? 
  85:              
  86:  ? 
  87:          }
  88:  ? 
  89:      }

?

Na linha 71 criei um contador, quando chegar a 600, ele vai bloquear a UI Thread, na linha 76, a UI Thread é bloqueada propositalmente utilizando Thread.Sleep, neste momento você irá notar que a animação da? BolaVermelha irá parar com base no tempo definido em Sleep, pois a sua Thread está bloqueada, mas a BolaAzul continuará a se movimentar.

Quando o contador chegar a 1000,? vou adicionar um BitmapCache na propriedade CacheMode da BolaVermelha, em alguns casos onde não estamos utilizando a Render Thread, podemos criar um cache, ou seja, colocar os bitmaps na memória, e com isso aproveitar da aceleração da GPU, com performance semelhante a Composition Thread, porém a BolaVermelha continuará na UI Thread,? uma simples mensagem na tela utilizando um MessageBox irá bloquear a UI Thread enquanto a BolaAzul continuará em movimento.

Conclusão

UI Thread e Composition Thread são recursos fundamentais que o Windows Phone 7 utiliza para apresentar a interface gráfica, conhecendo essas Threads você poderá melhorar a perfomance da sua aplicação, os smartphones são equipamentos limitados se comparado a um PC, conhecer quando utilizar determinado recurso pode fazer muita diferença, existem diversos outros pontos a serem considerados quanto ao monitoramento da aplicação com objetivo de melhorar a perfomance, neste artigo somente apresentei uma introdução sobre o assunto.

Alguns recursos podem não funcionar como esperado no emulador, pois depende de diversos fatores como o suporte a DirectX pela placa de video, neste link você encontra mais informações:

WP7/Silverlight Graphics Performance

Mais informações sobre Bitmap Cache : Bitmap Cache

Mais informações sobre performance: Performance Considerations in Applications for Windows Phone

Jan 2

Os números de 2010

Escrito por Flavia Moreira em .NET, 1, 2009, 4, 6, AR, Artigo, Artigos, Asp.Net, back, Blend, blog, blog silverlight, blogsilverlight, busca, C#, CSharp, DataGrid, deep zoom, deepZoom, desempenho, Desktop, Destaque, DevMedia, Dica, estatísticas, exemplo, Expression Blend, facebook, for, Google, ide, IE, if, image, imagens, int, linq, Linq to Sql, mg, Microsoft, Microsoft Blend, MSDN, O, on, pt, Reconhecimento de voz, redeRIA, RIA, Ria’s Geral, saúde, silverlight, Silverlight 3, Silverlight 4, site, social, tag, TAT, template, Twitter, UAU, UI, Video Aula, Visual Studio 2010, VOZ, vs, Wordpress, WPF, Xna @ 01 2nd, 2011 | via http://flamoreira.wordpress.com | Sem comentários
Flavia Moreira
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Os duendes das estatísticas do WordPress.com analisaram o desempenho deste blog em 2010 e apresentam-lhe aqui um resumo de alto nível da saúde do seu blog:

Healthy blog!

O Blog-Health-o-Meter™ indica: Uau.

Números apetitosos

Imagem de destaque

Um Boeing 747-400 transporta 416 passageiros. Este blog foi visitado cerca de 12,000 vezes em 2010. Ou seja, cerca de 29 747s cheios.

?

Em 2010, escreveu 23 novo artigo, aumentando o arquivo total do seu blog para 80 artigos. Fez upload de 2 imagens, ocupando um total de 85kb.

O seu dia mais activo do ano foi 16 de agosto com 110 visitas. O artigo mais popular desse dia foi C#.

De onde vieram?

Os sites que mais tráfego lhe enviaram em 2010 foram social.msdn.microsoft.com, google.com.br, devmedia.com.br, rederia.net e pt-br.wordpress.com

Alguns visitantes vieram dos motores de busca, sobretudo por exemplo de aplicação desktop c# vs 2010, flavia moreira, sites super interessantes, video aula silverlight e reconhecimento de voz c#

Atracções em 2010

Estes são os artigos e páginas mais visitados em 2010.

1

C# novembro, 2008
3 comentários

2

Sobre mim agosto, 2008
54 comentários

3

Sites super interessantes agosto, 2008
3 comentários

4

Populando Datagrid usando LINQ TO SQL em Silverlight agosto, 2008
16 comentários

5

WPF E RECONHECIMENTO DE VOZ março, 2009
4 comentários

Out 20

Silverlight Business e WCF-RIA SERVICE

Escrito por Flavia Moreira em 1, 4, 6, app, AR, Asp.Net, blog, blog silverlight, blogsilverlight, business, C#, Expression Blend, facebook, html, ide, if, int, Introdução, Javascript, mg, Microsoft, O, on, RIA, Ria’s Geral, silverlight, Silverlight 3, Silverlight 4, TAT, Tutoriais, Twitter, Vídeo, Visual Studio, Visual Studio 2010, WCF, Wordpress @ 10 20th, 2010 | via http://flamoreira.wordpress.com | Sem comentários
Flavia Moreira
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Nesta vídeo aula vamos começar a aprender a trabalhar com Business application Silverlight e WCF RIA SERVICE.  

Conteúdo:


Introdução ao WCF RIA SERVICE 

Primeira Aplicação em Silverlight Business application 

Ado. Entity Data Model 

Veja..

Abraços

Flávia Moreira

Set 11

Editando e Recuperando Valores de Controles ASPX com Silverlight

Escrito por Fabriccio Bernardes em Ria’s Geral, silverlight, Silverlight 3, Silverlight 4, Tutoriais @ 09 11th, 2010 | via http://fabricciocb.wordpress.com | Sem comentários
Fabriccio Bernardes
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Olá pessoal,

Hoje vou compartilhar com vocês uma técnica muito útil de comunicação entre a aplicação Silverlight e os controles presentes na página ASPX onde esta aplicação está contida.
A idéia central deste tutorial é, basicamente, recuperar e editar o valor de um textbox contido numa página ASPX via Silverlight utilizando as classes HtmlDocument e HtmlElement.

Vamos lá, arregacem as mangas e mãos à obra.

1. Primeiramente, vamos criar o TextBox que será utilizado no ASPX para a transferência dos dados entre as tecnologias. Para isso, copie e cole a linha de código abaixo para dentro da tag <form> da sua página.

<asp:TextBox ID="TextBox_ASPX" runat="server" Text="..." style="text-align: center" />

Exemplo (AcessandoElementosASPXviaSLTestPage.aspx)


2. Agora vamos criar os componentes necessários para a comunicação do lado da aplicação Silverlight. Copie o código XAML abaixo para dentro do LayoutRoot da sua aplicação:

        <TextBlock FontSize="18" HorizontalAlignment="Center" Margin="50,31,45,0" Name="textBlock1" Text="Aplicação Silverlight" VerticalAlignment="Top" Width="305" TextAlignment="Center" />
        <Button x:Name="btnAlteraValor" Width="100" HorizontalAlignment="Center" Content="Atribuir valor" Click="btnAlteraValor_Click" Margin="12,105,288,0" Height="50" VerticalAlignment="Top" />
        <TextBox x:Name="txtEntradaDados" Width="200" HorizontalAlignment="Center" Text="Olá Mundo" TextAlignment="Center" FontSize="18" Margin="133,112,67,0" Height="37" VerticalAlignment="Top" />
        <Button x:Name="btnRecebeValor" Width="100" HorizontalAlignment="Center" Content="Recuperar valor" Click="btnRecebeValor_Click" Margin="0,0,0,60" Height="50" VerticalAlignment="Bottom" />
        <TextBlock x:Name="txbRecebeValor" Text="..." VerticalAlignment="Bottom" TextAlignment="Left" FontSize="18" Margin="0,0,0,20" HorizontalAlignment="Center" />

Sua aplicação deverá ficar parecida com o exemplo abaixo:

Exemplo (MainPage.xaml – Design)


3. Ok, já preparamos o cenário necessário para a realização da nossa demonstração, vamos agora implementar os eventos dos controles Silverlight com a lógica da comunicação entre as tecnologias.
Copie o código abaixo  e cole no code-behind do seu UserControl (ou Page):

//evento responsável por alterar o valor contido no TextBox_ASPX
private void btnAlteraValor_Click(object sender, RoutedEventArgs e)
{
   HtmlDocument hd = HtmlPage.Document;
   HtmlElement he = hd.GetElementById("TextBox_ASPX"); //recupera o textbox da página ASPX
   he.SetAttribute("value", txtEntradaDados.Text); //atribui o valor de txtEntradaDados ao TextBox_ASPX
   hd.Submit(); //envia as modificações
}

//evento responsável por recuperar o valor contido no TextBox_ASPX
private void btnRecebeValor_Click(object sender, RoutedEventArgs e)
{
   HtmlDocument hd = HtmlPage.Document;
   HtmlElement he = hd.GetElementById("TextBox_ASPX"); //recupera o textbox da página ASPX
   txbRecebeValor.Text = he.GetAttribute("value"); //atribui o valor do TextBox_ASPX no textblock chamado txbRecebeValor
}

Exemplo (MainPage.xaml.cs)


4. Execute a aplicação. Ela terá mais ou menos essa aparência:
Ao clicar em Atribuir valor, o texto contido na textbox da aplicação Silverlight (txtEntradaDados) será enviado para a textbox da página ASPX (TextBox_ASPX), como no exemplo abaixo:

E ao clicar em Recuperar valor, o texto contido na textbox da página ASPX (TextBox_ASPX) será enviado para o textblock da aplicação Silverlight (txbRecebeValor), segue um exemplo:

Caso tenha dúvidas, fique à vontade para publicá-las via comentário.
Espero ter ajudado.

Um forte abraço.
Fabriccio (@fabricciocb)

Posts relacionados:
Acessando funções Javascript com Silverlight
Recuperando valores passados por QueryString em Silverlight

Set 11

Recuperando e Editando Valores de Controles ASP.NET com Silverlight

Escrito por Fabriccio Bernardes em Asp.Net, Ria’s Geral, silverlight, Silverlight 3, Silverlight 4, Tutoriais, Tutorial @ 09 11th, 2010 | via http://fabricciocb.wordpress.com | Sem comentários
Fabriccio Bernardes
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Olá pessoal,

Hoje vou compartilhar com vocês uma técnica muito útil de comunicação entre a aplicação Silverlight e os controles presentes na página ASPX onde esta aplicação está contida.
A idéia central deste tutorial é, basicamente, recuperar e editar o valor de um textbox contido numa página ASPX via Silverlight utilizando as classes HtmlDocument e HtmlElement.

Vamos lá, arregacem as mangas e mãos à obra.

1. Primeiramente, vamos criar o TextBox que será utilizado no ASPX para a transferência dos dados entre as tecnologias. Para isso, copie e cole a linha de código abaixo para dentro da tag <form> da sua página.

<asp:TextBox ID="TextBox_ASPX" runat="server" Text="..." style="text-align: center" />

Exemplo (AcessandoElementosASPXviaSLTestPage.aspx)


2. Agora vamos criar os componentes necessários para a comunicação do lado da aplicação Silverlight. Copie o código XAML abaixo para dentro do LayoutRoot da sua aplicação:

        <TextBlock FontSize="18" HorizontalAlignment="Center" Margin="50,31,45,0" Name="textBlock1" Text="Aplicação Silverlight" VerticalAlignment="Top" Width="305" TextAlignment="Center" />
        <Button x:Name="btnAlteraValor" Width="100" HorizontalAlignment="Center" Content="Atribuir valor" Click="btnAlteraValor_Click" Margin="12,105,288,0" Height="50" VerticalAlignment="Top" />
        <TextBox x:Name="txtEntradaDados" Width="200" HorizontalAlignment="Center" Text="Olá Mundo" TextAlignment="Center" FontSize="18" Margin="133,112,67,0" Height="37" VerticalAlignment="Top" />
        <Button x:Name="btnRecebeValor" Width="100" HorizontalAlignment="Center" Content="Recuperar valor" Click="btnRecebeValor_Click" Margin="0,0,0,60" Height="50" VerticalAlignment="Bottom" />
        <TextBlock x:Name="txbRecebeValor" Text="..." VerticalAlignment="Bottom" TextAlignment="Left" FontSize="18" Margin="0,0,0,20" HorizontalAlignment="Center" />

Sua aplicação deverá ficar parecida com o exemplo abaixo:

Exemplo (MainPage.xaml – Design)


3. Ok, já preparamos o cenário necessário para a realização da nossa demonstração, vamos agora implementar os eventos dos controles Silverlight com a lógica da comunicação entre as tecnologias.
Copie o código abaixo  e cole no code-behind do seu UserControl (ou Page):

//evento responsável por alterar o valor contido no TextBox_ASPX
private void btnAlteraValor_Click(object sender, RoutedEventArgs e)
{
   HtmlDocument hd = HtmlPage.Document;
   HtmlElement he = hd.GetElementById("TextBox_ASPX"); //recupera o textbox da página ASPX
   he.SetAttribute("value", txtEntradaDados.Text); //atribui o valor de txtEntradaDados ao TextBox_ASPX
   hd.Submit(); //envia as modificações
}

//evento responsável por recuperar o valor contido no TextBox_ASPX
private void btnRecebeValor_Click(object sender, RoutedEventArgs e)
{
   HtmlDocument hd = HtmlPage.Document;
   HtmlElement he = hd.GetElementById("TextBox_ASPX"); //recupera o textbox da página ASPX
   txbRecebeValor.Text = he.GetAttribute("value"); //atribui o valor do TextBox_ASPX no textblock chamado txbRecebeValor
}

Exemplo (MainPage.xaml.cs)


4. Execute a aplicação. Ela terá mais ou menos essa aparência:
Ao clicar em Atribuir valor, o texto contido na textbox da aplicação Silverlight (txtEntradaDados) será enviado para a textbox da página ASPX (TextBox_ASPX), como no exemplo abaixo:

E ao clicar em Recuperar valor, o texto contido na textbox da página ASPX (TextBox_ASPX) será enviado para o textblock da aplicação Silverlight (txbRecebeValor), segue um exemplo:

Caso tenha dúvidas, fique à vontade para publicá-las via comentário.
Espero ter ajudado.

Um forte abraço.
Fabriccio (@fabricciocb)

Posts relacionados:
Acessando funções Javascript com Silverlight
Recuperando valores passados por QueryString em Silverlight

Set 10

Acessando funções Javascript com Silverlight

Escrito por Fabriccio Bernardes em Ria’s Geral, Silverlight 3, Silverlight 4, Tutoriais @ 09 10th, 2010 | via http://fabricciocb.wordpress.com | Sem comentários
Fabriccio Bernardes
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Saudações pessoal, segue um tutorial de como acessar uma função javascript através da sua aplicação Silverlight:

Para esse tutorial, eu utilizei o Visual Studio 2010 e o Silverlight 4, porém o processo é exatamente o mesmo para versões anteriores da tecnologia.

Vamos lá.

1. Crie um novo projeto no Visual Studio:

2. Selecione um projeto do tipo Silverlight Application:

3. Marque a opção Host the Silverlight application in a new Web site para que seja criada um novo projeto ASP.NET contendo a aplicação Silverlight automaticamente:

4. Agora, com nosso projeto criado, vamos criar a nossa função Javascript que será executada pelo Silverlight.
Ela ficará na página ASPX onde o Silverlight está contido, no meu caso, no web form chamado AcessandoJavascriptComSilverlightTestPage.aspx. Abra a página para edição:

?5. Com o código da página aberto, vamos inserir o seguinte trecho de código entre as tags <head> e </head> do web form:

<script type="text/javascript">
function Alerta() {
alert("Olá Mundo!");
}
</script>

Obs.: Esta pequena função javascript é responsável por exibir uma mensagem de alerta na tela do usuário.

Exemplo (AcessandoJavascriptComSilverlightTestPage.aspx):

6. Agora, acesse o código XAML da sua MainPage para criarmos o botão que acionará a chamada à função javascript.

7. Insira o seguinte trecho de código dentro do LayoutRoot do seu UserControl:

<Button x:Name="btnAlerta" Content="Alerta" Height="100" Width="100" Click="btnAlerta_Click" />

Exemplo (MainPage.xaml – Design):

Exemplo (MainPage.xaml - XAML):

8. Agora abra o code-behind da MainPage para inserirmos a chamada à função javascript.

10. Insira, na classe, o seguinte trecho de código:

private void btnAlerta_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("Alerta");
}
Exemplo (MainPage.xaml.cs):

11. Agora execute a aplicação (tecla F5) e veja o resultado:

Obs.: Caso queira passar parâmetros para as funções javascript, você poderá utilizar o mesmo método, veja:

1. Função javascript parametrizada:

<script type="text/javascript">
function Alerta(mensagem) {
alert(mensagem);
}
</script>

Exemplo (AcessandoJavascriptComSilverlightTestPage.aspx):

2. Passando valores para funções javascript parametrizadas via code-behind:

private void btnAlerta_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("Alerta", "Olá Mundo via parâmetro.");
}

Exemplo (MainPage.xaml.cs):

3. Executando a aplicação:

Espero que este tutorial tenha sido útil.
Qualquer dúvida, basta deixar um comentário.

Um forte abraço.
Fabriccio.

Ago 26

Videos sobre Silverlight no MSDN

Escrito por Flavia Moreira em 1, 4, 6, AR, blog, blog silverlight, blogsilverlight, C#, CSharp, Expression Blend, facebook, if, mg, Microsoft, Microsoft Silverlight, MSDN, O, on, pt, Ria’s Geral, silverlight, Silverlight 3, Silverlight 4, TAT, Twitter, UI, Vídeo, Vídeos, Wordpress @ 08 26th, 2010 | via http://flamoreira.wordpress.com | Sem comentários
Flavia Moreira
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Olá amigos!

Fui convidada a colocar os vídeos sobre Silverlight  no MSDN :

  • http://msdn.microsoft.com/pt-br/silverlight/ff952166.aspx
  • http://msdn.microsoft.com/pt-br/silverlight/ff951768.aspx
  • http://msdn.microsoft.com/pt-br/silverlight/ff951706.aspx

Abraços,

Flávia Moreira

Ago 26

Community Zone 2010

Escrito por Flavia Moreira em 1, 4, 6, AR, Artigo, Artigos, BI, Blend, blog, blog silverlight, blogsilverlight, C#, class, comunidade, event, Evento, facebook, ide, if, image, mg, Microsoft, O, on, Palestra, Partilha, Pessoal, RIA, Ria’s Geral, silverlight, Silverlight 3, Silverlight 4, TAT, Twitter, Vídeo, Vídeos, Visual Studio, Wordpress @ 08 26th, 2010 | via http://flamoreira.wordpress.com | Sem comentários
Flavia Moreira
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Olá pessoal!

Gostaria de compartilhar  com vocês a minha felicidade!

Recentemente recebi um  convite para participar pela  Community Zone. 

Para quem não conhece o Community Zone é um evento que a Microsoft organiza com todos aqueles que contribuíram com a comunidade técnologica, seja gerando vídeos, artigos, palestrando e compartilhando conhecimento.

É o meu primeiro convite, e nem sei como é direito, porém só tenho uma pequena ideia.

Queria agradecer a todos que visitam meu blog!

 

  Abraços

Flávia Moreira

Ago 20

Criando um editor de Texto – Parte II

Escrito por Flavia Moreira em 1, 4, 6, AR, arte, Asp.Net, Blend, blog, blog silverlight, blogsilverlight, C#, Componente, CSharp, Desenvolvimento, Expression Blend, facebook, fonte, html, ide, if, mg, Microsoft, Microsoft Blend, NaN, O, on, RIA, Ria’s Geral, silverlight, Silverlight 3, Silverlight 4, TAT, Twitter, Vídeo, Visual Studio, Visual Studio 2010, Wordpress @ 08 20th, 2010 | via http://flamoreira.wordpress.com | Sem comentários
Flavia Moreira
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Nesta vídeo aula você irá continuar com o desenvolvimento de um editor de Texto usando o componente RichTextBox do Silverlight.  

Esta vídeo aula requer é continuação da vídeo aula Criando um editor de Texto – Parte I

Conteúdo:
Adicionando Underline para o Editor

Adionando Cor para o  Editor

Adicionado Fonte Size para o  Editor
 

Criando um editor de Texto – Parte II

Abraços

Flávia Moreira

 

« Entradas anteriores |

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2755 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com