[WP8] ApplicationBar y MVVM

Este post sale a raíz de que las clases ApplicationBarIconButton y ApplicationBarMenuItem de Windows Phone Silverlight no tienen una propiedad Command como aquellos controles que heredan de ButtonBase.

Ahora que identificamos el problema prosigamos con una de las tantas soluciónes que me imagino que se le pueden dar:

MainPageVM.cs

Creamos un ViewModel para nuestro MainPage. Para implementar correctamente el RelayCommand revisen este enlace.

    public class MainPageVM : INotifyPropertyChanged
    {
        #region Properties

        private string miTexto;

        public string MiTexto
        {
            get { return miTexto; }
            set { miTexto = value; RaisePropertyChanged(); }
        }

        #endregion Properties

        #region Command Properties

        private ICommand iconButtonCommand;

        public ICommand IconButtonCommand
        {
            get
            {
                if (null == iconButtonCommand)
                    iconButtonCommand = new RelayCommand(IconButtonExecute);
                return iconButtonCommand;
            }
        }

        private ICommand menuItemCommand;

        public ICommand MenuItemCommand
        {
            get
            {
                if (null == menuItemCommand)
                    menuItemCommand = new RelayCommand(MenuItemExecute);
                return menuItemCommand;
            }
        }

        #endregion Command Properties

        #region Command Methods

        private void MenuItemExecute()
        {
            this.MiTexto = "Acabas de presionar el MenuItem";
        }

        private void IconButtonExecute()
        {
            this.MiTexto = "Acabas de presionar el IconButton";
        }

        #endregion Command Methods

        #region INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            if (null != PropertyChanged)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion INotifyPropertyChanged
    }

MainPage.cs

Aquí usando Nuget instalemos un paquete llamado BindableApplicationBar.

Y luego prosigamos definiendo los enlaces de la siguiente manera:

<phone:PhoneApplicationPage
    x:Class="ApplicationBarMVVMApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="clr-namespace:ApplicationBarMVVMApp.ViewModels"
    mc:Ignorable="d"
    xmlns:bar="clr-namespace:BindableApplicationBar;assembly=BindableApplicationBar" 
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.DataContext>
        <vm:MainPageVM />
    </phone:PhoneApplicationPage.DataContext>
    
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="XAMLDEVELOPMENT.BLOGSPOT.COM" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="AppBar" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock Text="{Binding MiTexto}" Style="{StaticResource PhoneTextExtraLargeStyle}" TextWrapping="Wrap"/>
        </Grid>
    </Grid>

    <bar:Bindable.ApplicationBar>
        <bar:BindableApplicationBar>
            <bar:BindableApplicationBar.Buttons>
                <bar:BindableApplicationBarButton Text="{Binding LocalizedResources.AppBarButtonText, Source={StaticResource LocalizedStrings}}" IconUri="/Assets/AppBar/add.png" Command="{Binding IconButtonCommand}"/>
            </bar:BindableApplicationBar.Buttons>
            <bar:BindableApplicationBar.MenuItems>
                <bar:BindableApplicationBarMenuItem Text="{Binding LocalizedResources.AppBarMenuItemText, Source={StaticResource LocalizedStrings}}" Command="{Binding MenuItemCommand}" />
            </bar:BindableApplicationBar.MenuItems>
        </bar:BindableApplicationBar>
    </bar:Bindable.ApplicationBar>
    
</phone:PhoneApplicationPage>

CodePlex

Código fuente disponible en: Windows Phone -> ApplicationBarMVVMApp