Navigation menu is now a reusable component

This commit is contained in:
watsonb8 2019-05-18 17:25:36 -04:00
parent 62579677cf
commit 9dcd411090
24 changed files with 295 additions and 148 deletions

View File

@ -19,8 +19,12 @@
<Folder Include="Backend\" />
<Folder Include="Frontend\Components\" />
<Folder Include="Frontend\Views\" />
<Folder Include="Frontend\Views\Home\" />
<Folder Include="Frontend\Views\Songs\" />
<Folder Include="Frontend\Views\MainView\" />
<Folder Include="Frontend\Behaviors\" />
<Folder Include="Frontend\Components\NavigationMenu\" />
<Folder Include="Frontend\Views\Albums\" />
<Folder Include="Frontend\Views\Artists\" />
<Folder Include="Frontend\Views\Stations\" />
</ItemGroup>
</Project>

View File

@ -3,17 +3,18 @@ using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Aurora.Frontend.Views.Main;
namespace Aurora.Frontend.Views.Main
namespace Aurora.Frontend.Views.Components.NavigationMenu
{
public class NavigationItem
{
public NavigationItem()
{
TargetType = typeof(MainContentPage);
}
public int Id { get; set; }
public string Title { get; set; }
public string Group { get; set; }
public Type TargetType { get; set; }
}

View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Aurora.Frontend.Components.NavigationMenu.NavigationMenu"
Title="Navigation">
<ContentView.Content>
<StackLayout>
<ListView x:Name="MenuItemsListView"
SeparatorVisibility="None"
HasUnevenRows="true"
BackgroundColor="{StaticResource MenuBackgroundColor}"
CachingStrategy="RecycleElement">
<ListView.Header>
<Grid BackgroundColor="#03A9F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="80" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Grid.Column="1" Grid.Row="2" Text="Aurora" Style="{DynamicResource SubtitleStyle}" />
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
<Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding Title}" FontSize="24" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentView.Content>
</ContentPage>

View File

@ -0,0 +1,45 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Aurora.Frontend.Views.Components.NavigationMenu;
using Xamarin.Forms;
namespace Aurora.Frontend.Components.NavigationMenu
{
public partial class NavigationMenu : ContentPage
{
public NavigationMenu()
{
InitializeComponent();
ListView = MenuItemsListView;
}
public ListView ListView;
public static readonly BindableProperty ItemsProperty =
BindableProperty.Create(propertyName: nameof(Items),
returnType: typeof(ObservableCollection<NavigationItem>),
declaringType: typeof(NavigationMenu),
defaultBindingMode: BindingMode.TwoWay,
propertyChanged: OnItemsChanged);
public ObservableCollection<NavigationItem> Items
{
get
{
return (ObservableCollection<NavigationItem>)GetValue(ItemsProperty);
}
set
{
SetValue(ItemsProperty, value);
}
}
private static void OnItemsChanged(BindableObject bindable, object oldValue, object newValue)
{
var control = (NavigationMenu)bindable;
control.MenuItemsListView.ItemsSource = (ObservableCollection<NavigationItem>)newValue;
}
}
}

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Aurora.Frontend.Views.Albums.AlbumsView">
<ContentPage.Content>
<Label Text="Albums" />
</ContentPage.Content>
</ContentPage>

View File

@ -0,0 +1,15 @@
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace Aurora.Frontend.Views.Albums
{
public partial class AlbumsView : ContentPage
{
public AlbumsView()
{
InitializeComponent();
}
}
}

View File

@ -0,0 +1,10 @@
using System;
namespace Aurora.Frontend.Views.Albums
{
public class AlbumsViewModel
{
public AlbumsViewModel()
{
}
}
}

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Aurora.Frontend.Views.Artists.ArtistsView">
<ContentPage.Content>
</ContentPage.Content>
</ContentPage>

View File

@ -0,0 +1,15 @@
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace Aurora.Frontend.Views.Artists
{
public partial class ArtistsView : ContentPage
{
public ArtistsView()
{
InitializeComponent();
}
}
}

View File

@ -0,0 +1,10 @@
using System;
namespace Aurora.Frontend.Views.Artists
{
public class ArtistsViewModel
{
public ArtistsViewModel()
{
}
}
}

View File

@ -0,0 +1,24 @@
using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace Aurora.Frontend.Views
{
public class BaseViewModel
{
public BaseViewModel()
{
}
#region INotifyPropertyChanged Implementation
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged == null)
return;
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
}

View File

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Aurora.Frontend.Views.Main.MainContentPage"
Title="Detail">
<StackLayout>
<Label Text="This is a detail page. To get the 'triple' line icon on each platform add a icon to each platform and update the 'Master' page with an Icon that references it." />
</StackLayout>
</ContentPage>

View File

@ -1,14 +0,0 @@
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace Aurora.Frontend.Views.Main
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainContentPage : ContentPage
{
public MainContentPage()
{
InitializeComponent();
}
}
}

View File

