Есть тест. Есть варианты ответов которые нужно соединить линией. При том чтобы линия меняла свой размер при изменении расстояния между ответами. Как такое сделать в WPF
?
-
1Хорошо бы, еще приложить к вопросу, несколько слов о том, что Вы уже пытались сделать и что не получилось – Александр Муксимов 6 янв '18 в 19:42
1 ответ
Ну, это не так сложно технически, но нужно ничего не забыть.
Центральная идея — мы можем выяснить, как расположен один UIElement
относительно другого при помощи метода TranslatePoint
. А обновления позиции элементов можно получить, подписавшись на LayoutUpdated
.
Оформим «слежку» за размером вот в такой вспомогательный класс (я украл его отсюда и подправил):
public class LayoutChangeEventArgs : EventArgs
{
public readonly Rect Rect;
public LayoutChangeEventArgs(Rect rect) => Rect = rect;
}
public class LayoutWatcher
{
public void ChangeTarget(UIElement target, UIElement origin = null)
{
if (this.target != null)
this.target.LayoutUpdated -= OnLayoutUpdate;
this.target = target;
this.origin = origin;
OnLayoutUpdate(null, null);
if (this.target != null)
target.LayoutUpdated += OnLayoutUpdate;
}
void OnLayoutUpdate(object sender, EventArgs e)
{
var newRenderRect = GetRenderRect();
if (newRenderRect != currRenderRect)
{
currRenderRect = newRenderRect;
FireChanged();
}
}
UIElement target, origin;
Rect currRenderRect = Rect.Empty;
public static Rect ComputeRenderRect(UIElement target, UIElement origin) =>
new Rect(target.TranslatePoint(new Point(), origin), target.RenderSize);
Rect GetRenderRect() => ComputeRenderRect(target, origin);
void FireChanged() =>
Changed?.Invoke(target, new LayoutChangeEventArgs(currRenderRect));
public event EventHandler<LayoutChangeEventArgs> Changed;
}
Отлично, большой кусок работы готов.
Теперь напишем контрол, который получит в качестве аргументов левый и правый контролы, между которыми нужно провести линию. Он будет наблюдать за изменениями позиции контролов-аргументов, и при её изменении перерисовывать линию.
Поехали! XAML будет очень простым:
<UserControl x:Class="Test.Connector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="ConnectorRoot">
<Line StrokeThickness="1.5" DataContext="{Binding ElementName=ConnectorRoot}"
Fill="{Binding Foreground}" Stroke="{Binding Foreground}" x:Name="ConnectingLine"/>
</UserControl>
Мы привязали цвет линии к свойству Foreground
контрола. Вся логика попадает в code behind.
Мы кладём два стандартных DependencyProperty
, в которых будут элементы, к которым мы привязываемся.
Мы следим за позицией трёх элементов: двух элементов для привязки, и самого себя (ведь нас тоже наш контейнер может переместить!). При изменении элементов для привязки мы меняем и объект слежки.
public partial class Connector : UserControl
{
public Connector()
{
InitializeComponent();
selfWatcher.ChangeTarget(this);
selfWatcher.Changed += RecalcLine;
fromWatcher.Changed += RecalcLine;
toWatcher.Changed += RecalcLine;
RecalcLine(null, null);
}
LayoutWatcher selfWatcher = new LayoutWatcher(),
fromWatcher = new LayoutWatcher(),
toWatcher = new LayoutWatcher();
#region dp FrameworkElement From
public FrameworkElement From
{
get { return (FrameworkElement)GetValue(FromProperty); }
set { SetValue(FromProperty, value); }
}
public static readonly DependencyProperty FromProperty =
DependencyProperty.Register("From", typeof(FrameworkElement), typeof(Connector),
new FrameworkPropertyMetadata((o, args) =>
{ var self = (Connector)o; self.fromWatcher.ChangeTarget(self.From); }));
#endregion
#region dp FrameworkElement To
public FrameworkElement To
{
get { return (FrameworkElement)GetValue(ToProperty); }
set { SetValue(ToProperty, value); }
}
public static readonly DependencyProperty ToProperty =
DependencyProperty.Register("To", typeof(FrameworkElement), typeof(Connector),
new FrameworkPropertyMetadata((o, args) =>
{ var self = (Connector)o; self.toWatcher.ChangeTarget(self.To); }));
#endregion
void RecalcLine(object sender, LayoutChangeEventArgs e)
{
if (From == null || To == null)
{
ConnectingLine.Visibility = Visibility.Collapsed;
return;
}
ConnectingLine.Visibility = Visibility.Visible;
var fromRect = LayoutWatcher.ComputeRenderRect(From, this);
var toRect = LayoutWatcher.ComputeRenderRect(To, this);
ConnectingLine.X1 = fromRect.Right + 5;
ConnectingLine.Y1 = fromRect.Top + fromRect.Height / 2;
ConnectingLine.X2 = toRect.Left - 5;
ConnectingLine.Y2 = toRect.Top + toRect.Height / 2;
}
}
При изменении любой из позиций вызывается RecalcLine
, который перемещает нашу линию в нужное место.
Теперь пользуемся:
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Test"
Title="Тест" Height="350" Width="525">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="Win10" Text="Windows 10" Background="LightCoral"
Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock x:Name="Win8" Text="Windows 8" Background="DarkCyan"
Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock x:Name="Win7" Text="Windows 7" Background="Green"
Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock x:Name="WinVista" Text="Windows Vista" Background="Yellow"
Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock x:Name="Y2009" Text="2009" Background="Green"
Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" />
<TextBlock x:Name="Y2006" Text="2006" Background="Yellow"
Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center"/>
<TextBlock x:Name="Y2012" Text="2012" Background="DarkCyan"
Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center"/>
<TextBlock x:Name="Y2015" Text="2015" Background="LightCoral"
Grid.Row="3" Grid.Column="1" HorizontalAlignment="Center"/>
</Grid>
<local:Connector Foreground="Coral"
From="{x:Reference Win10}" To="{x:Reference Y2015}"/>
<local:Connector Foreground="DarkCyan"
From="{x:Reference Win8}" To="{x:Reference Y2012}"/>
<local:Connector Foreground="Green"
From="{x:Reference Win7}" To="{x:Reference Y2009}"/>
<local:Connector Foreground="Yellow"
From="{x:Reference WinVista}" To="{x:Reference Y2006}"/>
</Grid>
</Window>
Получаем: