Click here to Skip to main content
15,893,588 members
Articles / Desktop Programming / WPF

Commands in MVVM

Rate me:
Please Sign up or sign in to vote.
4.97/5 (107 votes)
3 Dec 2012CPOL15 min read 513.7K   16.9K   279  
A consistent approach to Commands, Asynchronous Commands, and Events-to-Commands for WPF, Silverlight, and WP7.
<Window x:Class="CommandingSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CommandingSample"
        xmlns:apexCommands="clr-namespace:Apex.Commands;assembly=Apex"
        xmlns:apexControls="clr-namespace:Apex.Controls;assembly=Apex"
        xmlns:apexConverters="clr-namespace:Apex.Converters;assembly=Apex"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.Resources>
        <apexConverters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Window.Resources>
    
    <Window.DataContext>
        <local:MainViewModel x:Name="viewModel" />
    </Window.DataContext>
    
    <apexControls:ApexGrid Columns="*,*">
        
        <!-- Left hand column, the messages. -->
        <apexControls:ApexGrid Grid.Column="0" Margin="4" Rows="Auto,*">

            <TextBlock Grid.Row="0" Text="Output" FontSize="24" />
            <ScrollViewer Grid.Row="1">
                <ItemsControl ItemsSource="{Binding Messages}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" TextWrapping="Wrap" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
            
        </apexControls:ApexGrid>

        <!-- Right hand column, the commands. -->
        <apexControls:ApexGrid Grid.Column="1" Margin="4" Rows="Auto,*">

            <TextBlock Grid.Row="0" Text="Command Examples" FontSize="24"  />

            <ScrollViewer Grid.Row="1" >
                
                <StackPanel Orientation="Vertical">
                
                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="A simple command example." />
                        <Button Width="160" Content="Simple Command" Command="{Binding SimpleCommand}" />
                    </StackPanel>

                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="A lamba command example." />
                        <Button Width="160" Content="Lambda Command" Command="{Binding LambdaCommand}" />
                    </StackPanel>

                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="A parameterised command example." />
                        <Button Width="160" Content="Parameterised Command" Command="{Binding ParameterisedCommand}" CommandParameter="Apples" />
                    </StackPanel>

                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="Enabling and disabling a command example." />
                        <CheckBox IsChecked="{Binding EnableDisableCommand.CanExecute, Mode=TwoWay}" Content="Enabled" />
                        <Button Width="160" Content="Enable/Disable Command" Command="{Binding EnableDisableCommand}" />
                    </StackPanel>

                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="A command with events." />
                        <Button Width="160" Content="Events Command" Command="{Binding EventsCommand}" />
                    </StackPanel>

                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="An asynchronous command." />
                        <Button Width="160" Content="Asynchronous Command" Command="{Binding AsyncCommand1}" />
                    </StackPanel>

                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="Another asynchronous command." />
                        <Button Width="160" Content="Asynchronous Command" Command="{Binding AsyncCommand2}" 
                                Visibility="{Binding AsyncCommand2.IsExecuting, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=Invert}" />
                        <StackPanel Visibility="{Binding AsyncCommand2.IsExecuting, Converter={StaticResource BooleanToVisibilityConverter}}">
                            <TextBlock Margin="4" Text="The command is running!" />
                            <ProgressBar Margin="4" Height="20" Width="120" IsIndeterminate="True" />
                        </StackPanel>
                    </StackPanel>

                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="Cancellable Asynchronous Command." />
                        <Button Width="160" Content="Cancellable Async Command" Command="{Binding CancellableAsyncCommand}" 
                                Visibility="{Binding CancellableAsyncCommand.IsExecuting, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=Invert}" />
                        <StackPanel Visibility="{Binding CancellableAsyncCommand.IsExecuting, Converter={StaticResource BooleanToVisibilityConverter}}">
                            <TextBlock Margin="4" Text="The command is running!" />
                            <ProgressBar Margin="4" Height="20" Width="120" IsIndeterminate="True" />
                            <Button Margin="4" Width="100" Content="Cancel" Command="{Binding CancellableAsyncCommand.CancelCommand}" />
                        </StackPanel>
                    </StackPanel>

                    <StackPanel Margin="10">
                        <TextBlock TextWrapping="Wrap" Text="Binding a command to an event example." />
                        <Border Margin="20" Background="Red">
                            <apexCommands:EventBindings.EventBindings>
                                <apexCommands:EventBindingCollection>
                                    <apexCommands:EventBinding EventName="MouseLeftButtonDown" Command="{Binding EventBindingCommand}" />
                                </apexCommands:EventBindingCollection>
                            </apexCommands:EventBindings.EventBindings>
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Left Click on Me" FontSize="16" Foreground="White" />
                        </Border>
                    </StackPanel>
                </StackPanel>
            </ScrollViewer>

        </apexControls:ApexGrid>

    </apexControls:ApexGrid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
United Kingdom United Kingdom
Follow my blog at www.dwmkerr.com and find out about my charity at www.childrenshomesnepal.org.

Comments and Discussions