XAML 获取画布面板中心坐标WPF MVVM

vnzz0bqm  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(123)

我想用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; }
    }


的数据

hs1rzwqc

hs1rzwqc1#

如何从XAML获得ActualWidth和ActualHeight属性?
您需要实现一些代码来跟踪视图中这些属性的更改,并设置视图模型属性。
你可以看看this SizeObserver implementation on GitHub的例子,这可以实现。
它实现可在XAML标记中绑定的附加属性:

<Canvas SizeObserver.Observe="True"
        SizeObserver.ObservedWidth="{Binding YourViewModelWidthProperty, Mode=OneWayToSource}"
        SizeObserver.ObservedHeight="{Binding YourViewModelHeightProperty, Mode=OneWayToSource}">
        ... />

字符串

相关问题