[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

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *