InkCanvas 的 mvvm wpf UI 不会更新

Question

>我尝试在 InkCanvas 上绘制，以便绘图将显示在所有连接的用户中，反之亦然， 但 UI 不会使用新绘图进行更新。

我将 StrokeCollection 作为 StrokeCollected 事件中的 MemoryStream 发送到服务器OnStrokeCollected()并从服务器接收 MemoryStream，并使用收到的 MemoryStream 创建 StrokeCollectionCanvasStrokesReceived()

这是视图模型：

class MainViewModel
{
public ObservableCollection<UserModel> Users { get; set; }
public ObservableCollection<string> Messages { get; set; }
public RelayCommand ConnectToServerCommand { get; set; }
public RelayCommand SendMessageCommand { get; set; }
public string UserName { get; set; }
public string Message { get; set; }
public StrokeCollection CanvasStrokes { get; set; }
private Server _server;
public MainViewModel()
{
Users = new ObservableCollection<UserModel>();
Messages = new ObservableCollection<string>();
CanvasStrokes = new StrokeCollection();
_server = new Server();
_server.connectedEvent += UserConnected;
_server.msgReceivedEvent += MessageReceived;
_server.inkStrokeReceivedEvent += CanvasStrokesReceived;
_server.userDisconnectEvent += RemoveUser;
ConnectToServerCommand = new RelayCommand(o => _server.ConnectToServer(UserName), o => !string.IsNullOrEmpty(UserName));
SendMessageCommand = new RelayCommand(o => _server.SendMessageToServer(Message), o => !string.IsNullOrEmpty(Message));
}

public void OnStrokeCollected(object sender, InkCanvasStrokeCollectedEventArgs e)
{
MemoryStream _ms = new MemoryStream();
CanvasStrokes.Save(_ms);
_ms.Flush();
_server.SendCanvasStrokesToServer(_ms);
}

private void CanvasStrokesReceived()
{
Application.Current.Dispatcher.Invoke(() =>
{
var strokes = _server.PacketReader.ReadCanvasStrokes();
CanvasStrokes = new StrokeCollection(strokes);
});
}


private void UserConnected()
{
var user = new UserModel
{
UserName = _server.PacketReader.ReadMessage(),
UID = _server.PacketReader.ReadMessage()
};
if (!Users.Any(x => x.UID == user.UID))
{
Application.Current.Dispatcher.Invoke(() => Users.Add(user));
}
}
private void MessageReceived()
{
var msg = _server.PacketReader.ReadMessage();
Application.Current.Dispatcher.Invoke(() => Messages.Add(msg));
}
private void RemoveUser()
{
var uid = _server.PacketReader.ReadMessage();
var user = Users.Where(u => u.UID == uid).FirstOrDefault();
Application.Current.Dispatcher.Invoke(() => Users.Remove(user));
}
}

这是我的观点：

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var mvm = new MainViewModel();
this.DataContext = mvm;
inkCanv.StrokeCollected += mvm.OnStrokeCollected;
inkCanv.Strokes = mvm.CanvasStrokes;
}
}

这是我的 XAML：

<InkCanvas          
x:Name="inkCanv" 
Grid.Column="1" 
Grid.Row="1" 
Height="130" 
Background="Azure"
>
</InkCanvas>

Answer 1

看起来您缺少更新画布。必须显式执行此操作或使用数据绑定(推荐)：

<InkCanvas Strokes="{Binding CanvasStrokes}" />

然后在MainWindow的构造函数中删除赋值：

public MainWindow()
{
InitializeComponent();
var mvm = new MainViewModel();
this.DataContext = mvm;
inkCanv.StrokeCollected += mvm.OnStrokeCollected;
// inkCanv.Strokes = mvm.CanvasStrokes;
}