MaterialDesignControls Plugin for Xamarin Forms is a collection of Xamarin.Forms controls that apply the Material Design Guidelines
- Available on NuGet: Plugin.MaterialDesignControls
- Install into your PCL project and Client projects.
Platform Support
| Platform | Version |
|---|---|
| Xamarin.iOS | iOS 8+ |
| Xamarin.Android | API 16+ |
| Xamarin.Forms | >= 4.0.0.425677 |
You must add this line to your platform specific project (AppDelegate.cs, MainActivity.cs) before you use MaterialDesignControls:
if you're using iOS:
Plugin.MaterialDesignControls.iOS.Renderer.Init(); or if you're using Android:
Plugin.MaterialDesignControls.Android.Renderer.Init(); You must add this namespace to your xaml files:
xmlns:material="clr-namespace:Plugin.MaterialDesignControls;assembly=Plugin.MaterialDesignControls"Buttons allow users to take actions, and make choices, with a single tap.
Screenshot
Example
<material:MaterialButton Text="Save" Icon="save.png" Command="{Binding TapCommand}" CommandParameter="Saved" />Chips are compact elements that represent an action.
Screenshot
Example
<material:MaterialChips IsSelected="true" IsEnabled="true" Text="Option A" />Text fields let users enter and edit text.
Screenshot
Example
<material:MaterialEntry FieldName="Name" Type="Filled" LabelText="Name" Placeholder="Enter your name"
IsRequired="true" RequiredMessage="The name is required" MaxLength="12" />Date pickers let users select a date.
Screenshot
Example
<material:MaterialDatePicker Type="Filled" LabelText="Start date" Format="yyyy-MM-dd" LeadingIcon="calendar.png" />Time pickers let users select a time.
Screenshot
Example
<material:MaterialTimePicker Type="Filled" LabelText="Start time" Format="HH:mm" LeadingIcon="calendar.png" />Pickers let users select an option.
Screenshot
Example
<material:MaterialPicker FieldName="Color" Type="Filled" LabelText="Color"
IsRequired="true" RequiredMessage="The color is required" />Text fields let users enter and edit text.
Screenshot
Example
<material:MaterialEditor Type="Outlined" LabelText="Description" Placeholder="Enter your description"
LeadingIcon="email.png" HeightRequest="200" />Selection let users select an option.
Screenshot
Example
<material:MaterialSelection Type="Filled" LeadingIcon="calendar.png" LabelText="User" Placeholder="Select user" Text="User A"
Command="{Binding TapCommand}" CommandParameter="User selection" />Displays a value with its respective label in read-only format.
Screenshot
Example
<material:MaterialField LabelText="Mail" Text="[email protected]" LeadingIcon="email.png" />Effect to detect the different types of taps on a view: Pressing, Released and Canceled can be detected.
Example
<MyControl.Effects>
<material:TouchAndPressEffect />
</MyControl.Effects>public class MyControl : ContentView, ITouchAndPressEffectConsumer
{
public void ConsumeEvent(EventType gestureType)
{
TouchAndPressAnimation.Animate(this, gestureType);
}
}https://github.com/HorusSoftwareUY/MaterialDesignControlsPlugin/tree/master/example
Contributions are welcome! If you find a bug want a feature added please report it.
If you want to contribute code please file an issue, create a branch, and file a pull request.
MIT License - see LICENSE.txt
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent