diff --git a/MaterialDesignControls.nuspec b/MaterialDesignControls.nuspec index d45e0565..459f1ba6 100755 --- a/MaterialDesignControls.nuspec +++ b/MaterialDesignControls.nuspec @@ -2,7 +2,7 @@ Plugin.MaterialDesignControls - 3.1.2 + 3.1.3 MaterialDesignControls Plugin for Xamarin Forms Horus AgustinBonillaHorus diff --git a/MaterialDialog.md b/MaterialDialog.md index 31b0687d..fc8c9fb8 100644 --- a/MaterialDialog.md +++ b/MaterialDialog.md @@ -138,14 +138,18 @@ This property is to set the corner radius of cancel button.
### Property CancelCommand: -This property is to the command of the cancel button. +This property is to set the command of the cancel button.
### Property CancelIsBusy: This property is to show a busy indicator in the cancel button when a command is running.
-### Property AcceptIsEnabled: +### Property CancelIsVisible: +This property is to set if the cancel button is visible or hidden. +
+ +### Property CancelIsEnabled: This property is to set if the cancel button is enabled or disabled.
@@ -174,13 +178,18 @@ This property is to set the corner radius of accept button.
### Property AcceptCommand: -This property is to the command of the accept button. +This property is to set the command of the accept button. +If the ItemSource property has a bound list, this command will receive as a parameter the selected item if it is a single selection or a list of selected items if it is multiple selection (AllowMultiselect).
### Property AcceptIsBusy: This property is to show a busy indicator in the accept button when a command is running.
+### Property AcceptIsVisible: +This property is to set if the accept button is visible or hidden. +
+ ### Property AcceptIsEnabled: This property is to set if the accept button is enabled or disabled.
@@ -225,6 +234,11 @@ This property is to the font size of the search text. This property is to the font family of the search text.
+### Property QuickSelectionCommand: +This property is to set a quick selection command which will be invoked as soon as the user selects any item from the list. +This command will receive as a parameter the selected item. +
+ ### Property AllowMultiselect: This property is to set if the control will allow multiple selection of items or not.
diff --git a/MaterialNavigationDrawerControl.md b/MaterialNavigationDrawerControl.md index 70d37d08..fb5e4f37 100644 --- a/MaterialNavigationDrawerControl.md +++ b/MaterialNavigationDrawerControl.md @@ -68,6 +68,14 @@ This property is to set the section label text font size. This property is to set the section label text font family.
+### Property SectionDividerIsVisible: +This property is to set if the section's divider is visible or hidden. +
+ +### Property ItemDividerIsVisible: +This property is to set if the item's divider is visible or hidden. +
+ ### Property DividerColor: This property is to set the divider color.
@@ -98,15 +106,23 @@ Its definition is: - Text (string) : Text showed - BadgeText (string) : Text showed in the badge - Section (string) : This property is to dive the items in sections -- SelectedIcon (string): Icon used when item is selected -- CustomSelectedIcon (view): Custom view used the item is selected -- UnselectedIcon (string): Icon used when item is Unselected -- CustomUnselectedIcon (view): Custom view used when item is Unselected +- SelectedLeadingIcon (string): Leading icon used when item is selected +- CustomSelectedLeadingIcon (view): Custom leading view used the item is selected +- UnselectedLeadingIcon (string): Leading icon used when item is Unselected +- CustomUnselectedLeadingIcon (view): Custom leading view used when item is Unselected +- SelectedTrailingIcon (string): Trailing icon used when item is selected +- CustomSelectedTrailingIcon (view): Custom trailing view used the item is selected +- UnselectedTrailingIcon (string): Trailing icon used when item is Unselected +- CustomUnselectedTrailingIcon (view): Custom trailing view used when item is Unselected - IsSelected (bool) : by default you can select an item - ShowActivityIndicator (bool) : show the activity indicator when the item is selected. By default is true. - IsEnabled (bool) : enable or disabled the item. by default is true.
+### Property ItemHeightRequest: +This property is to set the height request of each item. +
+ ### Property Command This property is to bind on the viewmodel.
diff --git a/example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml b/example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml index 0cea87dd..541265bd 100644 --- a/example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml +++ b/example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml @@ -161,7 +161,9 @@ + MaximumContainerHeightRequest="300" + Opened="materialBottomSheet4_Opened" + Closed="materialBottomSheet4_Closed"> @@ -205,7 +207,7 @@ diff --git a/example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml.cs b/example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml.cs index 8dcc5aaf..eae95a04 100644 --- a/example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml.cs +++ b/example/ExampleMaterialDesignControls/Pages/MaterialBottomSheetPage.xaml.cs @@ -19,5 +19,15 @@ public MaterialBottomSheetPage(bool isModalPage = false) CloseBottomSheetControl = async (controlName) => await this.FindByName(controlName).Close() }; } + + void materialBottomSheet4_Opened(System.Object sender, System.EventArgs e) + { + System.Diagnostics.Debug.WriteLine("Opened!!!!!"); + } + + void materialBottomSheet4_Closed(System.Object sender, System.EventArgs e) + { + System.Diagnostics.Debug.WriteLine("Closed!!!!!"); + } } } \ No newline at end of file diff --git a/example/ExampleMaterialDesignControls/Pages/MaterialNavigationDrawerPage.xaml b/example/ExampleMaterialDesignControls/Pages/MaterialNavigationDrawerPage.xaml index ffdf5531..92ee450b 100644 --- a/example/ExampleMaterialDesignControls/Pages/MaterialNavigationDrawerPage.xaml +++ b/example/ExampleMaterialDesignControls/Pages/MaterialNavigationDrawerPage.xaml @@ -29,6 +29,10 @@ HorizontalTextAlignment="Center" Text="Sample" /> + + _items; public ObservableCollection Items @@ -19,76 +20,103 @@ public ObservableCollection Items public MaterialNavigationDrawerViewModel() { - Items = new ObservableCollection + LoadItems(_includeAllItems); + } + + private void LoadItems(bool includeAllItems) + { + var list = new List { new MaterialNavigationDrawerItem { - SelectedIcon = "email.png", - UnselectedIcon = "email.png", + SelectedLeadingIcon = "email.png", + UnselectedLeadingIcon = "email.png", + SelectedTrailingIcon = "arrow_drop_down.png", + UnselectedTrailingIcon = "arrow_drop_down.png", Text = "Inbox", BadgeText = "24" }, new MaterialNavigationDrawerItem { - SelectedIcon = "email.png", - UnselectedIcon = "email.png", + SelectedLeadingIcon = "email.png", + UnselectedLeadingIcon = "email.png", Text = "Outbox", BadgeText = "100+" }, new MaterialNavigationDrawerItem { Text = "Favorites (Different icons)", - SelectedIcon = "starSelected.png", - UnselectedIcon = "starUnselected.png", + SelectedLeadingIcon = "starSelected.png", + UnselectedLeadingIcon = "starUnselected.png", }, new MaterialNavigationDrawerItem { - SelectedIcon = "delete.png", - UnselectedIcon = "delete.png", + SelectedLeadingIcon = "delete.png", + UnselectedLeadingIcon = "delete.png", Text = "Trash", }, new MaterialNavigationDrawerItem { Section = "Other samples", - SelectedIcon = "Payment.png", - UnselectedIcon = "Payment.png", + SelectedLeadingIcon = "Payment.png", + UnselectedLeadingIcon = "Payment.png", Text = "Selected by default", IsSelected = true }, - new MaterialNavigationDrawerItem - { - Section = "Other samples", - SelectedIcon = "Payment.png", - UnselectedIcon = "Payment.png", - Text = "Disabled", - IsEnabled = false - }, - new MaterialNavigationDrawerItem - { - Section = "Other samples", - SelectedIcon = "Payment.png", - UnselectedIcon = "Payment.png", - Text = "Don't show active indicator", - ShowActiveIndicator = false - }, - new MaterialNavigationDrawerItem - { - Section = "Other samples", - CustomSelectedIcon = new FFImageLoading.Svg.Forms.SvgCachedImage { Source = "resource://ExampleMaterialDesignControls.Resources.Svg.volume_blue.svg" }, - CustomUnselectedIcon = new FFImageLoading.Svg.Forms.SvgCachedImage { Source = "resource://ExampleMaterialDesignControls.Resources.Svg.volume.svg" }, - Text = "Custom icon", - }, - new MaterialNavigationDrawerItem - { - Section = "Other samples", - Text = "Without icon", - } + }; + + if (includeAllItems) + { + list.AddRange(new List + { + new MaterialNavigationDrawerItem + { + Section = "Other samples", + SelectedLeadingIcon = "Payment.png", + UnselectedLeadingIcon = "Payment.png", + Text = "Disabled", + IsEnabled = false + }, + new MaterialNavigationDrawerItem + { + Section = "Other samples", + SelectedLeadingIcon = "Payment.png", + UnselectedLeadingIcon = "Payment.png", + Text = "Don't show active indicator", + ShowActiveIndicator = false + }, + new MaterialNavigationDrawerItem + { + Section = "Other samples", + CustomSelectedLeadingIcon = new FFImageLoading.Svg.Forms.SvgCachedImage { Source = "resource://ExampleMaterialDesignControls.Resources.Svg.volume_blue.svg" }, + CustomUnselectedLeadingIcon = new FFImageLoading.Svg.Forms.SvgCachedImage { Source = "resource://ExampleMaterialDesignControls.Resources.Svg.volume.svg" }, + CustomSelectedTrailingIcon = new FFImageLoading.Svg.Forms.SvgCachedImage { Source = "resource://ExampleMaterialDesignControls.Resources.Svg.volume_blue.svg" }, + CustomUnselectedTrailingIcon = new FFImageLoading.Svg.Forms.SvgCachedImage { Source = "resource://ExampleMaterialDesignControls.Resources.Svg.volume.svg" }, + Text = "Custom icon", + }, + new MaterialNavigationDrawerItem + { + Section = "Other samples", + Text = "Without icon", + } + }); + } + + Items = new ObservableCollection(list); + } + + [ICommand] + private async Task Test(MaterialNavigationDrawerItem selectedItem) + { + await this.DisplayAlert.Invoke("Navigation Item", $"{selectedItem}", "Ok"); } - public ICommand TestCommand => new Command(async (obj) => + [ICommand] + private async Task ChangeItemsSource() { - await this.DisplayAlert.Invoke("Navigation Item", $"{obj}", "Ok"); - }); + _includeAllItems = !_includeAllItems; + LoadItems(_includeAllItems); + } } } \ No newline at end of file diff --git a/src/MaterialDesignControls/ControlsMaterial3/MaterialBottomSheet.cs b/src/MaterialDesignControls/ControlsMaterial3/MaterialBottomSheet.cs index 659a0d66..2f651496 100644 --- a/src/MaterialDesignControls/ControlsMaterial3/MaterialBottomSheet.cs +++ b/src/MaterialDesignControls/ControlsMaterial3/MaterialBottomSheet.cs @@ -202,6 +202,10 @@ public bool DismissWhenScrimIsTapped set { SetValue(DismissWhenScrimIsTappedProperty, value); } } + public event EventHandler Opened; + + public event EventHandler Closed; + #endregion Bindable properties #region Constructors @@ -432,14 +436,22 @@ public async Task Open() { try { + IsVisible = true; await Task.WhenAll ( _scrimBoxView.FadeTo(ScrimOpacity, length: (uint)AnimationDuration), _sheetView.TranslateTo(0, _openPosition, length: (uint)AnimationDuration, easing: Easing.SinIn) ); + var raiseOpened = !IsOpened; + IsOpened = true; + if (raiseOpened) + { + Opened?.Invoke(this, null); + } + InputTransparent = _scrimBoxView.InputTransparent = false; } catch (Exception ex) @@ -457,9 +469,17 @@ await Task.WhenAll _scrimBoxView.FadeTo(0, length: (uint)AnimationDuration), _containerView.Content.TranslateTo(x: 0, y: TranslationYClosed, length: (uint)AnimationDuration, easing: Easing.SinIn) ); + IsVisible = false; + + var raiseClosed = IsOpened; IsOpened = false; + if (raiseClosed) + { + Closed?.Invoke(this, null); + } + InputTransparent = _scrimBoxView.InputTransparent = true; } catch (Exception ex) diff --git a/src/MaterialDesignControls/ControlsMaterial3/MaterialButton.cs b/src/MaterialDesignControls/ControlsMaterial3/MaterialButton.cs index 39a93b03..84058f2e 100644 --- a/src/MaterialDesignControls/ControlsMaterial3/MaterialButton.cs +++ b/src/MaterialDesignControls/ControlsMaterial3/MaterialButton.cs @@ -338,6 +338,15 @@ public bool ContentIsExpanded set { SetValue(MinimumWidthRequestProperty, value); } } + public static new readonly BindableProperty HeightRequestProperty = + BindableProperty.Create(nameof(HeightRequest), typeof(double), typeof(MaterialButton), defaultValue: 40.0); + + public new double HeightRequest + { + get { return (double)GetValue(HeightRequestProperty); } + set { SetValue(HeightRequestProperty, value); } + } + public event EventHandler Clicked; #endregion Bindable properties @@ -361,8 +370,8 @@ private void Initialize() { _initialized = true; - MinimumHeightRequest = 40; - HeightRequest = 40; + base.MinimumHeightRequest = HeightRequest; + base.HeightRequest = HeightRequest; _frameLayout = new Frame { @@ -573,6 +582,10 @@ protected override void OnPropertyChanged([CallerMemberName] string propertyName WidthRequest = MinimumWidthRequest; } break; + + case nameof(base.HeightRequest): + base.HeightRequest = HeightRequest; + break; } } diff --git a/src/MaterialDesignControls/ControlsMaterial3/MaterialDialog.cs b/src/MaterialDesignControls/ControlsMaterial3/MaterialDialog.cs index 1de5ca78..ba5f5f58 100644 --- a/src/MaterialDesignControls/ControlsMaterial3/MaterialDialog.cs +++ b/src/MaterialDesignControls/ControlsMaterial3/MaterialDialog.cs @@ -117,6 +117,15 @@ public LayoutOptions IconAlignment set { SetValue(IconAlignmentProperty, value); } } + public static readonly BindableProperty ButtonsAlignmentProperty = + BindableProperty.Create(nameof(ButtonsAlignment), typeof(LayoutOptions), typeof(MaterialDialog), defaultValue: LayoutOptions.End); + + public LayoutOptions ButtonsAlignment + { + get { return (LayoutOptions)GetValue(ButtonsAlignmentProperty); } + set { SetValue(ButtonsAlignmentProperty, value); } + } + #endregion Properties #region Headline @@ -295,6 +304,15 @@ public ICommand CancelCommand set { SetValue(CancelCommandProperty, value); } } + public static readonly BindableProperty CancelIsVisibleProperty = + BindableProperty.Create(nameof(CancelIsVisible), typeof(bool), typeof(MaterialDialog), defaultValue: true); + + public bool CancelIsVisible + { + get { return (bool)GetValue(CancelIsVisibleProperty); } + set { SetValue(CancelIsVisibleProperty, value); } + } + public static readonly BindableProperty CancelIsEnabledProperty = BindableProperty.Create(nameof(CancelIsEnabled), typeof(bool), typeof(MaterialDialog), defaultValue: true); @@ -327,7 +345,7 @@ public float CancelCornerRadius #region AcceptButton public static readonly BindableProperty AcceptTextProperty = - BindableProperty.Create(nameof(AcceptText), typeof(string), typeof(MaterialDialog), defaultValue: "AcceptText"); + BindableProperty.Create(nameof(AcceptText), typeof(string), typeof(MaterialDialog), defaultValue: "OK"); public string AcceptText { @@ -380,6 +398,15 @@ public ICommand AcceptCommand set { SetValue(AcceptCommandProperty, value); } } + public static readonly BindableProperty AcceptIsVisibleProperty = + BindableProperty.Create(nameof(AcceptIsVisible), typeof(bool), typeof(MaterialDialog), defaultValue: true); + + public bool AcceptIsVisible + { + get { return (bool)GetValue(AcceptIsVisibleProperty); } + set { SetValue(AcceptIsVisibleProperty, value); } + } + public static readonly BindableProperty AcceptIsEnabledProperty = BindableProperty.Create(nameof(AcceptIsEnabled), typeof(bool), typeof(MaterialDialog), defaultValue: true); @@ -409,15 +436,6 @@ public float AcceptCornerRadius #endregion AcceptButton - public static readonly BindableProperty ButtonsAlignmentProperty = - BindableProperty.Create(nameof(ButtonsAlignment), typeof(LayoutOptions), typeof(MaterialDialog), defaultValue: LayoutOptions.End); - - public LayoutOptions ButtonsAlignment - { - get { return (LayoutOptions)GetValue(ButtonsAlignmentProperty); } - set { SetValue(ButtonsAlignmentProperty, value); } - } - #region Search public static readonly BindableProperty ShowSearchProperty = @@ -487,6 +505,15 @@ public string SearchTextFontFamily #region Items + public static readonly BindableProperty QuickSelectionCommandProperty = + BindableProperty.Create(nameof(QuickSelectionCommand), typeof(ICommand), typeof(MaterialDialog), defaultValue: null); + + public ICommand QuickSelectionCommand + { + get { return (ICommand)GetValue(QuickSelectionCommandProperty); } + set { SetValue(QuickSelectionCommandProperty, value); } + } + public static readonly BindableProperty AllowMultiselectProperty = BindableProperty.Create(nameof(AllowMultiselect), typeof(bool), typeof(MaterialDialog), defaultValue: false); @@ -710,6 +737,10 @@ protected override void OnPropertyChanged([CallerMemberName] string propertyName _cancelBtn.FontFamily = CancelFontFamily; break; + case nameof(CancelIsVisible): + _cancelBtn.IsVisible = CancelIsVisible; + break; + case nameof(CancelIsEnabled): _cancelBtn.IsEnabled = CancelIsEnabled; break; @@ -742,6 +773,10 @@ protected override void OnPropertyChanged([CallerMemberName] string propertyName _acceptBtn.FontFamily = AcceptFontFamily; break; + case nameof(AcceptIsVisible): + _acceptBtn.IsVisible = AcceptIsVisible; + break; + case nameof(AcceptIsEnabled): _acceptBtn.IsEnabled = AcceptIsEnabled; break; @@ -924,9 +959,10 @@ private void Initialize() FontFamily = CancelFontFamily, BackgroundColor = CancelBackgroundColor, Command = CancelCommand, - IsVisible = !string.IsNullOrWhiteSpace(CancelText), MinimumWidthRequest = 80, - CornerRadius = CancelCornerRadius + CornerRadius = CancelCornerRadius, + IsVisible = CancelIsVisible, + IsEnabled = CancelIsEnabled }; _acceptBtn = new MaterialButton @@ -940,7 +976,9 @@ private void Initialize() Margin = new Thickness(0), Command = AcceptCommand, MinimumWidthRequest = 80, - CornerRadius = AcceptCornerRadius + CornerRadius = AcceptCornerRadius, + IsVisible = AcceptIsVisible, + IsEnabled = AcceptIsEnabled }; _btnsContainer.Children.Add(_cancelBtn); @@ -993,7 +1031,7 @@ private void RefreshItemList(IEnumerable list) _optionsContainer.Children.Add(materialCheckbox); } - if (AllowMultiselect) + if (AllowMultiselect && QuickSelectionCommand == null) _acceptBtn.CommandParameter = ItemsSource.Where(x => x.IsSelected).ToList(); else _acceptBtn.CommandParameter = ItemsSource.FirstOrDefault(x => x.IsSelected); @@ -1041,6 +1079,9 @@ private static void SelectionCommand(MaterialDialog materialDialog, MaterialChec { selectedItem.IsSelected = true; materialDialog._acceptBtn.CommandParameter = selectedItem; + + if (materialDialog.QuickSelectionCommand != null) + materialDialog.QuickSelectionCommand.Execute(selectedItem); } else materialDialog._acceptBtn.CommandParameter = null; diff --git a/src/MaterialDesignControls/ControlsMaterial3/MaterialNavigationDrawer.cs b/src/MaterialDesignControls/ControlsMaterial3/MaterialNavigationDrawer.cs index 59db61d4..d810bf0e 100644 --- a/src/MaterialDesignControls/ControlsMaterial3/MaterialNavigationDrawer.cs +++ b/src/MaterialDesignControls/ControlsMaterial3/MaterialNavigationDrawer.cs @@ -32,7 +32,7 @@ public MaterialNavigationDrawer() private StackLayout _itemsContainer; - Dictionary containersWithItems = new Dictionary(); + private Dictionary _containersWithItems = new Dictionary(); #endregion Attributes @@ -155,6 +155,24 @@ public string SectionLabelFontFamily set { SetValue(SectionLabelFontFamilyProperty, value); } } + public static readonly BindableProperty SectionDividerIsVisibleProperty = + BindableProperty.Create(nameof(SectionDividerIsVisible), typeof(bool), typeof(MaterialNavigationDrawer), defaultValue: true); + + public bool SectionDividerIsVisible + { + get { return (bool)GetValue(SectionDividerIsVisibleProperty); } + set { SetValue(SectionDividerIsVisibleProperty, value); } + } + + public static readonly BindableProperty ItemDividerIsVisibleProperty = + BindableProperty.Create(nameof(ItemDividerIsVisible), typeof(bool), typeof(MaterialNavigationDrawer), defaultValue: false); + + public bool ItemDividerIsVisible + { + get { return (bool)GetValue(ItemDividerIsVisibleProperty); } + set { SetValue(ItemDividerIsVisibleProperty, value); } + } + public static readonly BindableProperty DividerColorProperty = BindableProperty.Create(nameof(DividerColor), typeof(Color), typeof(MaterialNavigationDrawer), defaultValue: MaterialColor.OutlineVariant); @@ -219,6 +237,15 @@ public IEnumerable ItemsSource set { SetValue(ItemsSourceProperty, value); } } + public static readonly BindableProperty ItemHeightRequestProperty = + BindableProperty.Create(nameof(ItemHeightRequest), typeof(double), typeof(MaterialDivider), defaultValue: 56.0); + + public double ItemHeightRequest + { + get { return (double)GetValue(ItemHeightRequestProperty); } + set { SetValue(ItemHeightRequestProperty, value); } + } + public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(MaterialNavigationDrawer), defaultValue: null); @@ -351,6 +378,7 @@ private static void OnItemsSourceChanged(BindableObject bindable, object oldValu private void SetItemSource() { _itemsContainer.Children.Clear(); + _containersWithItems.Clear(); if (ItemsSource != null) { @@ -369,7 +397,9 @@ private void SetItemSource() label.FontFamily = SectionLabelFontFamily; label.TextColor = SectionLabelColor; label.Padding = new Thickness(12, 0); - label.Margin = new Thickness(0, 0, 0, 16); + + var topLabelMargin = SectionDividerIsVisible ? 0 : 16; + label.Margin = new Thickness(0, topLabelMargin, 0, 16); _itemsContainer.Children.Add(label); } @@ -378,7 +408,7 @@ private void SetItemSource() { string key = item.Section + "-" + item.Text; - if (containersWithItems.ContainsKey(key)) + if (_containersWithItems.ContainsKey(key)) { continue; } @@ -387,8 +417,8 @@ private void SetItemSource() frame.HasShadow = false; frame.BorderColor = Color.Transparent; frame.Padding = new Thickness(16, 0); - frame.HeightRequest = 56; - frame.MinimumHeightRequest = 56; + frame.HeightRequest = ItemHeightRequest; + frame.MinimumHeightRequest = ItemHeightRequest; frame.HorizontalOptions = LayoutOptions.FillAndExpand; frame.VerticalOptions = LayoutOptions.Fill; frame.BackgroundColor = item.IsSelected ? ActiveIndicatorBackgroundColor : Color.Transparent; @@ -402,37 +432,38 @@ private void SetItemSource() { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, - ColumnSpacing = 0, + ColumnSpacing = 12, }; contentContainer.ColumnDefinitions = new ColumnDefinitionCollection() { new ColumnDefinition { Width = GridLength.Auto }, new ColumnDefinition { Width = GridLength.Star }, + new ColumnDefinition { Width = GridLength.Auto }, new ColumnDefinition { Width = GridLength.Auto } }; - var icon = new CustomImage() + var iconLeading = new CustomImage() { HeightRequest = 24, MinimumHeightRequest = 24, WidthRequest = 24, MinimumWidthRequest = 24, VerticalOptions = LayoutOptions.Center, - Margin = new Thickness(0, 0, 12, 0), Padding = new Thickness(0), IsVisible = false }; - icon.SetValue(Grid.ColumnProperty, 0); + iconLeading.SetValue(Grid.ColumnProperty, 0); - var label = new Label(); - label.Text = item.Text.Trim(); - label.VerticalTextAlignment = TextAlignment.Center; - label.FontSize = LabelFontSize; - label.FontFamily = LabelFontFamily; - label.TextColor = item.IsEnabled ? item.IsSelected ? ActiveIndicatorLabelColor : LabelColor : DisabledLabelColor; - label.Padding = new Thickness(0,0, 12, 0); + var label = new Label + { + Text = item.Text.Trim(), + VerticalTextAlignment = TextAlignment.Center, + FontSize = LabelFontSize, + FontFamily = LabelFontFamily, + TextColor = item.IsEnabled ? item.IsSelected ? ActiveIndicatorLabelColor : LabelColor : DisabledLabelColor + }; label.SetValue(Grid.ColumnProperty, 1); @@ -449,9 +480,23 @@ private void SetItemSource() badge.SetValue(Grid.ColumnProperty, 2); - contentContainer.Children.Add(icon); + var iconTrailing = new CustomImage() + { + HeightRequest = 24, + MinimumHeightRequest = 24, + WidthRequest = 24, + MinimumWidthRequest = 24, + VerticalOptions = LayoutOptions.Center, + Padding = new Thickness(0), + IsVisible = false + }; + + iconTrailing.SetValue(Grid.ColumnProperty, 3); + + contentContainer.Children.Add(iconLeading); contentContainer.Children.Add(label); contentContainer.Children.Add(badge); + contentContainer.Children.Add(iconTrailing); frame.Content = contentContainer; @@ -472,48 +517,63 @@ private void SetItemSource() { insideItem.IsSelected = false; string insideKey = insideItem.Section + "-" + insideItem.Text; - var container = containersWithItems[insideKey]; - SetContentAndColors(container.Container, container.Icon, container.Label, insideItem); + var container = _containersWithItems[insideKey]; + SetContentAndColors(container.Container, container.LeadingIcon, container.TrailingIcon, container.Label, insideItem); } } } item.IsSelected = !item.IsSelected; - SetContentAndColors(frame, icon, label, item); + SetContentAndColors(frame, iconLeading, iconTrailing, label, item); if (item.IsEnabled && Command != null && Command.CanExecute(item)) Command.Execute(item); }); - containersWithItems.Add(key, new NavigationDrawerContainerForObjects() + _containersWithItems.Add(key, new NavigationDrawerContainerForObjects() { Container = frame, - Icon = icon, + LeadingIcon = iconLeading, + TrailingIcon = iconTrailing, Label = label }); - SetContentAndColors(frame, icon, label, item); + SetContentAndColors(frame, iconLeading, iconTrailing, label, item); _itemsContainer.Children.Add(frame); + + if (ItemDividerIsVisible) + { + var divider = new MaterialDivider() + { + Color = DividerColor, + Margin = new Thickness(8, 0) + }; + + _itemsContainer.Children.Add(divider); + } } - var divider = new MaterialDivider() + if (SectionDividerIsVisible) { - Color = DividerColor, - Margin = new Thickness(0, 16) - }; + var divider = new MaterialDivider() + { + Color = DividerColor, + Margin = new Thickness(0, 16) + }; - if (itemIdx++ != groupedItems.Count()) - { - _itemsContainer.Children.Add(divider); + if (itemIdx++ != groupedItems.Count()) + { + _itemsContainer.Children.Add(divider); + } } } } } - private void SetContentAndColors(MaterialCard frame, CustomImage icon, Label label, MaterialNavigationDrawerItem item) + private void SetContentAndColors(MaterialCard frame, CustomImage leadingIcon, CustomImage trailingIcon, Label label, MaterialNavigationDrawerItem item) { - SetIcons(icon, item); + SetIcons(leadingIcon, trailingIcon, item); if (!item.ShowActiveIndicator) { @@ -524,47 +584,82 @@ private void SetContentAndColors(MaterialCard frame, CustomImage icon, Label lab label.TextColor = item.IsEnabled ? item.IsSelected ? ActiveIndicatorLabelColor : LabelColor : DisabledLabelColor; } - public void SetIcons(CustomImage icon, MaterialNavigationDrawerItem item) + public void SetIcons(CustomImage leadingIcon, CustomImage trailingIcon, MaterialNavigationDrawerItem item) { - if (item.IsSelected) { - if (item.SelectedIconIsVisible) + if (item.SelectedLeadingIconIsVisible) + { + leadingIcon.IsVisible = true; + + if (item.CustomSelectedLeadingIcon != null) + { + leadingIcon.SetCustomImage(item.CustomSelectedLeadingIcon); + } + else if (!string.IsNullOrWhiteSpace(item.SelectedLeadingIcon)) + { + leadingIcon.SetImage(item.SelectedLeadingIcon); + } + } + else if (item.UnselectedLeadingIconIsVisible) + { + leadingIcon.IsVisible = false; + } + + if (item.SelectedTrailingIconIsVisible) { - icon.IsVisible = true; + trailingIcon.IsVisible = true; - if (item.CustomSelectedIcon != null) + if (item.CustomSelectedTrailingIcon != null) { - icon.SetCustomImage(item.CustomSelectedIcon); + trailingIcon.SetCustomImage(item.CustomSelectedTrailingIcon); } - else if (!string.IsNullOrWhiteSpace(item.SelectedIcon)) + else if (!string.IsNullOrWhiteSpace(item.SelectedTrailingIcon)) { - icon.SetImage(item.SelectedIcon); + trailingIcon.SetImage(item.SelectedTrailingIcon); } } - else if (item.UnselectedIconIsVisible) + else if (item.UnselectedTrailingIconIsVisible) { - icon.IsVisible = false; + trailingIcon.IsVisible = false; } } else { - if (item.UnselectedIconIsVisible) + if (item.UnselectedLeadingIconIsVisible) { - icon.IsVisible = true; + leadingIcon.IsVisible = true; - if (item.CustomUnselectedIcon != null) + if (item.CustomUnselectedLeadingIcon != null) { - icon.SetCustomImage(item.CustomUnselectedIcon); + leadingIcon.SetCustomImage(item.CustomUnselectedLeadingIcon); } - else if (!string.IsNullOrWhiteSpace(item.UnselectedIcon)) + else if (!string.IsNullOrWhiteSpace(item.UnselectedLeadingIcon)) { - icon.SetImage(item.UnselectedIcon); + leadingIcon.SetImage(item.UnselectedLeadingIcon); } } - else if (item.SelectedIconIsVisible) + else if (item.SelectedLeadingIconIsVisible) { - icon.IsVisible = false; + leadingIcon.IsVisible = false; + } + + if (item.UnselectedTrailingIconIsVisible) + { + trailingIcon.IsVisible = true; + + if (item.CustomUnselectedTrailingIcon != null) + { + trailingIcon.SetCustomImage(item.CustomUnselectedTrailingIcon); + } + else if (!string.IsNullOrWhiteSpace(item.UnselectedTrailingIcon)) + { + trailingIcon.SetImage(item.UnselectedTrailingIcon); + } + } + else if (item.SelectedTrailingIconIsVisible) + { + trailingIcon.IsVisible = false; } } } @@ -575,7 +670,9 @@ private class NavigationDrawerContainerForObjects { public MaterialCard Container { get; set; } - public CustomImage Icon { get; set; } + public CustomImage LeadingIcon { get; set; } + + public CustomImage TrailingIcon { get; set; } public Label Label { get; set; } } diff --git a/src/MaterialDesignControls/Objects/MaterialNavigationDrawerItem.cs b/src/MaterialDesignControls/Objects/MaterialNavigationDrawerItem.cs index e5d1d8f4..85ee43cc 100644 --- a/src/MaterialDesignControls/Objects/MaterialNavigationDrawerItem.cs +++ b/src/MaterialDesignControls/Objects/MaterialNavigationDrawerItem.cs @@ -10,13 +10,21 @@ public class MaterialNavigationDrawerItem public string Section { get; set; } - public string SelectedIcon { get; set; } + public string SelectedLeadingIcon { get; set; } - public View CustomSelectedIcon { get; set; } + public View CustomSelectedLeadingIcon { get; set; } - public string UnselectedIcon { get; set; } + public string UnselectedLeadingIcon { get; set; } - public View CustomUnselectedIcon { get; set; } + public View CustomUnselectedLeadingIcon { get; set; } + + public string SelectedTrailingIcon { get; set; } + + public View CustomSelectedTrailingIcon { get; set; } + + public string UnselectedTrailingIcon { get; set; } + + public View CustomUnselectedTrailingIcon { get; set; } public bool IsSelected { get; set; } @@ -24,14 +32,24 @@ public class MaterialNavigationDrawerItem public bool IsEnabled { get; set; } = true; - internal bool UnselectedIconIsVisible + internal bool UnselectedLeadingIconIsVisible + { + get { return !string.IsNullOrEmpty(UnselectedLeadingIcon) || CustomUnselectedLeadingIcon != null; } + } + + internal bool SelectedLeadingIconIsVisible + { + get { return !string.IsNullOrEmpty(SelectedLeadingIcon) || CustomSelectedLeadingIcon != null; } + } + + internal bool UnselectedTrailingIconIsVisible { - get { return !string.IsNullOrEmpty(UnselectedIcon) || CustomUnselectedIcon != null; } + get { return !string.IsNullOrEmpty(UnselectedTrailingIcon) || CustomUnselectedTrailingIcon != null; } } - internal bool SelectedIconIsVisible + internal bool SelectedTrailingIconIsVisible { - get { return !string.IsNullOrEmpty(SelectedIcon) || CustomSelectedIcon != null; } + get { return !string.IsNullOrEmpty(SelectedTrailingIcon) || CustomSelectedTrailingIcon != null; } } public override bool Equals(object obj)