WPF：如何使用MVVM正确地传递两个用户控件？

时间：2012-12-17 17:35:59

标签： c# wpf mvvm

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

在视图中有一个Panel，它由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到那个事件并且它工作了，但是我需要在MainWindow中有两个“Panels”，所以如果我使用这个解决方案，两个面板将改变它们的颜色，因为它们都将获得相同的事件，并且只应更新一个PanelDisplay。

MainWindow的代码：

<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>

那么，如何分别实现每个PanelDisplay？有什么想法吗？

由于

2 个答案:

答案 0 :(得分：1)

您应该为每个UserControl创建一个单独的视图模型。例如，您可以拥有PanelViewModel作为PanelDisplayViewModel和PanelButtonsViewModel的属性。

  1. 在PanelButtonsViewModel。
    2. 上按下了一个按钮
  2. 该方法最多可致电PanelViewModel报告此事件。
  3. 然后，面板通过调用PanelDisplayViewModel上的方法来更新显示。

    4. 此处避免使用视图模型的静态资源，只需在每个用户控件上使用标准DataContext即可。

答案 1 :(得分：1)

您的PanelButtons.xaml和PanelDisplay.xaml不使用PanelButtonsAndDisplayVM类的相同实例，因为每个类都在资源中声明自己的实例。

相反，将Panel.xaml中的PanelButtonsAndDisplayVM实例声明为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>
相关问题
最新问题