Quelle est la bonne façon d'effectuer la navigation de page sur les changements de sélection ListBox

Question

Je suis en train de la Lumière Toolkit MVVM. Bien que je pense encore avoir plusieurs ViewModels pour ces petites applications est surpuissant, j'aime les concepts. Ce que je comprends ne peux toujours pas tout à fait comment (ou devrais-je dire « quelle est la méthode recommandée ») pour naviguer d'une page à l'autre lorsque les changements de sélection dans une zone de liste.

Le grand problème avec cette boîte à outils est qu'il vous oblige à apprendre MVVM par d'autres sources avant de l'utiliser, plutôt que de vous montrer ce que (sa vision) MVVM est à l'intérieur du cadre, des échantillons et des documents d'accompagnement. Y at-il des échantillons montrant là les différents concepts? Et s'il vous plaît, pas de vidéos.

Answer 1

Avez-vous essayé de modifier votre ListBox ItemTemplate pour que chaque élément soit une HyperlinkButton et la mise juste l'attribut NavigateUri à la page que vous souhaitez naviguer?

Answer 2

Je n'ai toujours pas compris comment le faire (naviguer à la page de détails sur la sélection a changé dans une zone de liste) sans codebehind dans la vue. Toutefois, si vous êtes OK d'avoir un peu codebehind dans la vue est ici ce que je recommande:

<ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}"
    SelectionChanged="MainListBox_SelectionChanged" 
    SelectedItem="{Binding Path=SelectedListItem, Mode=TwoWay}">
    <ListBox.ItemTemplate>
         <DataTemplate>
              <StackPanel Margin="0,0,0,17" Width="432">
                  <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                  <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
              </StackPanel>
        </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Tout d'abord, par-dessus se lient à la propriété SelectedItem du Listbox avec un liant TwoWay à une propriété dans votre ViewModel (SelectedListItem au-dessus).

Ensuite, dans votre codebehind pour cette page pour mettre en œuvre le gestionnaire MainListBox_SelectionChanged:

    // Handle selection changed on ListBox
    private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // If selected index is -1 (no selection) do nothing
        if (MainListBox.SelectedIndex == -1)
            return;

        // Navigate to the new page
        NavigationService.Navigate(new Uri("/DetailsPage.xaml", UriKind.Relative));

    }

Ceci est le seul behind dont vous avez besoin dans votre vue principale.

Dans votre principale ViewModel vous avez besoin d'une propriété SelectedListItem:

    public const string SelectedListItemPropertyName = "SelectedListItem";
    private ItemViewModel _SelectedListItem;
    /// <summary>
    /// Sample ViewModel property; this property is used in the view to display its value using a Binding
    /// </summary>
    /// <returns></returns>
    public ItemViewModel SelectedListItem
    {
        get
        {
            return _SelectedListItem;
        }
        set
        {
            if (value != _SelectedListItem)
            {
                _SelectedListItem = value;
                RaisePropertyChanged(SelectedListItemPropertyName);
            }
        }
    }

Maintenant, l'astuce pour obtenir le contexte passé à votre page des détails (le contexte étant ce que l'élément de liste a été sélectionné), vous devez configurer le DataContext dans vos détails voir:

public DetailsPage()
{
    InitializeComponent();
    if (DataContext == null)
        DataContext = App.ViewModel.SelectedListItem;

}

Hope this helps.

Answer 3

finalement vous aurez envie de faire plus que simplement naviguer, naviguer potentiellement après avoir défini un objet personnalisé.

Voici un moyen MVVM-lumière de le faire.

Vous voulez d'abord lier votre zone de liste élément sélectionné à une propriété dans votre viewmodel

<ListBox ItemsSource="{Binding Events}" Margin="0,0,-12,0" SelectedItem="{Binding SelectedEvent, Mode=TwoWay}">

Déclarez votre propriété SelectedEvent

    public const string SelectedEventPropertyName = "SelectedEvent";

    private Event _selectedEvent;


    public Event SelectedEvent
    {
        get {return _selectedEvent;}

        set
        {
            if (_selectedEvent == value)
            {
                return;
            }

            var oldValue = _selectedEvent;
            _selectedEvent = value;

            // Update bindings and broadcast change using GalaSoft.MvvmLight.Messenging
            RaisePropertyChanged(SelectedEventPropertyName, oldValue, value, true);
        }
    }

Vous pouvez ensuite définir un déclencheur d'interaction liée à l'événement du robinet

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

Dans votre viewmodel, définir votre EventPageCommand comme RelayCommand:

public RelayCommand EventPageCommand { get; private set; }
public MainViewModel()
{
    EventPageCommand = new RelayCommand(GoToEventPage);
}

et enfin déclarer votre méthode de GoToEventPage

private void GoToEventPage()
{
    _navigationService.NavigateTo(new Uri("/EventPage.xaml", UriKind.Relative));
}

Notez que vous pouvez faire d'autres actions avant de naviguer vers votre nouvelle page, plus votre élément sélectionné de votre liste est actuellement définie dans la propriété que vous lié aussi.