using Microsoft.Maui.Controls.Shapes; using System.Windows.Input; using UraniumUI.Triggers; namespace ToolHound6App.Controls { class TabItemWithBadge : Grid { public TabItemWithBadge() { //var grid = new Grid(); this.AddRowDefinition(new RowDefinition(30)); this.AddRowDefinition(new RowDefinition(GridLength.Auto)); this.AddRowDefinition(new RowDefinition(GridLength.Auto)); this.Opacity = .5; // ----------------------------------------------- var badgeText = new Label { FontSize = 12, FontAttributes = FontAttributes.Bold, HeightRequest = 24, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center, Padding = new Thickness(3), Margin = new Thickness(0,0,0,0) }; badgeText.SetBinding(Label.TextProperty, new Binding(nameof(BadgeText), source: this)); badgeText.SetBinding(Label.TextColorProperty, new Binding(nameof(BadgeTextColor), source: this)); // ----------------------------------------------- var badgeBorder = new Border { StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(10) }, StrokeThickness = 1, HeightRequest = 24, MinimumWidthRequest = 24, HorizontalOptions = LayoutOptions.End, VerticalOptions = LayoutOptions.Start, IsVisible = false, Padding = new Thickness(2), }; badgeBorder.SetBinding(Border.BackgroundColorProperty, new Binding(nameof(BadgeBackgroundColor), source: this)); badgeBorder.SetBinding(Border.StrokeProperty, new Binding(nameof(BadgeBackgroundColor), source: this)); badgeBorder.SetBinding(Border.IsVisibleProperty, new Binding(nameof(IsBadgeVisible), source: this)); // add label to the border badgeBorder.Content = badgeText; // add to the grid this.Add(badgeBorder, 0, 0); // ----------------------------------------------- var tabImage = new Image { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, HeightRequest = 20, BackgroundColor = Colors.Transparent }; tabImage.SetBinding(Image.SourceProperty, new Binding(nameof(ImageSource), source: this)); this.Add(tabImage, 0, 0); // ----------------------------------------------- var tabText = new Label { StyleClass = new[] { "TextButton" }, FontSize = 14, HeightRequest = 20, VerticalOptions = LayoutOptions.End, HorizontalOptions = LayoutOptions.Center, BackgroundColor = Colors.Transparent }; tabText.SetBinding(Label.TextProperty, new Binding(nameof(Title))); this.Add(tabText, 0, 1); this.Triggers.Add(new DataTrigger(typeof(Grid)) { Binding = new Binding(nameof(IsSelected), BindingMode.OneWay), Value = true, EnterActions = { new GenericTriggerAction((sender) => { sender.BackgroundColor = SelectedBackgroundColor.WithAlpha(.2f); var box = (sender.Children.FirstOrDefault(x => x is BoxView) as BoxView); if (box != null) { box.Color = SelectedTextColor; box.FadeTo(1, easing: Easing.SpringIn); sender.FadeTo(1); } var image = (sender.Children.FirstOrDefault(x => x is Image) as Image); if (image != null) { if (image.Source is FontImageSource fis) { FontImageSource newImage = new FontImageSource() { FontFamily = fis.FontFamily, Glyph = fis.Glyph, Color = SelectedTextColor, Size = fis.Size }; image.Source = newImage; } } var label = sender.Children.FirstOrDefault(x => x is Label) as Label; if (label != null) { label.TextColor = SelectedTextColor; } }) } }); this.Triggers.Add(new DataTrigger(typeof(Grid)) { Binding = new Binding(nameof(IsSelected), BindingMode.OneWay), Value = false, EnterActions = { new GenericTriggerAction((sender) => { sender.BackgroundColor = BackgroundColor; var box = (sender.Children.FirstOrDefault(x => x is BoxView) as BoxView); if (box != null) { box.Color = TextColor; box.FadeTo(0, easing: Easing.SpringIn); } var image = (sender.Children.FirstOrDefault(x => x is Image) as Image); if (image != null) { if (image.Source is FontImageSource fis) { FontImageSource newImage = new FontImageSource() { FontFamily = fis.FontFamily, Glyph = fis.Glyph, Color = TextColor, Size = fis.Size }; image.Source = newImage; } } sender.FadeTo(.5); var label = sender.Children.FirstOrDefault(x => x is Label) as Label; if (label != null) { label.TextColor = TextColor; } }) } }); // ----------------------------------------------- var selectionIndicator = new BoxView { HorizontalOptions = LayoutOptions.Fill, VerticalOptions = LayoutOptions.End, HeightRequest = 5, CornerRadius = 1, Opacity = 0, }; selectionIndicator.SetAppThemeColor(BoxView.ColorProperty, Common.GetColor("Primary").WithAlpha(.2f), Common.GetColor("PrimaryDark").WithAlpha(.2f)); this.Add(selectionIndicator, 0, 2); } public string Title { get { return base.GetValue(TitleProperty).ToString(); } set { base.SetValue(TitleProperty, value); } } public static readonly BindableProperty TitleProperty = BindableProperty.Create( propertyName: "Title", returnType: typeof(string), declaringType: typeof(TabItemWithBadge), defaultValue: "", defaultBindingMode: BindingMode.OneWay); public ICommand Command { get { return (ICommand)GetValue(CommandProperty); } set { SetValue(CommandProperty, value); } } public static readonly BindableProperty CommandProperty = BindableProperty.Create( propertyName: "Command", returnType: typeof(ICommand), declaringType: typeof(TabItemWithBadge), defaultValue: null, defaultBindingMode: BindingMode.OneWay); public bool IsSelected { get { return (bool)base.GetValue(IsSelectedProperty); } set { base.SetValue(IsSelectedProperty, value); } } public static readonly BindableProperty IsSelectedProperty = BindableProperty.Create( propertyName: "IsSelected", returnType: typeof(bool), declaringType: typeof(TabItemWithBadge), defaultValue: false, defaultBindingMode: BindingMode.OneWay); public ImageSource ImageSource { get { return (ImageSource)GetValue(ImageSourceProperty); } set { SetValue(ImageSourceProperty, value); } } public static readonly BindableProperty ImageSourceProperty = BindableProperty.Create( propertyName: "ImageSource", returnType: typeof(ImageSource), declaringType: typeof(TabItemWithBadge), defaultValue: null, defaultBindingMode: BindingMode.OneWay); public Color TextColor { get { return (Color)base.GetValue(TextColorProperty); } set { base.SetValue(TextColorProperty, value); } } public static readonly BindableProperty TextColorProperty = BindableProperty.Create( propertyName: "TextColor", returnType: typeof(Color), declaringType: typeof(TabItemWithBadge), defaultValue: Colors.Black, defaultBindingMode: BindingMode.OneWay, propertyChanged: TextColorChanged); private static void TextColorChanged(BindableObject bindable, object oldValue, object newValue) { var control = (TabItemWithBadge)bindable; var label = (control.Children.FirstOrDefault(x => x is Label) as Label); if (label != null) { if (newValue != null && control.IsSelected == false) { label.TextColor = (Color)newValue; } } } public new Color BackgroundColor { get { return (Color)base.GetValue(BackgroundColorProperty); } set { base.SetValue(BackgroundColorProperty, value); } } public static readonly BindableProperty BackgroundColorProperty = BindableProperty.Create( propertyName: "BackgroundColor", returnType: typeof(Color), declaringType: typeof(TabItemWithBadge), defaultValue: Colors.LightGray, defaultBindingMode: BindingMode.OneWay, propertyChanged: BackgroundColorChanged); private static void BackgroundColorChanged(BindableObject bindable, object oldValue, object newValue) { var control = (TabItemWithBadge)bindable; if (control != null) { if (newValue != null && control.IsSelected == false) { control.BackgroundColor = (Color)newValue; } } } public Color SelectedTextColor { get { return (Color)base.GetValue(SelectedTextColorProperty); } set { base.SetValue(SelectedTextColorProperty, value); } } public static readonly BindableProperty SelectedTextColorProperty = BindableProperty.Create( propertyName: "SelectedTextColor", returnType: typeof(Color), declaringType: typeof(TabItemWithBadge), defaultValue: Colors.White, defaultBindingMode: BindingMode.OneWay, propertyChanged: SelectedTextColorChanged); private static void SelectedTextColorChanged(BindableObject bindable, object oldValue, object newValue) { var control = (TabItemWithBadge)bindable; var label = (control.Children.FirstOrDefault(x => x is Label) as Label); if (label != null) { if (newValue != null && control.IsSelected == true) { label.TextColor = (Color)newValue; } } } public Color SelectedBackgroundColor { get { return (Color)base.GetValue(SelectedBackgroundColorProperty); } set { base.SetValue(SelectedBackgroundColorProperty, value); } } public static readonly BindableProperty SelectedBackgroundColorProperty = BindableProperty.Create( propertyName: "SelectedBackgroundColor", returnType: typeof(Color), declaringType: typeof(TabItemWithBadge), defaultValue: Colors.Red, defaultBindingMode: BindingMode.OneWay, propertyChanged: SelectedBackgroundColorChanged); private static void SelectedBackgroundColorChanged(BindableObject bindable, object oldValue, object newValue) { var control = (TabItemWithBadge)bindable; if (control != null) { if (newValue != null && control.IsSelected == true) { control.BackgroundColor = (Color)newValue; } } } public string BadgeText { get { return base.GetValue(BadgeTextProperty).ToString(); } set { base.SetValue(BadgeTextProperty, value); } } public static readonly BindableProperty BadgeTextProperty = BindableProperty.Create( propertyName: "BadgeText", returnType: typeof(string), declaringType: typeof(TabItemWithBadge), defaultValue: "", defaultBindingMode: BindingMode.OneWay); public bool IsBadgeVisible { get { return (bool)base.GetValue(IsBadgeVisibleProperty); } set { base.SetValue(IsBadgeVisibleProperty, value); } } public static readonly BindableProperty IsBadgeVisibleProperty = BindableProperty.Create( propertyName: "IsBadgeVisible", returnType: typeof(bool), declaringType: typeof(TabItemWithBadge), defaultValue: false, defaultBindingMode: BindingMode.OneWay); public Color BadgeTextColor { get { return (Color)base.GetValue(BadgeTextColorProperty); } set { base.SetValue(BadgeTextColorProperty, value); } } public static readonly BindableProperty BadgeTextColorProperty = BindableProperty.Create( propertyName: "BadgeTextColor", returnType: typeof(Color), declaringType: typeof(TabItemWithBadge), defaultValue: Colors.White, defaultBindingMode: BindingMode.OneWay); public Color BadgeBackgroundColor { get { return (Color)base.GetValue(BadgeBackgroundColorProperty); } set { base.SetValue(BadgeBackgroundColorProperty, value); } } public static readonly BindableProperty BadgeBackgroundColorProperty = BindableProperty.Create( propertyName: "BadgeBackgroundColor", returnType: typeof(Color), declaringType: typeof(TabItemWithBadge), defaultValue: Colors.Tomato, defaultBindingMode: BindingMode.OneWay); } }