如何在一个canvas里面绘制动态个数的圆

申 李 0 信誉分
2024-03-20T05:51:45.16+00:00

比如Viewmodel是这样的,需要再页面上把Points里面的每一个点画出一个圆圈,如果后台代码项Points里面添加点,页面也需要画一个新的圆。可以用绑定的方式解决这个问题吗?还是只能使用后台代码实现

class GeometryEditorViewModel
{
    public ObservableCollection<Point> Points { get; set; } = new();
}
Windows Presentation Foundation
Windows Presentation Foundation
.NET Framework 的一部分,它提供统一的编程模型,用于在 Windows 上构建业务线桌面应用程序。
128 个问题
0 个注释 无注释
{count} 票

1 个答案

排序依据: 非常有帮助
  1. Hui Liu-MSFT 48,571 信誉分 Microsoft 供应商
    2024-03-20T13:03:08.41+00:00

    你好,你可以参考下面的代码。

    
    <StackPanel>
    
        <Canvas Height="380" Background="AliceBlue">
    
            <ItemsControl ItemsSource="{Binding Points}">
    
                <ItemsControl.ItemsPanel>
    
                    <ItemsPanelTemplate>
    
                        <Canvas/>
    
                    </ItemsPanelTemplate>
    
                </ItemsControl.ItemsPanel>
    
                <ItemsControl.ItemTemplate>
    
                    <DataTemplate>
    
                        <Ellipse Width="10" Height="10" Fill="Red">
    
                            <Ellipse.RenderTransform>
    
                                <TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
    
                            </Ellipse.RenderTransform>
    
                        </Ellipse>
    
                    </DataTemplate>
    
                </ItemsControl.ItemTemplate>
    
            </ItemsControl>
    
        </Canvas>
    
        <StackPanel Orientation="Horizontal">
    
            <Label Content="x:"/>
    
            <TextBox Text="{Binding NewPointX, Mode=TwoWay}" Width="50" Margin="5"/>
    
            <Label Content="y:"/>
    
            <TextBox Text="{Binding NewPointY, Mode=TwoWay}" Width="50" Margin="5"/>
    
    
            <Button Content="Add Circle" Command="{Binding AddPointCommand}" CommandParameter="{Binding NewPoint}" />
    
        </StackPanel>
    
    </StackPanel>
    
    

    MainWindow.xaml.cs:

     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             DataContext = new GeometryEditorViewModel();
         }
     }
     public class GeometryEditorViewModel : INotifyPropertyChanged
     {
         private ObservableCollection<Point> _points = new ObservableCollection<Point>();
         public ObservableCollection<Point> Points
         {
             get { return _points; }
             set { _points = value; OnPropertyChanged(); }
         }
         private double _newPointX;
         public double NewPointX
         {
             get { return _newPointX; }
             set { _newPointX = value; OnPropertyChanged(); UpdateNewPoint(); }
         }
    
         private double _newPointY;
         public double NewPointY
         {
             get { return _newPointY; }
             set { _newPointY = value; OnPropertyChanged(); UpdateNewPoint(); }
         }
         private Point _newPoint;
         public Point NewPoint
         {
             get { return _newPoint; }
             set
             {
                 _newPoint = value;
                 OnPropertyChanged(nameof(NewPoint));
             }
         }
    
         private void UpdateNewPoint()
         {
             NewPoint = new Point(NewPointX, NewPointY);
         }
         public GeometryEditorViewModel()
         {
           
             Points.Add(new Point(50, 50));
             Points.Add(new Point(100, 100));
             AddPointCommand = new RelayCommand(AddPoint);
         }
         public ICommand AddPointCommand { get; }
         private void AddPoint(object parameter)
         {
             if (parameter is Point point)
             {
                
                 Points.Add(new Point(NewPointX, NewPointY));
             }
             OnPropertyChanged(nameof(Points));
         }
         public event PropertyChangedEventHandler PropertyChanged;
         protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
         {
             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
         }
     }
     public class RelayCommand : ICommand
     {
         private readonly Action<object> _execute;
         private readonly Func<object, bool> _canExecute;
    
         public event EventHandler CanExecuteChanged
         {
             add { CommandManager.RequerySuggested += value; }
             remove { CommandManager.RequerySuggested -= value; }
         }
    
         public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
         {
             _execute = execute ?? throw new ArgumentNullException(nameof(execute));
             _canExecute = canExecute;
         }
    
         public bool CanExecute(object parameter)
         {
             return _canExecute == null || _canExecute(parameter);
         }
    
         public void Execute(object parameter)
         {
             _execute(parameter);
         }
     }
    
    
    

    如果答案是正确的,请点击“接受答案”并点赞。 如果您对此答案还有其他疑问,请点击“评论”。

    注意:如果您想接收相关电子邮件,请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。

    1 个人认为此答案很有帮助。

你的答案

问题作者可以将答案标记为“接受的答案”,这有助于用户了解已解决作者问题的答案。