Какой правильный способ выполнить навигацию страницы по изменению выбора списка

Question

Я пробую MVVM Light Toolkit. Хотя я все еще думаю, что множественные просмотра модернов для таких небольших приложений - это сверхугольники, мне нравятся концепции. То, что я до сих пор не могу понять, это то, как (или я должен сказать », что является рекомендуемым способом«) для перемещения с одной страницы к другой, когда выделение изменяется в списке.

Большая проблема с этим инструментом в том, что она заставляет вас изучать MVVM через другие источники, прежде чем использовать его, вместо того, чтобы показать вам, что (его видение) MVVM из строя в рамках, сопровождающих образцов и документацию. Есть ли образцы там, показывая разные концепции? И, пожалуйста, без видео.

Answer 1

Вы пытались изменить ItemTemplate вашего ListBox, чтобы каждый элемент был гиперслинконнымБуттоном и просто устанавливая атрибут навигации на страницу, к которой вы хотите навигаться?

Answer 2

Я до сих пор не разобрался, как это сделать (перейдите к странице сведений при выборе изменены в списке) без какого-либо кодового пользователя в виду. Тем не менее, если вы в порядке, имея просто небольшое количество кодовых, в том, что я рекомендую:

<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>

Во-первых, первое приведенное основание связывается с выделенным свойством ListBox с помощью привязки TWOWAY с недвижимостью в ViewModel (SelectedListItem в вышеуказанном).

Тогда в вашем Codebehind для этой страницы реализуйте обработчик для 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));

    }

Это единственный код, который вам нужен на вашем главном представлении.

В вашей главной ViewModel вам нужен выплеск свойства SelectListiteM:

    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);
            }
        }
    }

Теперь трюк, чтобы получить контекст, переданный на страницу ваших деталей (контекст, являющийся тем, какой элемент списка был выбран), необходимо настроить DataContext в представлении ваших деталей:

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

}

Надеюсь это поможет.

Answer 3

В конце концов вы захотите сделать больше, чем просто навигация, потенциально навигация после настройки пользовательского объекта.

Вот легкий способ сделать это.

Сначала вы хотите связать свой список избранного элемента Listbox к недвижимости в ViewModel

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

Объявите свой 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);
        }
    }

Затем вы можете определить триггер взаимодействия, связанный с мероприятию Tap

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

В вашем ViewModel определите свой EventPagecommand в качестве релайокомана:

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

и, наконец, объявить GoToEventPage метод

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

Обратите внимание, что вы можете делать другие действия, прежде чем навигация на новой странице, плюс выбранный элемент из вашего списка в настоящее время устанавливается в свойстве, которую вы обвяжите его.