LayoutLayout

In questo argomento viene descritto il sistema di layout Windows Presentation Foundation (WPF).This topic describes the Windows Presentation Foundation (WPF) layout system. Comprendere come e quando si verificano i calcoli di layout è essenziale per la creazione di interfacce utente in WPF.Understanding how and when layout calculations occur is essential for creating user interfaces in WPF.

Di seguito sono elencate le diverse sezioni di questo argomento:This topic contains the following sections:

Rettangoli di selezione degli elementiElement Bounding Boxes

Quando si pensa al layout in WPF, è importante comprendere il rettangolo di delimitazione che racchiude tutti gli elementi.When thinking about layout in WPF, it is important to understand the bounding box that surrounds all elements. Ogni FrameworkElement oggetto utilizzato dal sistema di layout può essere considerato come un rettangolo con slot nel layout.Each FrameworkElement consumed by the layout system can be thought of as a rectangle that is slotted into the layout. La LayoutInformation classe restituisce i limiti dell'allocazione del layout di un elemento o dello slot.The LayoutInformation class returns the boundaries of an element's layout allocation, or slot. Le dimensioni del rettangolo vengono determinate calcolando lo spazio disponibile sullo schermo, la dimensione di tutti i vincoli, le proprietà specifiche del layout (ad esempio Margin e Padding) e il singolo comportamento dell'elemento Panel padre.The size of the rectangle is determined by calculating the available screen space, the size of any constraints, layout-specific properties (such as margin and padding), and the individual behavior of the parent Panel element. Elaborando questi dati, il sistema di layout è in grado di calcolare la posizione di tutti gli elementi Panelfiglio di un particolare.Processing this data, the layout system is able to calculate the position of all the children of a particular Panel. È importante ricordare che le caratteristiche di ridimensionamento definite nell'elemento padre, ad esempio Border, influiscono sui relativi elementi figlio.It is important to remember that sizing characteristics defined on the parent element, such as a Border, affect its children.

La figura seguente mostra un layout semplice.The following illustration shows a simple layout.

Screenshot che mostra una griglia tipica, senza un riquadro sovrapposto.

È possibile ottenere questo layout usando il codice XAMLXAML seguente.This layout can be achieved by using the following XAMLXAML.

<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>

Un singolo TextBlock elemento è ospitato all'interno Griddi un oggetto.A single TextBlock element is hosted within a Grid. Mentre il testo riempie solo l'angolo superiore sinistro della prima colonna, lo spazio allocato per l'oggetto TextBlock è effettivamente molto più grande.While the text fills only the upper-left corner of the first column, the allocated space for the TextBlock is actually much larger. Il rettangolo di delimitazione di FrameworkElement any può essere recuperato tramite il GetLayoutSlot metodo.The bounding box of any FrameworkElement can be retrieved by using the GetLayoutSlot method. Nell'illustrazione seguente viene mostrato il rettangolo di delimitazione TextBlock per l'elemento.The following illustration shows the bounding box for the TextBlock element.

Screenshot che mostra che il rettangolo di delimitazione di TextBlock è ora visibile.

Come illustrato dal rettangolo giallo, lo spazio allocato per l' TextBlock elemento è in realtà molto più grande di quanto appaia.As shown by the yellow rectangle, the allocated space for the TextBlock element is actually much larger than it appears. Con l'aggiunta di elementi aggiuntivi all' Gridoggetto, l'allocazione può ridursi o espandersi, a seconda del tipo e delle dimensioni degli elementi aggiunti.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.

Lo slot di layout dell' TextBlock oggetto viene convertito in Path un oggetto utilizzando GetLayoutSlot il metodo.The layout slot of the TextBlock is translated into a Path by using the GetLayoutSlot method. Questa tecnica può essere utile per la visualizzazione del rettangolo di selezione di un elemento.This technique can be useful for displaying the bounding box of an element.

private void getLayoutSlot1(object sender, System.Windows.RoutedEventArgs e)
{
    RectangleGeometry myRectangleGeometry = new RectangleGeometry();
    myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1);
    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();
}
Private Sub getLayoutSlot1(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim myRectangleGeometry As New RectangleGeometry
    myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1)
    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

Sistema di layoutThe Layout System