@ -1,36 +1,20 @@
<?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:views="clr-namespace:Aurora.Frontend.Views.Main"
x:Class="Aurora.Frontend.Views.Main.MainView">
<ContentPage.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<views:NavigationMenu Grid.Column="0"/>
</Grid>
</ContentPage.Content>
</ContentPage>-->
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Aurora.Frontend.Views.Main"
xmlns:views="clr-namespace:Aurora.Frontend.Views.Songs"
xmlns:navigation="clr-namespace:Aurora.Frontend.Components.NavigationMenu"
x:Class="Aurora.Frontend.Views.Main.MainView"
MasterBehavior="Split">
<MasterDetailPage.Master>
<views:NavigationMenu x:Name="MasterPage"/>
<navigation:NavigationMenu x:Name="MasterPage" Items="{Binding Pages}"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<views:MainContentPage />
<views:SongsView />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>

View File

@ -1,5 +1,7 @@
using System;
using System.Collections.Generic;
using Aurora.Frontend.Views.Components.NavigationMenu;
using Aurora.Frontend.Views.MainView;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
@ -11,7 +13,7 @@ namespace Aurora.Frontend.Views.Main
public MainView()
{
InitializeComponent();
BindingContext = new MainViewModel();
MasterPage.ListView.ItemSelected += ListView_ItemSelected;
}

View File

@ -0,0 +1,43 @@
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Aurora.Frontend.Views.Albums;
using Aurora.Frontend.Views.Artists;
using Aurora.Frontend.Views.Components.NavigationMenu;
using Aurora.Frontend.Views.Songs;
using Aurora.Frontend.Views.Stations;
namespace Aurora.Frontend.Views.MainView
{
public class MainViewModel : BaseViewModel
{
private ObservableCollection<NavigationItem> _pages;
public ObservableCollection<NavigationItem> Pages
{
get { return _pages; }
set
{
if(value != _pages)
{
_pages = value;
OnPropertyChanged("Pages");
}
}
}
public MainViewModel()
{
_pages = new ObservableCollection<NavigationItem>(new[]
{
new NavigationItem { Id = 0, Title = "Songs", Group="Library", TargetType = typeof(SongsView) },
new NavigationItem { Id = 1, Title = "Artists", Group="Library", TargetType = typeof(ArtistsView)},
new NavigationItem { Id = 2, Title = "Albums", Group="Library", TargetType = typeof(AlbumsView)},
new NavigationItem { Id = 3, Title = "Stations", Group="Library", TargetType = typeof(StationsView)},
});
}
}
}

View File

@ -1,41 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Aurora.Frontend.Views.Main.NavigationMenu"
Title="asdf">
<StackLayout>
<ListView x:Name="MenuItemsListView"
SeparatorVisibility="None"
HasUnevenRows="true"
BackgroundColor="{StaticResource MenuBackgroundColor}"
CachingStrategy="RecycleElement"
ItemsSource="{Binding MenuItems}">
<ListView.Header>
<Grid BackgroundColor="#03A9F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="80" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Label Grid.Column="1" Grid.Row="2" Text="AppName" Style="{DynamicResource SubtitleStyle}" />
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
<Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding Title}" FontSize="24" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>

View File

@ -1,56 +0,0 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace Aurora.Frontend.Views.Main
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class NavigationMenu : ContentPage
{
public ListView ListView;
public NavigationMenu()
{
InitializeComponent();
BindingContext = new MainViewMasterViewModel();
ListView = MenuItemsListView;
}
class MainViewMasterViewModel : INotifyPropertyChanged
{
public ObservableCollection<NavigationItem> MenuItems { get; set; }
public MainViewMasterViewModel()
{
MenuItems = new ObservableCollection<NavigationItem>(new[]
{
new NavigationItem { Id = 0, Title = "Page 1" },
new NavigationItem { Id = 1, Title = "Page 2" },
new NavigationItem { Id = 2, Title = "Page 3" },
new NavigationItem { Id = 3, Title = "Page 4" },
new NavigationItem { Id = 4, Title = "Page 5" },
});
}
#region INotifyPropertyChanged Implementation
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged == null)
return;
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
}
}

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Aurora.Frontend.Views.Songs.SongsView">
<ContentPage.Content>
<Label Text="Songs" />
</ContentPage.Content>
</ContentPage>

View File

@ -0,0 +1,15 @@
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace Aurora.Frontend.Views.Songs
{
public partial class SongsView : ContentPage
{
public SongsView()
{
InitializeComponent();
}
}
}

View File

@ -0,0 +1,10 @@
using System;
namespace Aurora.Frontend.Views.Songs
{
public class SongsViewModel
{
public SongsViewModel()
{
}
}
}

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Aurora.Frontend.Views.Stations.StationsView">
<ContentPage.Content>
</ContentPage.Content>
</ContentPage>

View File

@ -0,0 +1,15 @@
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace Aurora.Frontend.Views.Stations
{
public partial class StationsView : ContentPage
{
public StationsView()
{
InitializeComponent();
}
}
}

View File

@ -0,0 +1,10 @@
using System;
namespace Aurora.Frontend.Views.Stations
{
public class StationsViewModel
{
public StationsViewModel()
{
}
}
}