我想用mvvm模式在画布中间画一个形状。
在后面的代码中,我通过使用ActualWidth和ActualHeight属性到达中间点。
但是我在MVVM中遇到了麻烦。我如何从XAML中获得ActualWidth和ActualHeight属性?
以下是XAML代码:
<Window x:Class="CanvasSampleMvvm.View.MainView"
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:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:local="clr-namespace:CanvasSampleMvvm.View"
xmlns:model="clr-namespace:CanvasSampleMvvm.Model"
xmlns:vm="clr-namespace:CanvasSampleMvvm.ViewModel"
mc:Ignorable="d"
Title="MainView" Height="450" Width="800">
<Window.Resources>
<vm:MainViewVM x:Key="vm"/>
</Window.Resources>
<Grid DataContext="{StaticResource vm}">
<ItemsControl ItemsSource="{Binding Path=Shapes}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type model:mShape}">
<Path Data="{Binding Geometry}" Stroke="{Binding Stroke}" Fill="{Binding Fill}" RenderTransform="{Binding Transform}" />
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas ClipToBounds="True" Background="Transparent" DataContext="{StaticResource vm}">
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding Path=XPos}" />
<Setter Property="Canvas.Top" Value="{Binding Path=YPos}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
</Window>
字符串
以下是MainView型号代码:
public class MainViewVM : INotifyPropertyChanged
{
public ObservableCollection<mShape> Shapes { get; } = new ObservableCollection<mShape>();
public MainViewVM()
{
// XPos abd YPos values has to be center coordinates of canvas panel
Shapes.Add(new mShape
{
XPos = 100,
YPos = 100,
Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0x66, 0x66, 0x66)),
Geometry = new EllipseGeometry { RadiusX = 50, RadiusY = 50 },
Fill = (SolidColorBrush)new BrushConvert,r().ConvertFrom("#D3D3D3")
});
}
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
型
这是模型类:
public class mShape
{
public double XPos { get; set; }
public double YPos { get; set; }
public Geometry Geometry { get; set; }
public Brush Stroke { get; set; }
public Brush Fill { get; set; }
}
型
的数据
1条答案
按热度按时间hs1rzwqc1#
如何从XAML获得ActualWidth和ActualHeight属性?
您需要实现一些代码来跟踪视图中这些属性的更改,并设置视图模型属性。
你可以看看this SizeObserver implementation on GitHub的例子,这可以实现。
它实现可在XAML标记中绑定的附加属性:
字符串