Sistema de layout
This topic describes the Windows Presentation Foundation (WPF) layout system. A compreensão de como e quando ocorrem de cálculos de layout é essencial para a criação de interfaces de usuário em WPF.
This topic contains the following sections:
Element Bounding Boxes
The Layout System
Measuring and Arranging Children
Panel Elements and Custom Layout Behaviors
Layout Performance Considerations
O processamento de sub-pixel e arredondamento de Layout
What's Next
Element Bounding Boxes
Ao pensar sobre o layout em WPF, é importante compreender a caixa delimitadora que envolve todos os elementos. Cada FrameworkElement consumidos pelo layout sistema pode ser considerado como um retângulo que está com fenda em layout. O LayoutInformation classe retorna os limites de alocação de layout de um elemento, ou no slot. O tamanho do retângulo é determinado, calculando o espaço disponível na tela, o tamanho de quaisquer restrições, propriedades de layout específicas (como, por exemplo, margem e preenchimento) e o comportamento individual do pai Panel elemento. Processamento de dados, o sistema de layout é capaz de calcular a posição de todos os filhos de uma determinada Panel. É importante lembrar que dimensionamento características definido no elemento pai, como um Border, que afetam seus filhos.
A ilustração a seguir mostra um layout simples.
.png "Uma grade típica, sem caixa delimitadora sobreposta.")
Este layout pode ser obtido usando o seguinte XAML.
<Grid Name="myGrid" Background="LightSteelBlue" Height="150">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Name="txt1" Margin="5" FontSize="16" FontFamily="Verdana" Grid.Column="0" Grid.Row="0">Hello World!</TextBlock>
<Button Click="getLayoutSlot1" Width="125" Height="25" Grid.Column="0" Grid.Row="1">Show Bounding Box</Button>
<TextBlock Name="txt2" Grid.Column="1" Grid.Row="2"/>
</Grid>
Um único TextBlock elemento é hospedado em um Grid. Enquanto o texto preenche apenas o canto superior esquerdo da primeira coluna, o espaço alocado para o TextBlock é realmente muito maior. A caixa delimitadora de qualquer FrameworkElement podem ser recuperadas usando a GetLayoutSlot método. A ilustração a seguir mostra a caixa delimitadora para o TextBlock elemento.
.png "A caixa delimitadora do TextBlock agora está visível.")
Conforme mostrado pelo retângulo amarelo, o espaço alocado para o TextBlock elemento é realmente muito maior do que parece. As additional elements are added to the Grid, this allocation could shrink or expand, depending on the type and size of elements that are added.
O slot de layout da TextBlock é traduzido em um Path usando o GetLayoutSlot método. Essa técnica pode ser útil para exibir a caixa delimitadora de um elemento.
Private Sub getLayoutSlot1(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim myRectangleGeometry As New RectangleGeometry
myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1)
Dim myGeometryDrawing As New GeometryDrawing
Dim myPath As New Path
myPath.Data = myRectangleGeometry
myPath.Stroke = Brushes.LightGoldenrodYellow
myPath.StrokeThickness = 5
Grid.SetColumn(myPath, 0)
Grid.SetRow(myPath, 0)
myGrid.Children.Add(myPath)
txt2.Text = "LayoutSlot is equal to " + LayoutInformation.GetLayoutSlot(txt1).ToString()
End Sub
private void getLayoutSlot1(object sender, System.Windows.RoutedEventArgs e)
{
RectangleGeometry myRectangleGeometry = new RectangleGeometry();
myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1);
GeometryDrawing myGeometryDrawing = new GeometryDrawing();
Path myPath = new Path();
myPath.Data = myRectangleGeometry;
myPath.Stroke = Brushes.LightGoldenrodYellow;
myPath.StrokeThickness = 5;
Grid.SetColumn(myPath, 0);
Grid.SetRow(myPath, 0);
myGrid.Children.Add(myPath);
txt2.Text = "LayoutSlot is equal to " + LayoutInformation.GetLayoutSlot(txt1).ToString();
}
The Layout System
Em sua forma mais simples, layout é um sistema de recursiva que leva para um elemento que está sendo dimensionada, posicionado e desenhada. Mais especificamente, o layout descreve o processo de medição e organizando os membros de um Panel do elemento Children coleção. O layout é um processo intensivo. Quanto maior a Children coleção, quanto maior o número de cálculos que devem ser feitas. Complexidade também pode ser introduzida com base no comportamento de layout definido pela Panel elemento que é proprietária da coleção. Relativamente simples Panel, como Canvas, pode ter um desempenho significativamente melhor do que um complexo mais Panel, como Grid.
Cada vez que uma criança UIElement altera sua posição, ele tem o potencial para acionar uma nova passagem pelo sistema de layout. Portanto, é importante compreender os eventos que podem chamar o sistema de layout, como a invocação desnecessário podem resultar em desempenho do aplicativo. A seguir descreve o processo que ocorre quando o sistema de layout é invocado.
Um filho UIElement inicia o processo de layout por primeiro ter suas propriedades de núcleo medidas.
Dimensionamento de propriedades definidas na FrameworkElement são avaliadas, como Width, Height, e Margin.
Panel-lógica específica for aplicada, como Dock direção ou empilhamento Orientation.
Content is arranged after all children have been measured.
O Children coleção é desenhada na tela.
The process is invoked again if additional Children are added to the collection, a LayoutTransform is applied, or the UpdateLayout method is called.
Esse processo e como ela é chamada são definidas mais detalhadamente nas seções a seguir.
Measuring and Arranging Children
The layout system completes two passes for each member of the Children collection, a measure pass and an arrange pass. Cada filho Panel fornece seu próprio MeasureOverride e ArrangeOverride métodos para alcançar o seu próprio comportamento de layout específico.
Durante o passo de medida, cada membro do Children coleção é avaliada. The process begins with a call to the Measure method. Este método é chamado dentro da implementação do pai Panel elemento e não precisa ser chamado explicitamente para layout ocorra.
First, native size properties of the UIElement are evaluated, such as Clip and Visibility. Isso gera um valor chamado constraintSize que é passado para MeasureCore.
Em segundo lugar, as propriedades do framework definidos no FrameworkElement são processadas, o que afeta o valor de constraintSize. Essas propriedades geralmente descrevem as características de dimensionamento de base UIElement, como sua Height, Width, Margin, e Style. Cada uma dessas propriedades pode alterar o espaço necessário para exibir o elemento. MeasureOverrideé então chamado com constraintSize como um parâmetro.
Observação
There is a difference between the properties of Height and Width and ActualHeight and ActualWidth.For example, the ActualHeight property is a calculated value based on other height inputs and the layout system.O valor é definido pelo sistema de layout do próprio, com base em uma passagem de processamento real e pode, portanto, ficam um pouco para trás o valor do conjunto de propriedades, como Height, que são a base da alteração de entrada.
Because ActualHeight is a calculated value, you should be aware that there could be multiple or incremental reported changes to it as a result of various operations by the layout system.The layout system may be calculating required measure space for child elements, constraints by the parent element, and so on.
O objetivo final do passo de medida é para o filho determinar sua DesiredSize, que ocorre durante a MeasureCore chamada. O DesiredSize valor é armazenado por Measure para uso durante o conteúdo organizar pass.
A passagem de organizar começa com uma chamada para o Arrange método. During the arrange pass, the parent Panel element generates a rectangle that represents the bounds of the child. This value is passed to the ArrangeCore method for processing.
O ArrangeCore método avalia o DesiredSize do filho e avalia as margens adicionais que podem afetar o tamanho processado do elemento. ArrangeCoregera um arrangeSize, que é passado para o ArrangeOverride método de Panel como um parâmetro. ArrangeOverridegera a finalSize do filho. Finalmente, o ArrangeCore método oferece uma avaliação final das propriedades de deslocamento, tais como a margem e o alinhamento e coloca o filho dentro de seu slot de layout. O filho não precisa (e não com freqüência) preencher todo o espaço alocado. Controle, em seguida, é retornado ao pai do Panel e o processo de layout é concluído.
Panel Elements and Custom Layout Behaviors
WPFinclui um grupo de elementos que derivam de Panel. Essas Panel elementos permitem vários layouts complexos. Por exemplo, Empilhando elementos pode facilmente ser alcançado usando o StackPanel elemento, enquanto os mais complexos e livres fluxo layouts são possíveis usando um Canvas.
A tabela a seguir resume o layout disponível Panel elementos.
Panel name |
Description |
|---|---|
Defines an area within which you can explicitly position child elements by coordinates relative to the Canvas area. |
|
Defines an area within which you can arrange child elements either horizontally or vertically, relative to each other. |
|
Defines a flexible grid area that consists of columns and rows. |
|
Arranges child elements into a single line that can be oriented horizontally or vertically. |
|
Fornece uma estrutura para Panel elementos que virtualizem sua coleção de dados filho. Esta é uma classe abstrata. |
|
Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Pedidos subseqüentes seqüencialmente ocorre de cima inferior ou direita para a esquerda, dependendo do valor da Orientation propriedade. |
Para aplicativos que exigem um layout que não é possível usando qualquer um dos predefinido Panel elementos de layout personalizado comportamentos podem ser obtidos por herança de Panel e substituindo o MeasureOverride e ArrangeOverride métodos. Por exemplo, consulte O exemplo de painel Radial personalizado.
Layout Performance Considerations
Layout is a recursive process. Cada elemento filho de um Children coleção é processada durante cada chamada do sistema de layout. Como resultado, o sistema de layout de disparo deve ser evitada quando não for necessário. As considerações a seguir podem ajudá-lo a obter um melhor desempenho.
Esteja ciente de quais alterações de valor da propriedade forçará uma atualização recursiva pelo sistema de layout.
Propriedades de dependência cujos valores podem fazer com que o sistema de layout a ser inicializado são marcadas com sinalizadores públicas. AffectsMeasuree AffectsArrange fornecer dicas úteis, como para alterações de valor da propriedade forçará uma atualização recursiva pelo sistema de layout. Em geral, qualquer propriedade que pode afetar o tamanho da caixa delimitadora de um elemento deve ter um AffectsMeasure sinalizador é definido como true. For more information, see Visão geral sobre propriedades de dependência.
Quando possível, use um RenderTransform em vez de um LayoutTransform.
A LayoutTransform can be a very useful way to affect the content of a user interface (UI). No entanto, se não tiver o efeito de transformação de afetar a posição dos outros elementos, é melhor usar um RenderTransform em vez disso, pois RenderTransform não invoca o sistema de layout. LayoutTransformaplica a transformação e força uma atualização do layout recursiva para levar em conta a nova posição do elemento afetado.
Avoid unnecessary calls to UpdateLayout.
O UpdateLayout método força uma atualização do layout recursiva e freqüentemente não necessário. Se tiver certeza de que uma atualização completa é necessária, contam com o sistema de layout para chamar esse método para você.
Ao trabalhar com uma grande Children coleção, considere o uso de um VirtualizingStackPanel em vez de uma expressão StackPanel.
Virtualizando a coleção de filho, o VirtualizingStackPanel mantém apenas os objetos na memória que estão dentro do pai visor. As a result, performance is substantially improved in most scenarios.
O processamento de sub-pixel e arredondamento de Layout
The WPF graphics system uses device-independent units to enable resolution and device independence. Cada pixel de dispositivo independente dimensiona automaticamente com o sistema dots per inch (dpi) configuração. This provides WPF applications proper scaling for different dpi settings and makes the application automatically dpi-aware.
No entanto, isso dpi independência pode criar a renderização de borda irregular devido anti-serrilhado. Esses artefatos, normalmente vistos como bordas manchadas ou semitransparentes, podem ocorrer quando o local de uma borda fica no meio de um pixel de dispositivo em vez de entre pixels do dispositivo. O sistema de layout oferece uma maneira para ajustar-se de que isso com o arredondamento de layout. Arredondamento de layout é onde o sistema de layout Arredonda quaisquer valores de pixel de não integral durante a passagem de layout.
Arredondamento de layout é desativado por padrão. Para ativar o arredondamento de layout, defina a UseLayoutRounding propriedade para true em qualquer FrameworkElement. Porque é uma propriedade de dependência, o valor irá propagar para todos os filhos da árvore visual. Para ativar o layout de arredondamento para toda a interface de usuário, defina UseLayoutRounding para true no recipiente raiz. For an example, see UseLayoutRounding.
What's Next
A compreensão de como os elementos são medidos e organizados é a primeira etapa no layout de compreensão. Para obter mais informações sobre as disponíveis Panel elementos, consulte Panels Overview. To better understand the various positioning properties that can affect layout, see Visão Geral sobre Alinhamento, Margens e Margens Internas. Para obter um exemplo de um personalizado Panel elemento, consulte Exemplo de painel Radial personalizado. Quando estiver pronto para colocar tudo junto em um aplicativo esmaecido, consulte Demonstra Passo a passo: Guia de Introdução do WPF.