Windows应用商店中使用MVVM的事件处理

Question

I am developing a Windows Store App using the MVVM pattern (no framework, just raw MVVM).

I have a user control DropboxFileplanUserControl.xaml which has an associated view model DropboxFileplanViewModel.cs . DropboxFileplanUserControl is embedded in MainPage.xaml and MainPage.xaml has an associated view model, MainPageViewModel.cs .

My question is how can I define and raise an event in DropboxFileplanViewModel.cs and handle it in MainPageViewModel.cs ? Assume the event to be raised is called ImageLoaded .

EDIT: I have added the following specific code snippets...

DropboxFileplanUserControl.xaml

<UserControl
x:Class="PhotoBox.Controls.DropboxFileplanUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhotoBox.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="using:PhotoBox.ViewModels"
xmlns:triggers="using:WinRT.Triggers"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="200">

<UserControl.DataContext>
    <viewModels:DropboxFileplanViewModel />
</UserControl.DataContext>

<Grid>
    <ListBox>
    <!-- 
        ...
        ...
        Here I define a ListBox and use interaction triggers to bind the SelectionChanged event to FileplanSelectionChangedCommand on the ViewModel -->
         <triggers:Interactions.Triggers>
            <triggers:EventTrigger EventName="SelectionChanged">
                <triggers:InvokeCommandAction Command="{Binding FileplanSelectionChangedCommand}" PassEventArgsToCommand="True" />
            </triggers:EventTrigger>
        </triggers:Interactions.Triggers>
    </ListBox>
</Grid>

DropboxFileplanViewModel.xaml Note: I've stripped out a lot of code from this snippet

public class DropboxFileplanViewModel : ViewModel
{
    public DelegateCommand FileplanSelectionChangedCommand { get; set; }

    public DropboxFileplanViewModel()
    {
        FileplanSelectionChangedCommand = new DelegateCommand(FileplanSelectionChanged);
    }

    private void FileplanSelectionChanged(object parameter)
    {
        var args = (SelectionChangedEventArgs) parameter;

        // Some other stuff is done here but ultimately,
        // GetImageFile is called

    }

    private async void GetImageFile(MetaData file)
    {
        // Stuff is done here to get the image

        // ******************************                        
        // Here I want to raise the event
        // ******************************    
    }
}

DropboxFileplanUserControl is embedded in MainPage.xaml as follows...

MainPage.xaml

<controls:DropboxFileplanUserControl
            Grid.Row="0"
            DataContext="{Binding FileplanControl}"
            Visibility="{Binding IsOpen, Converter={StaticResource BooleanToVisibilityConverter}}"
            IsEnabled="{Binding IsOpen}"
            <!-- *** Here I need to access the ImageLoaded event and bind it to a command in MainPageViewModel.cs *** -->
            />

So, to summarise, I need to declare and raise an event in DropboxFileplanViewModel.cs and access this event in MainPage.xaml so I can then handle it in MainPageViewModel.cs . I know how to bind the event in MainPage.xaml to a command in MainPageViewModel , I just need to know how to do the first bit, ie declaring and raising an event in DropboxFileplanViewModel.cs and accessing it in MainPage.xaml .

Answer 1

In XAML:

<Image Loaded="ImageLoaded" ... />

In xaml.cs:

public MainPageViewModel ViewModel
{
    get
    {
        return this.DataContext as MainPageViewModel;
    }
}

public void ImageLoaded( object sender, RoutedEventArgs args )
{
    // call down to your view model
    if( ViewModel != null )
    {
        ViewModel.ImageLoadedHandler( );
    }
}

In response to your comment, the idea is the same for the custom UserControl . I have (what I think is) and interesting solution I don't often see others implement. It's the idea that each ViewModel has an associated View (I call it owner) and a logical parent. Similar to the visual tree XAML/WinRT constructs that allows for traversal of UI elements, the parent/owner relationship we can create in our ViewModels allow this same style of traversal in our back-end code. Consider the following:

Assume we have a custom UserControl called MyUserControl that resides in the namespace MyProject .

In MainPageView.xaml:

<Page xmlns:local="MyProject"> // or whatever your fancy-pants namespace scheme is
    <Grid>
        <local:MyUserControl DataContext="{Binding InnerVM}" />
    </Grid>
</Page>

In you MainPageView.xaml.cs

public MainPageViewModel ViewModel
{
    get
    {
        return this.DataContext as MainPageViewModel;
    }
}

public MainPageView()
{
    InitializeComponent( );

    DataContext = new MainPageViewModel( null, this );
}

We're getting there. Now let's look at MainPageViewModel.cs

public MainPageViewModel : ViewModelBase // I'll explain ViewModelBase momentarily
{
    public MyUserControlViewModel InnerVM { get; set; } // should be a notifying property

    public MainPageViewModel( ViewModelBase parent, FrameworkElement owner )
        : base( parent, owner )
    {
    }
}

For all intents and purposes, MyUserControlViewModel.cs is the same.

Here is ViewModelBase.cs (with some abridgments):

public ViewModelBase
{
    public ViewModelBase Parent { get; set; } // should be a notifying property
    public FrameworkElement Owner { get; set; } // should be a notifying property

    public ViewModelBase( ViewModelBase parent, FrameworkElement owner )
    {
        Parent = parent;
        Owner = owner;
    }
}

Simple! Right? Now what does that actually do for us? Let's see. Consider the following:

In MyUserControl.xaml:

<Image Loaded="ImageLoaded" ... />

In MyUserControl.xaml.cs:

public MyUserControlVieWModel ViewModel
{
    get
    {
        return this.DataContext as MyUserControlVieWModel;
    }
}

public void ImageLoaded( object sender, RoutedEventArgs args )
{
    // call down to your view model
    if( ViewModel != null )
    {
        ViewModel.ImageLoadedHandler( );
    }
}

MyUserControlViewModel.cs

Now you have two options here (and I just realized I may be over-explaining the issue for you, and I apologize. Please heavily consider option 1 for your question):

1- Use Events!

public event EventHandler ImageLoaded = delegate { };

public void OnImageLoaded( )
{
    ImageLoaded( );
}

Then in MainPageViewModel.cs

public void OnImageLoaded( )
{
    // handle the image loading
}

And now maybe put this in your constructor:

...
InnerVM.ImageLoaded += OnImageLoaded;
...

Now when the event is fired from within MyUserControl, MainPageViewModel will be able to respond.

The second option requires more explination, and I have to run for now. But hopefully this gets you going. Sorry for the short ending. Please respond with questions if you need to. Good luck!