Nella forma più semplice, il layout è un sistema ricorsivo che fa sì che un elemento venga ridimensionato, posizionato e disegnato.At its simplest, layout is a recursive system that leads to an element being sized, positioned, and drawn. In particolare, il layout descrive il processo di misurazione e disposizione dei membri della Panel Children raccolta di un elemento.More specifically, layout describes the process of measuring and arranging the members of a Panel element's Children collection. Il layout è un processo intensivo.Layout is an intensive process. Più grande Children è la raccolta, maggiore è il numero di calcoli che devono essere effettuati.The larger the Children collection, the greater the number of calculations that must be made. La complessità può anche essere introdotta in base al comportamento di layout Panel definito dall'elemento proprietario della raccolta.Complexity can also be introduced based on the layout behavior defined by the Panel element that owns the collection. Un oggetto relativamente Panelsemplice, Canvasad esempio, può avere prestazioni significativamente migliori rispetto a un Panel Gridpiù complesso, ad esempio.A relatively simple Panel, such as Canvas, can have significantly better performance than a more complex Panel, such as Grid.

Ogni volta che un elemento UIElement figlio modifica la posizione, è possibile attivare un nuovo passaggio dal sistema di layout.Each time that a child UIElement changes its position, it has the potential to trigger a new pass by the layout system. Di conseguenza, è importante identificare gli eventi che possono richiamare il sistema di layout, perché una chiamata non necessaria può causare scarse prestazioni dell'applicazione.Therefore, it is important to understand the events that can invoke the layout system, as unnecessary invocation can lead to poor application performance. Di seguito viene descritto il processo avviato quando viene richiamato il sistema di layout.The following describes the process that occurs when the layout system is invoked.

  1. Un figlio UIElement inizia il processo di layout con le relative proprietà principali misurate.A child UIElement begins the layout process by first having its core properties measured.

  2. Le proprietà di FrameworkElement ridimensionamento definite in vengono valutate, Widthad Marginesempio, Heighte.Sizing properties defined on FrameworkElement are evaluated, such as Width, Height, and Margin.

  3. Panelviene applicata la logica specifica, ad esempio Dock direzione o Orientationstack.Panel-specific logic is applied, such as Dock direction or stacking Orientation.

  4. Il contenuto viene disposto dopo la misurazione di tutti gli elementi figlio.Content is arranged after all children have been measured.

  5. La Children raccolta viene disegnata sullo schermo.The Children collection is drawn on the screen.

  6. Il processo viene richiamato di nuovo Children se vengono aggiunti ulteriori alla raccolta, LayoutTransform viene applicato un oggetto o UpdateLayout viene chiamato il metodo.The process is invoked again if additional Children are added to the collection, a LayoutTransform is applied, or the UpdateLayout method is called.

Questo processo e il modo in cui viene richiamato vengono descritti con maggiori dettagli nelle sezioni seguenti.This process and how it is invoked are defined in more detail in the following sections.

Misurazione e disposizione degli elementi figlioMeasuring and Arranging Children

Il sistema di layout completa due passaggi per ogni membro della Children raccolta, un passaggio di misurazione e un passaggio di disposizione.The layout system completes two passes for each member of the Children collection, a measure pass and an arrange pass. Ogni elemento Panel figlio fornisce i MeasureOverride propri ArrangeOverride metodi e per ottenere il proprio comportamento di layout specifico.Each child Panel provides its own MeasureOverride and ArrangeOverride methods to achieve its own specific layout behavior.

Durante il passaggio di misurazione, viene valutato ogni Children membro della raccolta.During the measure pass, each member of the Children collection is evaluated. Il processo inizia con una chiamata al Measure metodo.The process begins with a call to the Measure method. Questo metodo viene chiamato all'interno dell'implementazione dell'elemento Panel padre e non deve essere chiamato in modo esplicito affinché il layout venga eseguito.This method is called within the implementation of the parent Panel element, and does not have to be called explicitly for layout to occur.

In Visibility UIElement primoluogo,vengonovalutateleproprietàdelledimensioninativedi,adesempioe.ClipFirst, native size properties of the UIElement are evaluated, such as Clip and Visibility. Viene generato un valore denominato constraintSize che viene passato a MeasureCore.This generates a value named constraintSize that is passed to MeasureCore.

In secondo luogo, le proprietà del FrameworkElement Framework definite in vengono elaborate, che constraintSizeinfluiscono sul valore di.Secondly, framework properties defined on FrameworkElement are processed, which affects the value of constraintSize. Queste proprietà in genere descrivono le caratteristiche di ridimensionamento dell'oggetto sottostante UIElement, Widthad Marginesempio Height, Style, e.These properties generally describe the sizing characteristics of the underlying UIElement, such as its Height, Width, Margin, and Style. Ognuna di queste proprietà può modificare lo spazio necessario per visualizzare l'elemento.Each of these properties can change the space that is necessary to display the element. MeasureOverrideviene quindi chiamato con constraintSize come parametro.MeasureOverride is then called with constraintSize as a parameter.

