Привязка в WPF. Относительная привязка

Относительная привязка (relative binding) позволяет задавать источник привязки относительно положения целевого объекта в визуальном дереве элементов. Относительные привязки задаются с использованием расширения разметки RelativeSource. Мы уже использовали относительную привязку в WPF, когда разбирались со свойствами зависимостей. В этой части мы рассмотрим относительную привязку в WPF более детально.

Свойства RelativeSource

Чтобы воспользоваться относительной привязкой в WPF, мы должны использовать свойство RelativeSource объекта Binding, в которое передать объект типа RelativeSource. Класс RelativeSource предоставляет нам следующие свойства:

Рассмотрим как можно использовать относительную привязку в своих приложениях WPF.

Привязка к самому себе (Mode=Self)

Это наиболее простой режим относительной привязки. Например, напишем следующий код XAML:

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <Rectangle Margin="10" 
                   Width="{Binding ElementName=WidthSlider, Path=Value}" 
                   Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}" Stroke="Red"/>
        <Slider x:Name="WidthSlider" Margin="10" Maximum="450" Minimum="50"/>
    </StackPanel>
</Window>

Здесь свойство Width элемента Rectangle использует обычную привязку и привязано к значению Value слайдера WidthSlider.

В свою очередь свойство Height привязывается к самом себе, а именно — к свойству Width. Таким образом, и ширина и высота Rectangle будут меняться одинаково при изменении значения Value и слайдера:

Относительная привязка к предку (Mode=FindAncestor)

Режим FindAncestor используется для привязки к родительским элементам в визуальном дереве. При этом родительский элемент не обязательно должен быть контейнером компоновки.

Например, рассмотрим следующий код:

<StackPanel>
    <Border Background="Blue" 
            Width="{Binding ElementName=WidthSlider, Path=Value}"
            Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">
        <Rectangle Margin="10" 
                   Width="{Binding RelativeSource={RelativeSource AncestorType=Border}, Path=Width}" 
                   Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}" 
                   Stroke="Red"
                   Fill="Green">
        </Rectangle>
    </Border>
    
    <Slider x:Name="WidthSlider" Margin="10" Maximum="450" Minimum="50"/>
</StackPanel>

Здесь прямоугольник Rectangle размещается внутри элемента Border, то есть Border — это родительский элемент для Rectangle. В свою очередь, Rectangle, используя относительную привязку, привязывается к свойству Width родительского элемента, а свойство Height привязывается к своему же свойство Width. Таким образом, регулируя ширину Border мы одновременно изменяем сразу несколько свойств элементов — высоту Border, ширину Rectangle и, через это изменение — высоту Rectangle. В запущенном приложении это будет выглядеть следующим образом:

В этом примере мы использовали относительную привязку к предку:

Width="{Binding RelativeSource={RelativeSource AncestorType=Border}, Path=Width}"

указав тип предка.

Итого

Относительная привязка в WPF позволяет привязываться к объектам и их свойствам относительно положения целевого объекта в визуальном дереве. Используя относительную привязку мы можем привязываться либо к самом себе, либо к родительским элементам.