CODEWITHSUNDEEP
c#windows-phone-7mvvmmvvm-lightwindows-phone
Mentezza
Mentezza

Reputation: 637

The good way to implement logic, when and item is selected in ListBox (MVVM)

So i implent the MVVM (light toolkit) in a windows phone application. I have a ListBox which SelectedItem is binded to the property SelectedArticle. Here below the (very simple) property:

private Article _selectedArticle;
public Article SelectedArticle
{
    get { return _selectedArticle; }
    set
    {
            _selectedArticle = value;
            base.RaisePropertyChanged("SelectedArticle");
    }

}

So what i'd like is to change the view, when and element of the ListBox is checked. Anyway it will be easy to put the changement of the view in the settet, but i'd like to avoid that. So how to do that?

Here the xaml:

    <ListBox IsEnabled="{Binding ListBoxEnabled, Mode=TwoWay}" SelectedItem="{Binding SelectedArticle, Mode=TwoWay}" Opacity="{Binding Opacity, Mode=TwoWay}" ItemsSource="{Binding ArticlesList}" Height="634" Width="456">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image
                        Margin="0,15"
                        VerticalAlignment="Top"
                        Source="{Binding Image}"
                        Height="100"
                        Width="100" />
                    <StackPanel>
                        <TextBlock Margin="10,15" 
                                   Width="250"
                                   TextWrapping="Wrap"
                                   VerticalAlignment="Top"
                                   HorizontalAlignment="Left"
                                   FontSize="24"
                                   Text="{Binding Content}" />
                        <TextBlock Margin="20,0"
                                   Width="100"
                                   VerticalAlignment="Top"
                                   HorizontalAlignment="Left"
                                   FontSize="20"
                                   Text="{Binding Id}"/>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Upvotes: 2

Views: 1107

Answers (3)

earthling
earthling

Reputation: 5264

Do you want something like an interaction trigger?
Add this to your xaml

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Tap">
        <cmd:EventToCommand Command="{Binding EventTapCommand, Mode=OneWay}"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

and then define the RelayCommand in your ViewModel

public RelayCommand EventTapCommand { get; private set; }
public MainViewModel()
{
    EventTapCommand = new RelayCommand(DoSomeCoolStuff);
}

If you need to, you can also pass the selected item from your list, you just need to set the CommandParameter and define your RelayCommand using the item type. I forget the exact binding syntax. Something like:

<cmd:EventToCommand Command="{Binding EventTapCommand, Mode=OneWay}" CommandParameter="{Binding}"/>

public RelayCommand<MyType> EventTapCommand { get; private set; }

Upvotes: 3

Jacek Gorgoń
Jacek Gorgoń

Reputation: 3214

You could attach a command to one of the ListBox's events using a behavior:

http://geekswithblogs.net/lbugnion/archive/2009/11/05/mvvm-light-toolkit-v3-alpha-2-eventtocommand-behavior.aspx

Upvotes: 2

jamier
jamier

Reputation: 842

Take a look at this article http://www.japf.fr/2009/03/thinking-with-mvvm-data-templates-contentcontrol/, it uses wpf datatemplates to show different views depending on a databound property.

Upvotes: 1

Related Questions