HubTile Event Binding mit MVVM Light Toolkit

HubTiles sind im neuen WP7 Mango noch deutlich aufgewertet worden und der Developer hat viel mehr Möglichkeiten die UI seiner APP zu verbessern. Viele Entwickler benutzen wie auch ich das MVVM Light Toolkit um MVVM in der APP umzusetzen. Um nun im HubTile EventToCommand Binding richtig umzusetzen ist auf WindowsPhoneGeek ein Post erschienen wo beschrieben wird wie einfach das ist.

Ein Command erstellen:

 public ICommand TapCommand

    {
        get;
        set;
    }
Eine Action Methode:
private void HubTileTapAction(string param)
{
    string message = string.Format("{0} was tapped", param);
    MessageBox.Show(message);
}
Und ein wenig Code und XAML:
public MainPage()
{
    InitializeComponent();
    ICommand tapCommand = new RelayCommand<string>(this.HubTileTapAction);
    //...
}
<ListBox Grid.Row="0" x:Name="tileList">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <toolkit:HubTile Title="{Binding Title}" Margin="3"
                             Notification="{Binding Notification}"
                             DisplayNotification="{Binding DisplayNotification}"
                             Message="{Binding Message}"
                             GroupTag="{Binding GroupTag}" Source="{Binding ImageUri}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Tap">
                        <cmd:EventToCommand Command="{Binding TapCommand}" CommandParameter="{Binding Title}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </toolkit:HubTile>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
Und hier das Ergebnis:
imageimage
Quelle:
WindowsPhoneGeek
Advertisements

About pocketmobile

Window Phone Developer

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: