Coder Social home page Coder Social logo

bulubuloa / xamarin-forms-tab-badge Goto Github PK

View Code? Open in Web Editor NEW

This project forked from xabre/xamarin-forms-tab-badge

0.0 1.0 0.0 6.59 MB

Xamarin Forms bindable Tab badges for iOS, Android, UWP, MacOS and WPF

License: MIT License

C# 94.88% PowerShell 5.12%

xamarin-forms-tab-badge's Introduction

xamarin-forms-tab-badge Build Status

Xamarin Forms bindable tab badges for iOS, Android, UWP, MacOS and WPF. The plugin creates a custom renderer (for each platform) and a custom attached property for adding tab bar badges which can be bound in XF shared code.

Sample

Support & Limitations

Feature / Availability Xamarin.Android (1) Xamarin.iOS UWP (2) MacOS (3) WPF (4)
Bindable Badge Text ✓ (>=8.0)
Bindable Badge Color ✓ (>= 10.0)
Bindable Badge Text Color ✓ (>= 10.0)
Bindable Badge Font ✓* ✓ *(>= 10.0)
Bindable Badge Postion
Bindable Badge Margin
Dynamic tab add/removal No overflow

*(1) Min Android API level 15, bottom placement also supported starting with v2.1.0

*(2) Min UWP version: Win 10 Fall Creators Update (XF.3 has a .netstandard 2 requirement).

*(3) MacOS version: -

*(4) WPF version: -

**Font restrictions: able to bind font attributes and family but not size

Installation

  • Make sure to install the package in your Xamarin.Forms shared/core project as well as a platform specifc projects.
// stable
Install-Package Plugin.Badge
// or pre-release
Install-Package Plugin.Badge -Pre

NuGet NuGet Beta

iOS, Android, UWP, MacOS, WPF

You have to register the custom renderer. I usually put this in the AssemblyInfo.cs file of my Platform specific project (iOS, Android, UWP, MacOS, WPF) csproj.

[assembly: ExportRenderer(typeof(TabbedPage), typeof(BadgedTabbedPageRenderer))]

Caution: If you are using the NON AppCompat MainActivity (i.e. you Main activity inherits from FormsApplicationActivity) please register the 'Legacy' renderer

[assembly: ExportRenderer(typeof(TabbedPage), typeof(LegacyBadgedTabbedRenderer))]

Caution - Custom TabbedPage / Custom Renderers

If you are using a custom renderer for TabbedPage please change it to inherit from BadgedTabbedPageRenderer and you are all set. Of course dont forget to register your own renderer.

Linker

As you already know when you enable linkling for your application the linker might remove some of the methods/types/properties/events used by third party libraries. This is why it's necessary to update your LinkerPleaseInclude.cs. Check this blogpost for more linker info.

  • For iOS add the following lines:
public void Include(UITabBarItem item)
{
    item.BadgeColor = UIColor.Red;
    item.BadgeValue = "badge";
}
  • For Android no issues detected yet :). Feel free to report any issues here.

Usage

Badge Text

For each child page of the TabbedPage just bind the custom attached property [TabBadge.BadgeText (XAML) or TabBadge.BadgeTextPropery (CSharp)]

XAML

The important line here is binding the attached property:

  plugin:TabBadge.BadgeText="{Binding Count}"

Example tabbed page with badged children:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions" 
             x:Class="Plugin.Badge.Sample.TabXaml">
  <TabbedPage.Children>
    <ContentPage Title="Tab1" 
                 Icon="icontab1.png"
                 plugin:TabBadge.BadgeText="{Binding Count}">
      <StackLayout>...</StackLayout>
    </ContentPage>
    ...
  </TabbedPage.Children>
</TabbedPage>

CSharp codebehind

var tab1 = new ContentPage //assume this is a child page of your Tab
{
    Title = "Tab1",
    Content = tab1Layout
};

tab1.SetBinding(TabBadge.BadgeTextProperty, new Binding("Count"));

Badge Color

Very similar to BadgeText just use [TabBadge.BadgeColor (XAML) or TabBadge.BadgeColorPropery (CSharp)].

Badge Text Color

Very similar to BadgeColor just use [TabBadge.BadgeTextColor (XAML) or TabBadge.BadgeTextColorPropery (CSharp)].

Badge Font Attributes

Very similar to BadgeColor just use [TabBadge.BadgeFont (XAML) or TabBadge.BadgeFontPropery (CSharp)].

ToDo:

  • you can alo try to set font family, should work in theory
  • font size is not supported yet on android ......

Badge Position

Very similar to BadgeColor just use [TabBadge.BadgePosition (XAML) or TabBadge.BadgePositionPropery (CSharp)].

TopLeft BottomLeft BottomRight Center TopCenter BottomCenter LeftCenter RightCenter

Showning / Hiding the badge

If the value of the BadgeText is set to null or empty string the badge is hidden. To show it again set a non null or empty value

Generic Badge View

As of v2.2.0 the package also contains a XF Badge view that is based on a XF Frame View and can be added to any layout and bound using the usual approach. The generic badge view can also be added to custom NavigationPage.TitleView layouts.

Checkout the Sample-App for more.

Licence

MIT

xamarin-forms-tab-badge's People

Contributors

xabre avatar foxanna avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.