70-511 Rozdział 3 - Graficzny interfejs użytwkonika - drzewo wizualne

WPF definiuje interfejs użytkownika jako tzw. drzewo wizualne (visual tree). Nazwa wzięta z dwóch powodów:

• elementy tworzące interfejs, umiejscawiane są w postaci przypominającej strukturę danych drzewo
• każdy element wizualny (widzialny) dziedziczy po klasie Visual

Klasa Visual zapewnia takie funkcjonalności jak transformacje, przycinanie czy też test kliknięcia (czy dany obiekt został kliknięty myszką). Dodatkowo zapewnia ona serializację grafiki, dzięki czemu interfejs jest bardziej responsywny. 
Aby ułatwić poruszanie (trawersowanie) po drzewie wizualny, dostępna jest statyczna klasa VisualTreeHelper. Niektóre z jej ważniejszych metod:

• GetCacheMode - pobiera dane z cache dla danego obiektu wizualnego
• GetChild - pobiera potomka danego rodzica, pod wskazanym indeksem
• GetChildrenCount - pobiera ilość potomków danego obiektu
• GetContentBounds - pobiera obszar zajmowany przez obiekt wizualny
• GetDrawing - zwraca graficzną zawartość obiektu
• GetEffect - zwraca efekty zastosowane na obiekcie
• GetOffset - zwraca offset obiektu
• GetOpacity - zwraca przeźroczystość
• GetParent - zwraca rodzica danego obiektu
• GetTransform - pobiera transformacje nałożone na obiekt

Przykład przejścia po wszystkich elementach wizualnych formy:

Code:

        public MainWindow()
        {
            InitializeComponent();
            Loop(grid);
        }

        private void Loop(Visual obj)
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
            {
                var vObj = (Visual)VisualTreeHelper.GetChild(obj, i);
                tb.Text += vObj.GetType().Name + Environment.NewLine;
                Loop(vObj);
            }
        }

Efekt:

Xaml:

Code:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="0,0,0,-49" Name="grid">
        <Rectangle Width="100" Height="100" Fill="Blue">
            <Rectangle.Clip>
                <EllipseGeometry RadiusX="30" RadiusY="30" Center="50, 50" />
            </Rectangle.Clip>
        </Rectangle>
        <TextBox x:Name="tb" HorizontalAlignment="Left" Height="218" Margin="25,66,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="153"/>
        <Label Content="Label" HorizontalAlignment="Left" Margin="383,66,0,0" VerticalAlignment="Top"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="396,167,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
</Window>