Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 89864

Basic UI architecture: prompting for information

$
0
0

I'm trying to create a music player app with a playlist.

Part of this exercise is that I want to use commands for my interface. I've made a playlist page that shows a list of playlists (now empty) and a create playlist button with a command property of my viewmodel wired to it.

When the user clicks the Create button, I want to prompt him for the playlist name. To do this I've made a PlaylistPropertiesPage, but it seems I have to navigate to this page in the PlaylistsPage and not the Playlists viewmodel.

How would a Xamarin expert set this up? I don't like how the viewmodel needs to know about any pages.

PlaylistsPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:MusicPlayer.ViewModels"
             mc:Ignorable="d"
             x:Class="MusicPlayer.Views.PlaylistsPage"
             >
  <ContentPage.Content>

    <StackLayout Orientation="Vertical">
      <ListView x:Name="_playlistLv"
                Header="Playlists"
                ItemsSource="{Binding Playlists}"
                >
        <ListView.HeaderTemplate>
          <DataTemplate>
            <StackLayout Orientation="Horizontal">
              <Label Text="Playlists" />
              <Button Text="Create"
                      Command="{Binding CreatePlaylistCmd}"
                      CommandParameter="{Binding}"
                      />
            </StackLayout>
          </DataTemplate>
        </ListView.HeaderTemplate>
        <ListView.ItemTemplate>
          <DataTemplate>
            <StackLayout>
              <Label Text="{Binding Name}" />
            </StackLayout>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>

  </ContentPage.Content>
</ContentPage>

PlaylistsPage.xaml.cs:

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using MusicPlayer.ViewModels;

namespace MusicPlayer.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PlaylistsPage : ContentPage
    {
        public PlaylistsPage()
        {
            InitializeComponent();
            BindingContext = new PlaylistsVm
            {
                PlaylistsPage = this
            };
        }

        public async void CreatePlaylist()
        {
            await Navigation.PushAsync(new PlaylistPropertiesPage
            {
            });
        }
    }
}

PlaylistsVm.cs:

using System.Collections.Generic;
using System.Windows.Input;
using Xamarin.Forms;
using MusicPlayer.Data;
using MusicPlayer.Models;
using MusicPlayer.Views;

namespace MusicPlayer.ViewModels
{
    internal class PlaylistsVm
    {
        public List<Playlist> Playlists { get; set; }
        public PlaylistsPage PlaylistsPage { get; set; }

        private PlaylistsTl _playlistsTl;

        public PlaylistsVm()
        {
            _playlistsTl = new PlaylistsTl();

            CreatePlaylistCmd = new Command(() => PlaylistsPage.CreatePlaylist());
        }

        public async void Fetch()
        {
            Playlists = await _playlistsTl.GetItemsAsync();
        }

        public ICommand CreatePlaylistCmd { get; private set; }
    }
}

Viewing all articles
Browse latest Browse all 89864

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>