Nota

Esiste una differenza tra le Height proprietà di ActualHeight e Width ActualWidthe e.There is a difference between the properties of Height and Width and ActualHeight and ActualWidth. Ad esempio, la ActualHeight proprietà è un valore calcolato in base ad altri input di altezza e al sistema di layout.For example, the ActualHeight property is a calculated value based on other height inputs and the layout system. Il valore viene impostato dal sistema di layout stesso, in base a un passaggio di rendering effettivo, e può quindi essere leggermente indietro rispetto al valore impostato delle proprietà Height, ad esempio, che costituiscono la base della modifica di input.The value is set by the layout system itself, based on an actual rendering pass, and may therefore lag slightly behind the set value of properties, such as Height, that are the basis of the input change.

Poiché ActualHeight è un valore calcolato, è necessario tenere presente che potrebbero essere presenti più modifiche segnalate in modo incrementale o incrementale come risultato di varie operazioni da parte del sistema di layout.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. Il sistema di layout può calcolare lo spazio di misurazione necessario per gli elementi figlio, i vincoli dell'elemento padre e così via.The layout system may be calculating required measure space for child elements, constraints by the parent element, and so on.

L'obiettivo finale del passaggio di misurazione è che l'elemento figlio determini il DesiredSizerelativo oggetto, che si MeasureCore verifica durante la chiamata.The ultimate goal of the measure pass is for the child to determine its DesiredSize, which occurs during the MeasureCore call. Il DesiredSize valore viene archiviato da Measure per l'utilizzo durante il passaggio di disposizione del contenuto.The DesiredSize value is stored by Measure for use during the content arrange pass.

Il passaggio di disposizione inizia con una chiamata al Arrange metodo.The arrange pass begins with a call to the Arrange method. Durante il passaggio di disposizione, l' Panel elemento padre genera un rettangolo che rappresenta i limiti del figlio.During the arrange pass, the parent Panel element generates a rectangle that represents the bounds of the child. Questo valore viene passato al metodo ArrangeCore per l'elaborazione.This value is passed to the ArrangeCore method for processing.

Il ArrangeCore metodo valuta l'oggetto DesiredSize del figlio e valuta eventuali margini aggiuntivi che potrebbero influire sulle dimensioni di rendering dell'elemento.The ArrangeCore method evaluates the DesiredSize of the child and evaluates any additional margins that may affect the rendered size of the element. ArrangeCoregenera un arrangeSizeoggetto, che viene passato ArrangeOverride al metodo di Panel come parametro.ArrangeCore generates an arrangeSize, which is passed to the ArrangeOverride method of the Panel as a parameter. ArrangeOverridegenera l' finalSize oggetto dell'oggetto figlio.ArrangeOverride generates the finalSize of the child. Infine, il ArrangeCore metodo esegue una valutazione finale delle proprietà di offset, ad esempio il margine e l'allineamento, e inserisce l'elemento figlio all'interno dello slot di layout.Finally, the ArrangeCore method does a final evaluation of offset properties, such as margin and alignment, and puts the child within its layout slot. L'elemento figlio non deve necessariamente (e in genere non lo fa) occupare l'intero spazio allocato.The child does not have to (and frequently does not) fill the entire allocated space. Il controllo viene quindi restituito al padre Panel e il processo di layout è completo.Control is then returned to the parent Panel and the layout process is complete.

Elementi Panel e comportamenti di layout personalizzatiPanel Elements and Custom Layout Behaviors

WPF include un gruppo di elementi che derivano Panelda.WPF includes a group of elements that derive from Panel. Questi Panel elementi abilitano molti layout complessi.These Panel elements enable many complex layouts. Ad esempio, è possibile ottenere facilmente gli elementi di stack usando l' StackPanel elemento, mentre i layout più complessi e di flusso libero sono possibili usando un. CanvasFor example, stacking elements can easily be achieved by using the StackPanel element, while more complex and free flowing layouts are possible by using a Canvas.

Nella tabella seguente sono riepilogati gli elementi Panel di layout disponibili.The following table summarizes the available layout Panel elements.

