Controle ComboBox no XAML

by Jenner Maciejewsky 18. março 2007 15:05

XAML (pronuncia-se "zemel"), sigla de eXtensible Application Markup Language, é a nova linguagem de marcação para criar interfaces, através de acessos a objetos do Windows Presentation Foundation.


Neste exemplo iremos através de código em XAML adicionar um ComboBox na Interface.


Para isso você poderá utilizar o XamlPad que acompanha a instalação do Microsoft Windows SDK ou se preferi utilize o Notepad apenas. Mas em ambos os casos é necessário o .NET Framework 3.0 instalado (Se você utiliza o Vista já estar instalado).


Vamos ao código:


<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 
   <DockPanel> 
      <ComboBox> 
           <ComboBoxItem>Item 01</ComboBoxItem> 
           <ComboBoxItem>Item 02</ComboBoxItem> 
           <ComboBoxItem>Item 03</ComboBoxItem> 
           <ComboBoxItem>Item 04</ComboBoxItem> 
      </ComboBox> 
   </DockPanel> 
</Page> 
 


Obs.: <Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"> essa linha declara o NameSpace, que é obrigatório e o tipo de interface que está sendo criada (Page, Window, Grid, DockPanel, etc.).


Pronto, está pronto nossa primeira interface onde foi inserido 1 ComboBox. Salve com o nome combo.xaml e depois vá até o local onde você gravou o arquivo e click 2x no arquivo para abri-lo. Ele deverá abrir através do Internet Explorer. Quem utilizou o XamlPad poderá visualizar o resultado no próprio XamlPad.


Provavelmente alguns estejam procurando onde ficou o ComboBox, como não definimos posição nem o tamanho de nosso objeto ele ocupa toda a extensão da tela. Vamos modificar então.


Modifique o código para que fique como abaixo, onde iremos definir a posição que o ComboBox deverá ser adicionado e seu tamanho na tela :


<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 
  <DockPanel> 
    <ComboBox Margin="120,50,120,50" Width="250" Height="25"> 
      <ComboBoxItem>Item 01</ComboBoxItem> 
      <ComboBoxItem>Item 02</ComboBoxItem> 
      <ComboBoxItem>Item 03</ComboBoxItem> 
      <ComboBoxItem>Item 04</ComboBoxItem> 
    </ComboBox> 
  </DockPanel> 
</Page> 


Pronto, agora salve e teste novamente. Desta vez você conseguirá visualizar melhor o ComboBox.


Uma dos recursos que vem com o XAML é que cada objeto passa ser Containers e com isso poderão ter outros objetos dentro dele. Vamos modificar mais uma vez o código para que possamos testar esse recurso. Lembrando aqui que servirá apenas para teste, não estamos propondo aqui que se utilize o recurso dessa mesma forma.


Aqui iremos incluir mais 3 Itens no ComboBox, porém esses itens serão outros controles do WPF.


<Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 
   <DockPanel> 
      <ComboBox Margin="120,50,120,50" Width="250" Height="25"> 
         <ComboBoxItem>Item 01</ComboBoxItem> 
         <ComboBoxItem>Item 02</ComboBoxItem> 
         <ComboBoxItem>Item 03</ComboBoxItem> 
         <ComboBoxItem>Item 04</ComboBoxItem> 
         <!-- Provavelmente não faça sentido um Botão dentro de um Combobox, mas a idéia é brincar com os recursos. --> 
         <ComboBoxItem> 
            <Button Background="Red" Width="200">Reset</Button> 
         </ComboBoxItem> 
         <!-- Vamos adicionar neste ponto outro combobox. Porém esse estará dentro de 1 combobox. --> 
         <ComboBoxItem> 
            <ComboBox Margin="120,50,120,50" Width="250" Height="25"> 
               <ComboBoxItem>Item 01</ComboBoxItem> 
               <ComboBoxItem>Item 02</ComboBoxItem> 
               <ComboBoxItem>Item 03</ComboBoxItem> 
               <ComboBoxItem>Item 04</ComboBoxItem> 
            </ComboBox> 
         </ComboBoxItem> 
         <ComboBoxItem> 
         <!-- Tenha certeza que exista a imagem FOTO.JPG em C:\ --> 
            <Image Width="200"> 
               <Image.Source> 
                  <BitmapImage DecodePixelWidth="200" UriSource="C:\Foto.jpg"/> 
               </Image.Source> 
            </Image> 
         </ComboBoxItem> 
      </ComboBox> 
   </DockPanel> 
</Page> 



Agora que vocês já conhecem os controles ComboBox, Image e Button poderá brincar com esses controle e fazer o mesmo, incluir outros controles dentro do mesmo. Aproveite e altere a primeira linha para Grid ou Window, lembrando que a última linha também precisa ser alterada.

Tags:

Blog | DICAS

Os comentários estão fechados

Posts Antigos

Awards