jsuarezruiz/templateui

A set of Xamarin.Forms templated controls.

TemplateUI

A set of templated controls.

Supported platforms:

• Android
• iOS
• macOS
• UWP

What is a templated control?

It is a control defined by a template. Every control has a ControlTemplate property and can modify the structure that defines the control.

Usage

Step 1: Add a reference to TemplateUI.

NOTE: Currently TemplateUI is not yet available in NuGet. But... why?. There are a couple more controls and some fixes almost ready. After merge and polish details, TemplateUI will be in NuGet.

Step 2: Initialize TemplateUI in your shared library:

TemplateUI.Init();

Step 3: Enjoy coding!.

Overview

There are currently 18 controls. The controls available are:

Controls

The controls available are:

AvatarView

Is a graphical representation of the user image view that can be customized by adding icon, text, etc.

BadgeView

Control used to used to notify users notifications, or status of something.

CarouselView

Allow to navigate through a collection of views.

ChatBubble

Allow to show a speech bubble message.

CircleProgressBar

Shows a control that indicates the progress percentage of an on-going operation by circular shape.

ComparerView

Provides an option for displaying a split-screen of two views, which can help you to make comparisons.

DataVisualization

Several series graphs.

Divider

Displays a separator between views.

GridSplitter

Represents the control that redistributes space between columns or rows of a Grid control.

Marquee

Use this control to add an attention–getting text message that scrolls continuously across the screen.

PinBox

Allow to introduce a PIN or verification Code.

ProgressBar

Represents progress as a horizontal bar that is filled to a percentage represented by a float value.

Rate

Allows users to select a rating value from a group of visual symbols like stars.

SegmentedControl

Is a linear segment made up of multiple segments and allow users to select between multiple options.

Shield

Shield is a type of badge.

Slider

Is a horizontal bar that can be manipulated by the user to select a double value from a continuous range.

SnackBar

Provide brief messages about app processes at the bottom of the screen.

Tag

Is a tagging control.

ToggleSwitch

A View control that provides a toggled value.

TreeView

Enables a hierarchical list with expanding and collapsing nodes that contain nested items.

Layouts

But ... isn't this a templated controls library? You are right. But to create certain controls, there are layouts that would help to achieve the desired result. For example, in the list of upcoming controls we have a Clock. To position the elements that make up the Clock, a CircularLayout makes things very simple.

These Layouts, in addition to adding more possibilities to the library, help to create more templated controls.

The layouts available are:

CircularLayout

The CircularLayout is a simple Layout derivative that lays out its children in a circular arrangement. It has some useful properties to allow some customization like the Orientation (Clockwise or Counterclockwise).

DockLayout

The DockLayout makes it easy to dock content in all four directions (top, bottom, left and right). This makes it a great choice in many situations, where you want to divide the screen into specific areas, especially because by default, the last element inside the DockLayout, unless this feature is specifically disabled, will automatically fill the rest of the space (center).

HexLayout

A Layout that arranges the elements in a honeycomb pattern.

Contribute

Do you want to contribute?.

Found a Bug?

If you find a bug, you can help me by submitting an issue. Even better, you can submit a Pull Request with a fix.

Submitting a pull request

For every contribution, you must:

• Test your code.
• target master branch (or an appropriate release branch if appropriate for a bug fix).

Adding documentation

To update the documentation, you must submit a Pull Request adding or updating the existing markdowns.

Feedback or Requests

Use GitHub Issues for bug reports and feature requests.

Principles

• Principle #1: Kept TemplateUI simple.
• Principle #2: Any control added must allow customization using the ControlTemplate property.

Known Issues

• A lot of the controls are made up of basic shapes. Gestures don't work with Shapes on iOS. This affects some control like Rate. (waiting PR #11419)

What's next

The next controls will be:

• Clock
• TabView

In addition, there are ideas for a wide variety of controls like:

• Calendar
• ColorPicker
• DataGrid
• Horizontal Calendar
• Loading
• Pagination
• StepBar
• TimeBar

And much more!

Copyright and license

Code released under the MIT license.

templateui's Issues

Is TemplateUI on Nuget?

I really want use TemplateUI in my ongoing Project, but I don't know how to go about it, is it on Nuget?

Where's the code? :-(