Nome elemento PanelPanel name DescrizioneDescription
Canvas Definisce un'area all'interno della Canvas quale è possibile posizionare in modo esplicito gli elementi figlio in base alle coordinate relative all'area.Defines an area within which you can explicitly position child elements by coordinates relative to the Canvas area.
DockPanel Definisce un'area all'interno della quale è possibile disporre elementi figlio in orizzontale o in verticale, l'uno rispetto all'altro.Defines an area within which you can arrange child elements either horizontally or vertically, relative to each other.
Grid Definisce un'area griglia flessibile costituita da righe e colonne.Defines a flexible grid area that consists of columns and rows.
StackPanel Dispone gli elementi figlio su una sola riga che può essere orientata orizzontalmente o verticalmente.Arranges child elements into a single line that can be oriented horizontally or vertically.
VirtualizingPanel Fornisce un Framework per Panel gli elementi che virtualizzano la raccolta dei dati figlio.Provides a framework for Panel elements that virtualize their child data collection. Questa è una classe abstract.This is an abstract class.
WrapPanel Posiziona gli elementi figlio in sequenza da sinistra a destra, interrompendo il contenuto al raggiungimento del bordo della casella contenitore e facendolo ripartire dalla riga successiva.Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. L'ordinamento successivo viene eseguito in sequenza dall'alto verso il basso o da destra a sinistra, a seconda del Orientation valore della proprietà.Subsequent ordering occurs sequentially from top to bottom or right to left, depending on the value of the Orientation property.

Per le applicazioni che richiedono un layout non possibile utilizzando uno degli elementi Panel predefiniti, è possibile ottenere comportamenti di layout personalizzati ereditando da Panel ed eseguendo l'override dei MeasureOverride metodi e ArrangeOverride .For applications that require a layout that is not possible by using any of the predefined Panel elements, custom layout behaviors can be achieved by inheriting from Panel and overriding the MeasureOverride and ArrangeOverride methods.

Considerazioni sulle prestazioni del layoutLayout Performance Considerations

Il layout è un processo ricorsivo.Layout is a recursive process. Ogni elemento figlio in una Children raccolta viene elaborato durante ogni chiamata del sistema di layout.Each child element in a Children collection gets processed during each invocation of the layout system. Di conseguenza, è consigliabile evitare l'attivazione del sistema di layout quando non è necessaria.As a result, triggering the layout system should be avoided when it is not necessary. Le considerazioni seguenti possono essere utili per ottenere prestazioni migliori.The following considerations can help you achieve better performance.

  • Identificare le modifiche dei valori di proprietà che forzeranno un aggiornamento ricorsivo da parte del sistema di layout.Be aware of which property value changes will force a recursive update by the layout system.

    Le proprietà di dipendenza i cui valori possono provocare l'inizializzazione del sistema di layout sono contrassegnate con flag pubblici.Dependency properties whose values can cause the layout system to be initialized are marked with public flags. AffectsMeasuree AffectsArrange forniscono indicazioni utili per le modifiche dei valori di proprietà che forzano un aggiornamento ricorsivo da parte del sistema di layout.AffectsMeasure and AffectsArrange provide useful clues as to which property value changes will force a recursive update by the layout system. In generale, qualsiasi proprietà che può influire sulle dimensioni del rettangolo di delimitazione di un elemento deve AffectsMeasure avere un flag impostato su true.In general, any property that can affect the size of an element's bounding box should have a AffectsMeasure flag set to true. Per altre informazioni, vedere Panoramica sulle proprietà di dipendenza.For more information, see Dependency Properties Overview.

  • Quando possibile, utilizzare un RenderTransform anziché un. LayoutTransformWhen possible, use a RenderTransform instead of a LayoutTransform.

    Un LayoutTransform oggetto può essere un metodo molto utile per influenzare il contenuto di interfaccia utenteuser interface (UI)un oggetto.A LayoutTransform can be a very useful way to affect the content of a interfaccia utenteuser interface (UI). Tuttavia, se l'effetto della trasformazione non ha alcun impatto sulla posizione di altri elementi, è preferibile usare RenderTransform invece, perché RenderTransform non richiama il sistema di layout.However, if the effect of the transform does not have to impact the position of other elements, it is best to use a RenderTransform instead, because RenderTransform does not invoke the layout system. LayoutTransformapplica la trasformazione e impone un aggiornamento ricorsivo del layout per tenere conto della nuova posizione dell'elemento interessato.LayoutTransform applies its transformation and forces a recursive layout update to account for the new position of the affected element.

  • Evitare chiamate non necessarie UpdateLayouta.Avoid unnecessary calls to UpdateLayout.

    Il UpdateLayout metodo impone un aggiornamento ricorsivo del layout e spesso non è necessario.The UpdateLayout method forces a recursive layout update, and is frequently not necessary. Se non si ha la certezza della necessità di un aggiornamento completo, lasciare che sia il sistema di layout a chiamare automaticamente questo metodo.Unless you are sure that a full update is required, rely on the layout system to call this method for you.

  • Quando si lavora con una Children raccolta di grandi dimensioni, VirtualizingStackPanel è consigliabile usare un StackPanelanziché un normale.When working with a large Children collection, consider using a VirtualizingStackPanel instead of a regular StackPanel.

    Virtualizzando la raccolta figlio, il VirtualizingStackPanel mantiene solo gli oggetti in memoria che sono attualmente all'interno del viewport del padre.By virtualizing the child collection, the VirtualizingStackPanel only keeps objects in memory that are currently within the parent's ViewPort. Come conseguenza, le prestazioni risultano notevolmente migliorate nella maggior parte degli scenari.As a result, performance is substantially improved in most scenarios.

