Desenvolvimento - Silverlight

Identificando valores selecionados em um DataGrid no Silverlight

Em muitos artigos relacionados à utilização do controle DataGrid, pude perceber que a maior dúvida dos desenvolvedores era como utilizar os itens exibidos para os demais componentes de nossa aplicação. Assim, resolvi criar este artigo simples e funcional ensinando como e sem a necessidade de uma nova comunicação com o banco.

por Lucas Defacio



Introdução

Em muitos artigos relacionados à utilização do controle DataGrid, pude perceber que a maior dúvida dos desenvolvedores era como utilizar os itens exibidos para os demais componentes de nossa aplicação. Assim, resolvi criar este artigo simples e funcional ensinando como e sem a necessidade de uma nova comunicação com o banco.

Layout
Para este artigo, construiremos um layout simples. Nossa aplicação será basicamente um DataGrid e dois TextBoxes que irão identificar o valor selecionado. O Quadro 1 ilustra nosso código XAML e a Figura 1 nosso layout.

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  x:Class="SilverlightDataGrid.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="600" Height="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <data:DataGrid x:Name="MyDataGrid" Margin="0,0,0,100" AutoGenerateColumns="False">

            <data:DataGrid.Columns>

                <data:DataGridTemplateColumn Header="ID">

                    <data:DataGridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <TextBlock x:Name="lblProdutoId" Text="{Binding ProdutoId}"></TextBlock>

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellTemplate>

                </data:DataGridTemplateColumn>

                <data:DataGridTemplateColumn Header="Nome">

                    <data:DataGridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <TextBlock x:Name="lblNome" Text="{Binding Nome}"></TextBlock>

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellTemplate>

                </data:DataGridTemplateColumn>

            </data:DataGrid.Columns>

        </data:DataGrid>

        <Canvas>

            <TextBlock Text="ID" FontSize="14" Canvas.Left="50" Canvas.Top="330" />

            <TextBox x:Name="txtProdutoID" Width="100" Height="30" Canvas.Left="50" Canvas.Top="350" />

           

            <TextBlock Text="Nome" FontSize="14" Canvas.Left="200" Canvas.Top="330" />

            <TextBox x:Name="txtNome" Width="350" Height="30" Canvas.Left="200" Canvas.Top="350" />

        </Canvas>

    </Grid>

</UserControl>

Quadro 1: Page.xaml


Figura 1: Layout

Identificando as linhas selecionadas no DataGrid

Nota: Não detalharei todos os passos na criação do WCF e como deverá ser feita a comunicação, mas sugiro a leitura do artigo Comunicação entre Silverlight e SQL Server que pode ser acessado pelo link: http://www.linhadecodigo.com.br/Artigo.aspx?id=2242.

Com o nosso DataGrid populado, deveremos criar o evento SelectionChanged. Este evento será chamado quando a linha selecionada em nosso DataGrid mudar.

Dentro deste evento, criaremos um objeto que deverá ser do mesmo tipo de dados que está populando o nosso DataGrid. No meu caso o tipo de dado é SilverlightDataGrid.ServiceReference.Produto. Este tipo é identificado pelo nome do projeto, o nome da referência e o tipo de objeto que está sendo retornado (no caso é Produto). Nomearemos este objeto como item.

Atribuiremos ao nosso objeto item o valor selecionado em nosso DataGrid. Para este passo devemos converter o valor selecionado para o mesmo tipo dados do nosso item.

E, por último, conseguiremos atribuir o valor da coluna específica aos demais controles. O Quadro 2 ilustra este processo.

public Page()

        {

            InitializeComponent();

            PopulaDataGrid();

            MyDataGrid.SelectionChanged += new SelectionChangedEventHandler(MyDataGrid_SelectionChanged);

        }

        void MyDataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            SilverlightDataGrid.ServiceReference.Produto item =

                new SilverlightDataGrid.ServiceReference.Produto();

            item = (SilverlightDataGrid.ServiceReference.Produto)MyDataGrid.SelectedItem;

           

            txtNome.Text = item.Nome;

            txtProdutoID.Text = item.ProdutoId.ToString();

        }

Quadro 2: Criando o objeto que irá receber os valores selecionados no DataGrid

Figura 2: Resultado obtido

Conclusão

Numa aplicação RIA (Rich Interface Application) o desempenho é um dos maiores desafios para os desenvolvedores. Quando utilizamos os elementos já exibidos na tela evitando uma nova conexão desnecessária com o banco, estamos aumentando o desempenho da nossa aplicação e a velocidade na busca de dados. Neste artigo abordamos um tema que gera muitas dúvidas, porém com uma simples solução sem a necessidade de utilizar novamente o serviço para obter os dados do banco.

Lucas Defacio

Lucas Defacio - Estudante de Sistemas de Informação, atua como designer e desenvolvedor em Rich Interface Applications (RIA) no Flextronics Institute of Technology (FIT) em Sorocaba/SP. É Moderador do fórum de Silverlight no Portal MSDN Brasil e fundador do portal Brasilverlight (http://www.brasilverlight.com.br/), busca aprimorar a experiência dos usuários com sites interativos e promover a tecnologia Silverlight.