Progress on party page styling

Aurora.gtk/Program.cs

@@ -11,6 +11,8 @@ namespace Aurora.gtk
         {
             Gtk.Application.Init();
             LibVLCSharpFormsRenderer.Init();
+            DLToolkit.Forms.Controls.FlowListView.Init();
+
             // For some reason, Xamarin does not pick the LibVLCSharp.Form.Platforms.Gtk assembly as a renderer assembly. 
             // Add it manually.
 

Aurora/App.css

@@ -0,0 +1,7 @@
+.primaryColor {
+    background-color: #232323;
+}
+
+.accentColor {
+    background-color: #3a3a3a;
+}

Aurora/App.xaml

@@ -24,6 +24,8 @@
                  x:Key="InverseBoolConverter"/>
             <converters:ToUpperConverter
                  x:Key="ToUpperConverter"/>
+            <StyleSheet
+                 Source="App.css"/>
         </ResourceDictionary>
     </Application.Resources>
 </Application>

Aurora/Design/Components/MemberList/MemberList.css

@@ -0,0 +1,12 @@
+Frame {
+    margin-left: 20;
+    margin-right: 20;
+    margin-top: 20;
+    margin-bottom: 20;
+    width: 80;
+}
+
+Frame Label {
+    color: black;
+    background-color: white;
+}

Aurora/Design/Components/MemberList/MemberList.xaml

@@ -3,23 +3,30 @@
      xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      xmlns:hl="clr-namespace:Aurora.Design.Components.HorizontalList"
+     xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
      x:Class="Aurora.Design.Components.MemberList.MemberList">
+    <ContentView.Resources>
+        <StyleSheet
+             Source="./MemberList.css"/>
+    </ContentView.Resources>
     <ContentView.Content>
-        <StackLayout>
+        <flv:FlowListView
-            <hl:HorizontalList
+             x:Name="MembersList"
-                 BackgroundColor="Red"
+             FlowColumnCount="8"
-                 x:Name="MembersHorizontalList"
+             RowHeight="150"
-                 ListOrientation="Horizontal"
+             VerticalOptions="FillAndExpand"
-                 VerticalOptions="Start">
+             SeparatorVisibility="None"
-                <hl:HorizontalList.ItemTemplate>
+             HasUnevenRows="false"
+             StyleClass="accentColor">
+            <flv:FlowListView.FlowColumnTemplate>
                 <DataTemplate>
                     <Frame>
                         <Label
-                                 Text="{Binding UserName}"/>
+                             Text="{Binding UserName}"
+                             TextColor="White"/>
                     </Frame>
                 </DataTemplate>
-                </hl:HorizontalList.ItemTemplate>
+            </flv:FlowListView.FlowColumnTemplate>
-            </hl:HorizontalList>
+        </flv:FlowListView>
-        </StackLayout>
     </ContentView.Content>
 </ContentView>

Aurora/Design/Components/MemberList/MemberList.xaml.cs

@@ -1,16 +1,16 @@
 using System;
 using System.Collections.ObjectModel;
 using System.Collections.Specialized;
+using System.Collections;
 using System.Linq;
 using Xamarin.Forms;
 using Aurora.Proto.Party;
+using DLToolkit.Forms.Controls;
 
 namespace Aurora.Design.Components.MemberList
 {
     public partial class MemberList : ContentView
     {
-        private static ObservableCollection<PartyMember> _newSource;
-        // private static NotifyCollectionChangedEventHandler _collectionChangedHandler;
         public MemberList()
         {
             InitializeComponent();
@@ -55,60 +55,11 @@ namespace Aurora.Design.Components.MemberList
         private static void OnMembersChanged(BindableObject bindable, object oldValue, object newValue)
         {
             var control = (MemberList)bindable;
-            var membersList = control.FindByName("MembersHorizontalList") as HorizontalList.HorizontalList;
+            var membersList = control.FindByName("MembersList") as FlowListView;
-            if (membersList != null)
-            {
-                _newSource = newValue as ObservableCollection<PartyMember>;
-                membersList.ItemsSource = new ObservableCollection<object>(_newSource);
 
-                //Setup collection changed listeners
+            if (newValue is ICollection source)
-                //TODO evaluate for memory leak
-                _newSource.CollectionChanged += (sender, e) => HandleCollectionChanged(sender, e, bindable);
-            }
-        }
-
-        private static void HandleCollectionChanged(object sender, NotifyCollectionChangedEventArgs e, BindableObject bindable)
             {
-            MemberList self = bindable as MemberList;
+                membersList.FlowItemsSource = source;
-            var membersList = self.FindByName("MembersHorizontalList") as HorizontalList.HorizontalList;
-
-            switch (e.Action)
-            {
-                case NotifyCollectionChangedAction.Add:
-                    {
-                        foreach (PartyMember member in e.NewItems)
-                        {
-                            membersList.ItemsSource.Add(member);
-                        }
-
-                        break;
-                    }
-                case NotifyCollectionChangedAction.Remove:
-                    {
-                        foreach (PartyMember member in e.NewItems)
-                        {
-                            //Find all matches
-                            var sourceMembers = membersList.ItemsSource.Where((object obj) =>
-                            {
-                                bool match = false;
-                                if (obj is PartyMember)
-                                {
-                                    PartyMember tmp = obj as PartyMember;
-                                    match = tmp.Id == member.Id;
-                                }
-
-                                return match;
-                            });
-
-                            //Remove found matches
-                            foreach (object obj in sourceMembers)
-                            {
-                                membersList.ItemsSource.Remove(obj);
-                            }
-                        }
-
-                        break;
-                    }
             }
         }
     }

Aurora/Design/Views/MainView/MainView.css

@@ -1,8 +1,4 @@
-^ContentPage {
+#Header {
-    background-color: #232323;
-}
-
-#Header {
     background-color: transparent;
     margin-top: 10;
 }

Aurora/Design/Views/MainView/MainView.xaml

@@ -6,7 +6,8 @@
      xmlns:navigation="clr-namespace:Aurora.Design.Components.NavigationMenu"
      xmlns:mp="clr-namespace:Aurora.Design.Components.MediaPlayer"
      xmlns:dialog="clr-namespace:Aurora.Design.Components.Dialogs"
-     x:Class="Aurora.Design.Views.Main.MainView">
+     x:Class="Aurora.Design.Views.Main.MainView"
+     StyleClass="primaryColor">
     <ContentPage.Resources>
         <StyleSheet
              Source="MainView.css"/>

Aurora/Design/Views/Party/PartyView.xaml

@@ -3,6 +3,7 @@
      xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      xmlns:tabView="clr-namespace:Aurora.Design.Components.TabView"
+     xmlns:ml="clr-namespace:Aurora.Design.Components.MemberList"
      xmlns:library="clr-namespace:Aurora.Design.Components.Library"
      xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
      x:Class="Aurora.Design.Views.Party.PartyView">
@@ -20,8 +21,10 @@
                 <tabView:TabViewControl.ItemSource>
                     <tabView:TabItem
                          HeaderText="Members">
-                        <Label
+                        <ml:MemberList
-                             Text="Members" TextColor="White"/>
+                             x:Name="MembersList"
+                             VerticalOptions="FillAndExpand"
+                             Members="{Binding Members}"/>
                     </tabView:TabItem>
                     <tabView:TabItem
                          HeaderText="Queue">