Масштабирование/преобразование холста WPF по размеру
-
19-09-2019 - |
Вопрос
Я повторно публикую этот вопрос, так как в прошлый раз не получил особого ответа, надеюсь, небольшое изменение формулировки может помочь...
По сути, я пытаюсь создать холст с привязкой к данным, который будет автоматически масштабировать свое содержимое, чтобы «заполнить» доступное пространство.Что-то вроде масштабирования, подходящего для работы.К сожалению, мои навыки работы с WPF еще не очень сильны, и я изо всех сил пытаюсь понять, как выполнить эту последнюю часть.Я следовал некоторым примерам привязки данных, чтобы привязать холст, но не уверен, что это неправильно и мешает мне.
На данный момент у меня есть две основные проблемы, в зависимости от того, как я пытаюсь найти решение:
- Я не знаю, как автоматически сделать холст через XAML, если это возможно, используя преобразование.
- Полагаю, я не могу ссылаться на холст в коде, стоящий за кодом, потому что его часть элементов Control?
Пример того, чего я пытаюсь достичь: у меня есть А, я хочу попробовать и получить Б:
(удалена устаревшая ссылка на img)
Код, который я сейчас использую, довольно прост: я просто создаю 4 точки с заданными координатами и другую модель представления, в которую они будут заключены.
public class PointCollectionViewModel
{
private List<PointViewModel> viewModels;
public PointCollectionViewModel()
{
this.viewModels = new List<PointViewModel>();
this.viewModels.Add(new PointViewModel(new Point(1, 1)));
this.viewModels.Add(new PointViewModel(new Point(9, 9)));
this.viewModels.Add(new PointViewModel(new Point(1, 9)));
this.viewModels.Add(new PointViewModel(new Point(9, 1)));
}
public List<PointViewModel> Models
{
get { return this.viewModels; }
}
}
public class PointViewModel
{
private Point point;
public PointViewModel(Point point)
{
this.point = point;
}
public Double X { get { return point.X; } }
public Double Y { get { return point.Y; } }
}
Затем PointCollectionViewModel используется в качестве DataContent для моего AutoResizingCanvas, который имеет следующий XAML для реализации привязки:
<UserControl x:Class="WpfCanvasTransform.AutoResizingCanvas"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfCanvasTransform"
x:Name="parent">
<ItemsControl x:Name="itemsControl" ItemsSource="{Binding Path=Models}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas x:Name="canvas" Background="DarkSeaGreen" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Canvas.LayoutTransform>
<ScaleTransform ScaleY="-1" />
</Canvas.LayoutTransform>
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:PointViewModel}">
<Ellipse Width="3" Height="3" Fill="Red"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top" Value="{Binding Path=Y}"/>
<Setter Property="Canvas.Left" Value="{Binding Path=X}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</UserControl>
Решение
Как ваш Canvas
похоже, не имеет фиксированной ширины и высоты, я бы включил его в Viewbox
:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Viewbox Stretch="Uniform">
<Canvas x:Name="canvas" Background="DarkSeaGreen">
<Canvas.LayoutTransform>
<ScaleTransform ScaleY="-1" />
</Canvas.LayoutTransform>
</Canvas>
</Viewbox>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Альтернативно, поместите весь свой UserControl
в ViewBox
.