para alterar a interface de nossa janela.
Após ter criado a nova linha no Grid vamos adicionar a referência ao Tool-
kit.Controls.Interactions dentro da própria janela na linguagem XAML. Procure pela linha xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml , esta é a sintaxe de uma referência para um schema em XAML. Abaixo dela, adicione a seguinte linha;
xmlns:k="http://schemas.microsoft.com/kinect/2013 com isso já temos a referência para o namespace onde se encontra componente visual do seletor.
Vamos adicioná-lo à linha criada no Grid e iremos posicionar verticalmente
no topo e horizontalmente no centro. Lembre-se que para acessar um componente
em XAML que pertence a um namespace é necessário informar o namespace antes,
utilizando a seguinte sintaxe: namespace:componente, seu XAML deve ter ficado similar ao código a seguir.
<Window x:Class="SensorRGB.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:k="http://schemas.microsoft.com/kinect/2013"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="239*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
42
Casa do Código
Capítulo 4. Fluxo de Cores
<Image Name="imagemCamera" Grid.Row="1" />
<CheckBox Name="chkEscalaCinza" Content="Escala cinza"
HorizontalAlignment="Left" Margin="10,10,0,10" Grid.Row="2"/>
<k:KinectSensorChooserUI Name="seletorSensorUI"
HorizontalAlignment="Center" VerticalAlignment="Top" />
</Grid>
</Window>
Por último temos de ligar a nossa classe seletora ao nosso componente visual,
iremos fazer isso após a última linha do método InicializarSeletor.
private void InicializarSeletor()
{
InicializadorKinect inicializador = new InicializadorKinect();
inicializador.MetodoInicializadorKinect = InicializarKinect;
seletorSensorUI.KinectSensorChooser = inicializador.SeletorKinect;
}
Agora, ao executar novamente a aplicação você irá perceber o comportamento
deste controle (ele exibe apenas um ícone, mas caso você passe o mouse acima do ícone é exibido um painel detalhado). Caso você desconecte o sensor como fizemos antes, ele irá exibir um alerta conforme figura 4.7 (a mensagem do alerta varia de acordo com o erro), e caso reconecte, ele mostra que o sensor está pronto novamente.
Este componente é muito útil para criar uma interface agradável com o usuário e tornar sua aplicação mais responsiva.
43
4.3. Refatoração
Casa do Código
Figura 4.7: Seletor do Kinect
Que tal incrementarmos nossa aplicação utilizando o que aprendemos no ca-
pítulo anterior? Vamos inserir um componente Slider para podermos alterar o
ângulo de elevação do sensor nesta aplicação. Desta vez iremos fazer os passos um pouco mais rápido, pois já fizemos uma implementação parecida.
Primeiro iremos alterar o layout de nossa aplicação, adicionando uma coluna ao
Grid principal. Esta coluna será adicionada no lado direito da janela e deverá ter uma largura de tamanho 25. Nesta coluna iremos adicionar o componente Slider
seguindo as mesmas configurações da aplicação anterior (Valor máximo e mínimo).
Para fins estéticos iremos fazer um Binding na propriedade Height do componente Slider com a propriedade ActualHeight do componente Image do formulário.
44
Casa do Código
Capítulo 4. Fluxo de Cores
Binding
Binding significa fazer ligação. Este recurso geralmente é utilizado
para fazer uma ligação entre um dado do banco de dados e um com-
ponente visual em uma janela, mas em aplicações WPF podemos uti-
lizar esta técnica para vincular informações de qualquer tipo. No caso
citado anteriormente, o valor da propriedade que representa a altura do
componente Slider sempre possuirá o mesmo valor da propriedade
que representa a altura da imagem buscada pelo Kinect, harmonizando
o layout da aplicação.
Também para fins estéticos iremos alterar a propriedade Stretch do compo-
nente imagem para o valor "Fill".
Com isso, a imagem será esticada para ocupar todo espaço do componente. Após fazer estas implementações o arquivo XAML, sua
janela deve estar parecida com o código a seguir.
<Window x:Class="SensorRGB.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:k="http://schemas.microsoft.com/kinect/2013"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="240*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image Name="imagemCamera" Grid.Row="1" Stretch="Fill"/>
<CheckBox Name="chkEscalaCinza" Content="Escala cinza"
HorizontalAlignment="Left" Margin="10,10,0,10" Grid.Row="2"/>
<k:KinectSensorChooserUI Name="seletorSensorUI"
HorizontalAlignment="Center" VerticalAlignment="Top" />
45
4.3. Refatoração