WPF：如何使用MVVM正确通信两个用户控件？

Question

我正在开发一个使用MVVM的WPF（C＃）应用程序。 我已经创建了一个新的项目，这是一个简化，只关注我的问题。

在View有一个面板至极由PanelButton至极构成由上两个按钮和PanelDisplay。

的想法是，当按下橙色按钮的PanelDisplay应该将其颜色改为按PanelDisplay应变成绿色橙色和绿色时按钮。

代码面板：

<UserControl x:Class="WpfApplication1.View.Panel" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:view="clr-namespace:WpfApplication1.View" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="600"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0.3*"/> 
      <ColumnDefinition Width="0.7*"/> 
     </Grid.ColumnDefinitions> 

     <view:PanelButtons Grid.Column="0"></view:PanelButtons> 
     <view:PanelDisplay Grid.Column="1"></view:PanelDisplay> 

    </Grid> 
</UserControl> 

为PanelButtons.xaml的代码：

<UserControl x:Class="WpfApplication1.View.PanelButtons" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:viewModel="clr-namespace:WpfApplication1.ViewModel" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300"> 

<UserControl.Resources> 
    <viewModel:PanelButtonsAndDisplayVM x:Key="panelButtonsAndDisplayVM"/>   
</UserControl.Resources> 

<Grid Background="LightGray"> 
    <StackPanel> 
     <Button Width="64" Height="64" 
       Command="{Binding Source={StaticResource panelButtonsAndDisplayVM}, Path=PressedOrange}">Orange</Button> 
     <Button Width="64" Height="64" 
       Command="{Binding Source={StaticResource panelButtonsAndDisplayVM}, Path=PressedGreen}">Green</Button> 
    </StackPanel> 

</Grid> 

为PanelDisplay.xaml的代码：

<UserControl x:Class="WpfApplication1.View.PanelDisplay" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:viewModel="clr-namespace:WpfApplication1.ViewModel" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300"> 

<UserControl.Resources> 
    <viewModel:PanelButtonsAndDisplayVM x:Key="panelButtonsAndDisplayVM"/> 
</UserControl.Resources> 

<Grid Background="{Binding Source={StaticResource panelButtonsAndDisplayVM},Path=Color}" > 

</Grid> 

的问题是，PanelDisplay不改变它的颜色，来解决这个我做了一个单例类，它推出了一个活动，认购PanelDisplay该事件，它的工作，但我需要在主窗口两个“板”，所以如果我使用此解决方案，两个面板将更改颜色，因为它们都会得到相同的事件，并且只应更新一个PanelDisplay。

代码的主窗口：

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:view="clr-namespace:WpfApplication1.View" 
    Title="MainWindow" Height="350" Width="525"> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="0.5*"/> 
     <RowDefinition Height="0.5*"/> 
    </Grid.RowDefinitions> 

    <view:Panel Grid.Row="0"/> 
    <view:Panel Grid.Row="1"/> 
</Grid> 

那么，如何可以separatedly现实化每个PanelDisplay？有任何想法吗？

感谢

Answer 1

，因为每个宣告自己的实例资源你PanelButtons.xaml和PanelDisplay.xaml不使用PanelButtonsAndDisplayVM类的同一个实例。

相反，在面板声明PanelButtonsAndDisplayVM实例。XAML作为DataContext的所以它传播到所有后代控件：

<UserControl x:Class="WpfApplication1.View.Panel" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:view="clr-namespace:WpfApplication1.View" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="600"> 
    <UserControl.DataContext> 
     <view:PanelButtonsAndDisplayVM/> 
    </UserControl.DataContext> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0.3*"/> 
      <ColumnDefinition Width="0.7*"/> 
     </Grid.ColumnDefinitions> 
     <view:PanelButtons Grid.Column="0"></view:PanelButtons> 
     <view:PanelDisplay Grid.Column="1"></view:PanelDisplay> 
    </Grid> 
</UserControl> 

而且用它PanelButtons.xaml这样的：

<UserControl x:Class="WpfApplication1.View.PanelButtons" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:viewModel="clr-namespace:WpfApplication1.ViewModel" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid Background="LightGray"> 
     <StackPanel> 
      <Button Width="64" Height="64" 
       Command="{Binding PressedOrange}">Orange</Button> 
      <Button Width="64" Height="64" 
       Command="{Binding PressedGreen}">Green</Button> 
     </StackPanel> 
    </Grid> 
</UserControl> 

而且在PanelDisplay.xaml这样的：

<UserControl x:Class="WpfApplication1.View.PanelDisplay" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:viewModel="clr-namespace:WpfApplication1.ViewModel" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid Background="{Binding Path=Color}"> 
    </Grid> 
</UserControl> 

Answer 2

您应该为每个UserControl一个独立的视图模型。例如，您可以使用PanelViewModel作为PanelDisplayViewModel和PanelButtonsViewModel的属性。

1. 按下PanelButtonsViewModel上的按钮。
2. 该方法打电话给PanelViewModel来报告事件。
3. 面板然后通过调用PanelDisplayViewModel的方法来更新显示。

避免这里的视图模型的静态资源，只是在每个用户控件上使用标准DataContext，它应该工作。