Rendering dei sub-pixel e arrotondamento del layoutSub-pixel Rendering and Layout Rounding

Il sistema grafico WPF USA unità indipendenti dal dispositivo per abilitare la risoluzione e l'indipendenza del dispositivo.The WPF graphics system uses device-independent units to enable resolution and device independence. Ogni Device Independent Pixel scala automaticamente con l'impostazione dpi (punti per pollice) del sistema.Each device independent pixel automatically scales with the system's dots per inch (dpi) setting. In questo modo, le applicazioni WPF vengono ridimensionate correttamente per diverse impostazioni dpi e l'applicazione è in grado di riconoscere automaticamente i dpi.This provides WPF applications proper scaling for different dpi settings and makes the application automatically dpi-aware.

Questa indipendenza dpi può tuttavia creare un rendering perimetrale irregolare a causa dell'anti-aliasing.However, this dpi independence can create irregular edge rendering because of anti-aliasing. Questi elementi, osservabili in genere come bordi sfocati o semitrasparenti, possono essere presenti quando la posizione dei bordi si trova al centro di un pixel del dispositivo invece che tra pixel del dispositivo.These artifacts, typically seen as blurry or semi-transparent edges, can occur when the location of an edge falls in the middle of a device pixel instead of between device pixels. Il sistema di layout permette di ovviare a questo problema con l'arrotondamento del layout.The layout system provides a way to adjust for this with layout rounding. L'arrotondamento del layout avviene quando il sistema di layout arrotonda valori di pixel non integrali durante il passaggio di layout.Layout rounding is where the layout system rounds any non-integral pixel values during the layout pass.

L'arrotondamento del layout è disabilitato per impostazione predefinita.Layout rounding is disabled by default. Per abilitare l'arrotondamento del layout, UseLayoutRounding impostare la true proprietà su FrameworkElementon any.To enable layout rounding, set the UseLayoutRounding property to true on any FrameworkElement. Poiché si tratta di una proprietà di dipendenza, il valore viene propagato a tutti gli elementi figlio nell'albero visuale.Because it is a dependency property, the value will propagate to all the children in the visual tree. Per abilitare l'arrotondamento del layout per l'intera interfaccia UseLayoutRounding utente true , impostare su sul contenitore radice.To enable layout rounding for the entire UI, set UseLayoutRounding to true on the root container. Per un esempio, vedere UseLayoutRounding.For an example, see UseLayoutRounding.

Argomenti successiviWhat's Next

La capacità di identificare il modo in cui gli elementi vengono misurati e disposti è il primo passaggio per la comprensione del layout.Understanding how elements are measured and arranged is the first step in understanding layout. Per ulteriori informazioni sugli elementi disponibili Panel , vedere Cenni preliminari sui pannelli.For more information about the available Panel elements, see Panels Overview. Per meglio determinare le diverse proprietà di posizionamento che possono influire sul layout, vedere Panoramica su allineamento, margini e spaziatura interna.To better understand the various positioning properties that can affect layout, see Alignment, Margins, and Padding Overview. Quando si è pronti per riunire tutti gli elementi in un'applicazione leggera, vedere procedura dettagliata: Prima applicazionedesktop WPF.When you are ready to put it all together in a lightweight application, see Walkthrough: My first WPF desktop application.

Vedere ancheSee also