Location>code7788 >text

Recommend an excellent .NET MAUI component library

Popularity：522 ℃/2024-08-13 10:35:22

preamble

NET MAUI release, projects can use this new cross-platform UI framework to easily build mobile and desktop applications.

To help you build beautiful and feature-rich applications faster, this article will recommend an excellent .NET MAUI component library MDC-MAUI, which not only provides rich UI components, but also easy to integrate and use.

With this article, we hope to help you save time and improve the user experience of your application during the development process.

Component Introduction

MDC-MAUI is a library of components developed specifically for .NET MAUI to provide consistent visuals for each platform.

Out of the box, the library provides a rich set of UI components, including buttons, cards, navigation, switches, progress bars, etc., which can help us quickly build beautiful and feature-rich applications.

Component Showcase

opening (chess jargon)

1、WrapLayout

WrapLayout is a layout container that allows items to be arranged in rows or columns based on the Orientation property. When the space is filled, the container will automatically swap the items into a new row or column.

2、Sample code

 <md:WrapLayout Orientation="Horizontal">
     <md:Chip IconData="{Static icon:}" Text="chip" />
     <md:Chip IconData="{Static icon:}" Text="chip" />
     <md:Chip IconData="{Static icon:}" Text="chip" />
     <md:Chip IconData="{Static icon:}" Text="chip" />
     <md:Chip IconData="{Static icon:}" Text="chip" />
     <md:Chip IconData="{Static icon:}" Text="chip" />
     <md:Chip IconData="{Static icon:}" Text="chip" />
 </md:WrapLayout>

3. Attributes

buttons

1、Button

Commonly used buttons trigger most actions in the UI.

Five styles are provided: Filled, Elevated, Filled Tonal, Outlined and Text.

2、Code example

<md:Button Style="{DynamicResource ElevatedButtonStyle}" Text="Elevated" />
<md:Button Style="{DynamicResource FilledButtonStyle}" Text="Filled" />
<md:Button Style="{DynamicResource FilledTonalButtonStyle}" Text="FilledTonal" />
<md:Button Style="{DynamicResource OutlinedButtonStyle}" Text="Outlined" />
<md:Button Style="{StaticResource TextButtonStyle}" Text="Text" />

checkbox

1、CheckBox

CheckBox allows the user to select one or more items from a list, or to turn an item on or off.

2、Code example

<mdc:CheckBox Text="checkbox" />

3. Attributes

4. Events

progress bar

1、ProgressIndicator

The progress indicator shows the status of the process in real time.

2、Code example

<md:ProgressIndicator Style="{DynamicResource CircularProgressIndicatorStyle}" />
<md:ProgressIndicator Style="{DynamicResource LinearProgressIndicatorStyle}" />

3. Attributes

4. Events

navigation bar

1、NavigationBar

The navigation bar allows users to switch UI views on smaller devices.

2、Code example

<...
 xmlns:icon="clr-namespace:;assembly="
...>

<mdc:FAB IconData="{Static icon:}" Style="{DynamicResource SecondaryFABStyle}" />

<mdc:NavigationBar>
    <mdc:NavigationBarItem IconData="{Static icon:}" Text="label 1">
  ...
 </mdc:NavigationBarItem>
    <mdc:NavigationBarItem IconData="{Static icon:}" Text="label 2">
  ...
 </mdc:NavigationBarItem>
</mdc:NavigationBar>

3. Attributes

4. Events

There are also many components, if you need to visit the online documentation ( / ) to learn and reference, including component introduction, code samples, properties and events.

component address

  • Github
/mdc-maui/mdc-maui
  • file address
/

ultimate

If you found this article helpful, why not support it with a like? Your support is what keeps me motivated to continue sharing my knowledge. If you have any questions or need further help, please feel free to leave a comment. You can also join the WeChat public number [DotNet Technician] community to share ideas and grow with other tech-loving peers!

<Previous Next>