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，它應該工作。