(Xamarin MasterPageDetail ListView SelectedItem с MVVM) Как правильно загрузить страницу меню при нажатии? - PullRequest
Новая
       56

(Xamarin MasterPageDetail ListView SelectedItem с MVVM) Как правильно загрузить страницу меню при нажатии?

0 голосов
/ 15 мая 2019

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

То, как оно у меня сейчас работает, работает. НО, проблема в в том, что страница меню остается выбранной (по-прежнему подсвечивается оранжевым при перемещении меню слева), и при повторном нажатии боковое меню не исчезает и ничего не происходит, пока не будет выбрана другая страница.(IPropertyChanged не срабатывает, если щелкнуть тот же элемент ... или он все равно срабатывает и проверяет, есть ли изменение и устанавливает его или нет?)

Как это исправить, пожалуйста, корректным способом MVVM?

enter image description here Обратите внимание на то, что последний выбор фотографии остается выбранным, и при повторном нажатии ничего не происходит, когда требуется перезагрузить страницу.Работает только нажатие на другую страницу.

MasterDetailPage: 

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:views="clr-namespace:MyApp.Views"
                  x:Class="MyApp.Views.MyMainPage"
                  Title="My Main Page">


    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <ContentPage.Content>

                <Grid BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="130" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Grid>
                        <Image Source="menu_background.png" 
                       Aspect="AspectFill" />

                        <StackLayout Padding="0,20,0,0" 
                             HorizontalOptions="CenterAndExpand" 
                             VerticalOptions="CenterAndExpand">

                            <Image Source="ac_logo.png" 
                           Aspect="AspectFit" 
                           WidthRequest="60" 
                           HeightRequest="60" />

                            <Label Text="myAC" TextColor="White" FontSize="Large" />

                        </StackLayout>
                    </Grid>
                    <StackLayout Grid.Row="1" 
                         Spacing="15">

                        <ListView ItemsSource="{Binding MenuList}"
                                  SelectedItem="{Binding MenuSelectedItem, Mode=TwoWay}"
                          RowHeight="45"
                          SeparatorVisibility="Default"
                          BackgroundColor="#e8e8e8">

                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <StackLayout>
                                            <!-- Main design for our menu items -->
                                            <StackLayout VerticalOptions="FillAndExpand"
                                                 Orientation="Horizontal"
                                                 Padding="20,10,0,10"
                                                 Spacing="20">

                                                <Image Source="{Binding IconSource}"
                                                WidthRequest="30"
                                                HeightRequest="30"
                                                VerticalOptions="Center" />

                                                <Label Text="{Binding Title}"
                                                FontSize="Medium"
                                                VerticalOptions="Center"
                                                TextColor="Black"/>
                                            </StackLayout>

                                            <BoxView HeightRequest="1" BackgroundColor="Gray"/>
                                        </StackLayout>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>

                        </ListView>
                    </StackLayout>
                </Grid>

            </ContentPage.Content>

        </ContentPage>
    </MasterDetailPage.Master>


    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <views:StudentHomePage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>


</MasterDetailPage>

Моя модель представления: 

public class MyMainPageVM : BaseVM
    {
        public ObservableCollection<MenuPageItem> MenuList { get; set; }

        private MenuPageItem _menuSelectedItem = null;
        public MenuPageItem MenuSelectedItem
        {
            get
            {
                return _menuSelectedItem;
            }

            set
            {
               //if (_menuSelectedItem != value) 
               // {
                    _menuSelectedItem = value;
                    // navigate
                    (App.Current.MainPage as MasterDetailPage).Detail = new NavigationPage((Page)Activator.CreateInstance(_menuSelectedItem.TargetType));
                    (App.Current.MainPage as MasterDetailPage).IsPresented = false;
                //}
            }
        }
        public MyMainPageVM()
        {
            MenuList = new ObservableCollection<MenuPageItem>();
            populateMenuList();


        }

        private void populateMenuList()
        {
            MenuList.Add(new MenuPageItem() { Title = "Home", IconSource = "home.png", TargetType = typeof(MyHomePage) });
            MenuList.Add(new MenuPageItem() { Title = "Setting", IconSource = "setting.png", TargetType = typeof(Page2) });
            MenuList.Add(new MenuPageItem() { Title = "Help", IconSource = "help.png", TargetType = typeof(Page3) });
        }

    }

Моя базовая модель представления класса: 

public class BaseVM : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

И, наконец, страница MasterPageDetail CS: 

public partial class MyMainPage : MasterDetailPage
    {
        private MyMainPageVM myMainPageVM;
        public MyMainPage ()
        {
            InitializeComponent ();
            myMainPageVM = new MyMainPageVM();
            this.BindingContext = myMainPageVM       

        }        
    }

1 Ответ

1 голос
/ 16 мая 2019

Необходимо установить ListView.SelectedItem = null, чтобы удалить состояние hightLight выбранного элемента при переходе на новую страницу.

Для присвоения ListView, во-первых, дайте ListView имя в вашем MasterDetailPage.xaml: 

<ListView ItemsSource="{Binding MenuList}"
                          electedItem="{Binding MenuSelectedItem, Mode=TwoWay}"
                          RowHeight="45"
                          SeparatorVisibility="Default"
                          BackgroundColor="#e8e8e8"

                          x:Name="masterListView">

В приведенном ниже коде создайте public static ListView masterList и установите masterList = masterListView: 

public partial class MyMainPage : MasterDetailPage
{
    private MyMainPageVM myMainPageVM;


    public static ListView masterList;

    public MyMainPage ()
    {
        InitializeComponent();

        myMainPageVM = new MyMainPageVM();
        //bindingContext = myMainPageVM;
        BindingContext = myMainPageVM;

        //Set the masterList
        masterList = masterListView;
    }
}

Затем вы можете получить доступ к listView в другом классе, Set the SelectedItem=null после навигации: 

private MenuPageItem _menuSelectedItem = null;
public MenuPageItem MenuSelectedItem
{
    get
    {
        return _menuSelectedItem;
    }

    set
    {           
        _menuSelectedItem = value;

        (App.Current.MainPage as MasterDetailPage).Detail = new NavigationPage((Page)Activator.CreateInstance(_menuSelectedItem.TargetType));

        //Set the SelectedItem=null
        MyMainPage.masterList.SelectedItem = null;

        (App.Current.MainPage as MasterDetailPage).IsPresented = false;

    }
}

Дайте мне знать, если это работает.

...