Hi, maybe I misunderstood the purpose of this repo, but I cannot seem to find source code :-(

Where??? is the code for this great thing?

or do I understand anything wrong? Looks like you already implemented this, but how?

I wanted to implement PinBox control in my UWP App

Hello @jsuarezruiz,

Seek your help to implement the same in UWP app please do help.

NuGet.Build.Packaging 0.2.5-dev.8 not found

According to https://www.nuget.org/packages/NuGet.Build.Packaging/ the latest version of NuGet.Build.Packaging is 0.2.2.

However

TemplateUI/src/TemplateUI/TemplateUI.csproj

Line 19 in 776f1bf

<PackageReference Include="NuGet.Build.Packaging" Version="0.2.5-dev.8">

references version 0.2.5-dev.8

What do I need to do to build TemplateUI project?

Add to XamarinCommunityToolkit?

These look fantastic :)

Have you considered adding them to XamarinCommunityToolkit?

I know they already have an AvatarView but I’m sure many people would use the rest.

No dice on this repo ....

I just watched the video on templated controls and pulled down this repo...

Even after fixing the reference issue reported it does not work ....

Severity Code Description Project File Line Suppression State
Error CS0029 Cannot implicitly convert type 'Xamarin.Forms.Color' to 'Xamarin.Forms.Brush' TemplateUI (net461), TemplateUI (netstandard2.0) C:\Users\shauck\Downloads\TemplateUI-master\TemplateUI-master\src\TemplateUI\DataVisualization\AreaChart.cs 100 Active
Error CS0029 Cannot implicitly convert type 'Xamarin.Forms.Color' to 'Xamarin.Forms.Brush' TemplateUI (net461), TemplateUI (netstandard2.0) C:\Users\shauck\Downloads\TemplateUI-master\TemplateUI-master\src\TemplateUI\DataVisualization\AreaChart.cs 101 Active
Error CS0029 Cannot implicitly convert type 'Xamarin.Forms.Color' to 'Xamarin.Forms.Brush' TemplateUI (net461), TemplateUI (netstandard2.0) C:\Users\shauck\Downloads\TemplateUI-master\TemplateUI-master\src\TemplateUI\DataVisualization\AreaChart.cs 122 Active
Error CS0029 Cannot implicitly convert type 'Xamarin.Forms.Color' to 'Xamarin.Forms.Brush' TemplateUI (net461), TemplateUI (netstandard2.0) C:\Users\shauck\Downloads\TemplateUI-master\TemplateUI-master\src\TemplateUI\DataVisualization\AreaChart.cs 123 Active

MAUI support?

Is there any plan to support .NET MAUI?

PinBox Entry focus event does not fire in iOS

Hi

Amazing controls!!

PinBox view when running your sample app in iOS the pinBox entry Focus does not fire .

Instructions

1. Launch your app
2. Select PinBox Gallery
3. Try to enter a value
4. Event is not fired and keyboard does not appear

I know you are very busy, tried to fix it myself but unless I miss the obvious cannot detect why in iOS the entry focused event is not firing. I was testing against the latest stable xamarin forms.

thanks for these amazing controls and have a good xmas.

Update

Could you update it to xf 5.0?

[Enhancement] CornerRadius on CircleProgressBar

Hey man! Cool controls! I will check out some of them in the nearest future and remove the syncfusion's alternatives that i have now! Writing here for a cool feature request for the CircleProgressBar. I've searched everywhere and haven't found the ability to set the corner radius of the path inside the bar, something as in the picture below. Syncfusion's CircleProgressBar doesn't have this ability as well! So i think it is gonna be quite cool

[Enhancement] Overflow (scroll) for SegmentedControl

Super library.

I've been searching around the net for good components for XF for ages... These are very nice.

However i would like to suggest some kind of "overflow" (prefer: scroll) for when the number of items in the SegmentedControl is bigger than a certain threshould (configureable ?)

I myself would prefer having rounded corners and shadows - so when the "SegmentedControl" is to wide it could present itself as "clipped" rectangular - and when the "beginning or end" is visible - nice rounded corners.

Keep up the nice work,

René

Pie Charts

Hi Javier,

just a quick question regarding https://github.com/jsuarezruiz/TemplateUI#datavisualization
I saw the Xamarin blog post about shapes and am quickly taking a look. Could you recommend an approach for rendering a pie chart please?

How to use the TreeView control with dynamic data?

Tag control does not implement propertyChanging for bindable properties

When you're binding to properties of the tag control i.e. the BackgroundColor it binds correctly however does not reflect any later changes in the binding context.

For example consider the following code:

<controls:Tag
                            Text="{Binding Text}"
                            BackgroundColor="{Binding Color}" />

This binds correctly when it renders first, however if the underlying "Color" property later changes at runtime it does not get reflected on the control.

How do I actually download and install TemplateUI on my Mac so I can then add it as a Reference?

Thank you.