克隆 canvas 到动态视图框 WPF

Question

有一个主要 window 和一个 canvas class Graphcontext，其中动画和几个形状相互作用，如：

xaml

<DockPanel Name="stackPanel2" DockPanel.Dock="Left" Margin="10,10,10,10" LastChildFill="True" >
      <myctrl:Graphcontext x:Name="graphSurface" Background="Black" >
      </myctrl:Graphcontext>
</DockPanel>

代码

public class Graphcontext : Canvas
    {

        Ellipse _fixedCircle;
        internal int CavasWidth { get; set; }
        internal int CavasHeight { get; set; }

        public void drawSinglePoint(SolidColorBrush color)
        {
            this.Children.Clear();
            _fixedCircle = new Ellipse();
            _fixedCircle.Width = 25;
            _fixedCircle.Height = 25;
            _fixedCircle.Stroke = color;
            _fixedCircle.Fill = color;
            _fixedCircle.StrokeThickness = 3;
            // Get the center x and y coordinates
            double x = this.ActualWidth / 2 ;
            double y = this.ActualHeight / 2 ;
            _fixedCircle.Margin = new Thickness(x, y, 1, 1);
            // Add the circle to the canvas
            this.Children.Add(_fixedCircle);
            this.InvalidateVisual();
        }
   ...
}

我想 clon GraphContext inside other maximized canvas in second other monitor may using Viewbox.

我试过了

Canvas copycanvas = XamlReader.Parse(XamlWriter.Save(graphSurface)) as Canvas;
Viewbox vb = new Viewbox() { StretchDirection = StretchDirection.Both, Stretch=Stretch.Uniform };
vb.Child = copycanvas;
Window newwin = new Window() { Content = vb };
newwin.Show();

然而，当 graphSurface 更新时，copycanvas 不会更新。我实际上明白了这一点，但是当我使用来自代码隐藏的情节提要的动画时 copycanvas 没有更新。

我需要做什么 copycanvas 总是 graphSurface 的镜像？

我是否需要将所有逻辑复制到其他控件中？这样它总是一样的，也许有点延迟...

也许数据绑定 canvas 到 viewbox 可以做到，但它会怎样？

Answer 1

当您在 wpf 中开始编写代码时，您应该停止像过去的编程语言那样处理元素你必须使用 MVVM 模式来做正确的事情这是通过为 window 设置数据上下文来完成的 m-v-vm 模式有东西

视图模型：

a class 使用一些 public 属性实现 INotifyPropertyChanged 引发事件属性在设置时更改和初始化 sub 添加圆圈位置、颜色等数据。

查看：

xaml 数据绑定以使用绑定模组查看模型公共属性您可以以一种方式绑定数据（到目标），两种<->方式，一种<-获取方式

型号：

你的 main window 像初始化子一样初始化组件() ; this.DataContext = 新 view_model.mainsub

因此在您的示例中，您应该 --> 在视图模型中制作一些数据 class --> 开始新的 window --> 将 window 数据上下文设置为新的 view_model

假设您想从视图中获取数据，例如列出当前项目

您应该将 selected_index 属性绑定到单向源模式，这样它将更改相应的属性绑定到它 view_model class

然后你可以检查属性是否在 mainwindow （模型）中发生了变化，这就是 MVVM 的作用

请不要从视图中获取元素，您应该从视图中获取数据（view_model class）类型

wpf 中的屏幕仅用于发布数据，不要去抛出子/父关系，最后你会卡住

Answer 2

你可以使用 VisualBrush, Example1； Example2

所以基本上，您可以创建一个 VisualBrush 并将您当前的 GraphContext 数据绑定到它的 Visual 属性，这会创建 VisualBrush 的副本图像=16=]。

你的主代码 window:

MirrorWindow newwin = new MirrorWindow ();
newwin.DataContext = graphSurface;
newwin.Show();

XAML 用于镜像 window:

 <Grid>
        <Grid.Background>
            <VisualBrush Stretch="Uniform" Visual="{Binding}"/>
        </Grid.Background>
 </Grid>

样本：

具有基本 Canvas 和鼠标按下动画的主窗口：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas Background="Black" x:Name="graphSurface">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation  To="Red" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" FillBehavior="Stop" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
        </Canvas>
    </Grid>
</Window>

镜像window:

<Window x:Class="WpfApplication1.Mirror"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Mirror" Height="300" Width="300">
    <Grid>
        <Grid.Background>
            <VisualBrush Stretch="Fill" Visual="{Binding}"/>
        </Grid.Background>
    </Grid>
</Window>

MainWindow 后面的代码：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Mirror mm = new Mirror();
        mm.DataContext = this.graphSurface;
        mm.Show();
    }        
}

结果：鼠标点击Mainwindow，MainWindow和Mirror都会出现变色动画。

克隆 canvas 到动态视图框 WPF

Clon canvas to dynamic viewbox WPF

c#

wpf

wpf-controls

xaml

代码