AlohaKit.UI - GitLite

KO | EN

gitlite — search

#javascript #react #android #machine-learning #rust #docker #nodejs #macos #windows #cli #vue #security #ios #open-source

AlohaKit.UI

(★ 107)

This library offers an easier way to create drawn controls in .NET MAUI in both XAML and C#.

파일 탐색기

최종 버전 다운로드 (.zip)

- NUGET.md
- alohaui-figma.gif
- - AlohaKit.UI.csproj
  - UIStatics.cs
- - AlohaKit.UI.Figma.csproj
  - App.xaml
  - App.xaml.cs
  - AppShell.xaml
  - AppShell.xaml.cs
  - MainPage.xaml
  - MainPage.xaml.cs
  - MauiProgram.cs
- - AlohaKit.UI.Gallery.csproj
  - App.xaml
  - App.xaml.cs
  - AppShell.xaml
  - AppShell.xaml.cs
  - MauiProgram.cs
- - AppContext.cs
  - FigmaSharp.csproj
  - IFigmaDelegate.cs
  - Resources.cs
- - AnchorStyles.cs
  - Color.cs
  - Extensions.cs
  - FigmaColor.cs
  - FigmaSharp.Views.csproj
  - FileHelper.cs
  - ITransitionButton.cs
  - Key.cs
  - Padding.cs
  - Transform.cs
- AlohaKit.UI.sln
.gitattributes
.gitignore
icon.png
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# AlohaKit UI

<div align="center">
   <a href="https://www.nuget.org/packages/AlohaKit.UI"><img src="https://img.shields.io/nuget/v/AlohaKit.UI?color=blue&style=flat-square&logo=nuget"></a>
   <a href="https://www.nuget.org/packages/AlohaKit.UI"><img src="https://img.shields.io/nuget/dt/AlohaKit.UI.svg?style=flat-square"></a>
   <a href="./LICENSE"><img src="https://img.shields.io/github/license/jsuarezruiz/AlohaKit.UI?style=flat-square"></a>
</div>

This library offers an **easier way to create drawn controls** in .NET MAUI in both XAML and C#.

It includes a new **CanvasView** control that allows content such as drawn Layouts or Views so that it creates a single native view that creates the native Canvas but the rest of the child elements become fully drawn and managed by the Canvas.

XAML

```
<alohakit:CanvasView>
    <alohakit:Rectangle
        WidthRequest="50" HeightRequest="50" 
        X="30" Y="30" 
        ScaleX="0.5" ScaleY="0.5"
        Fill="Green" />
    <alohakit:RoundRectangle
        WidthRequest="50" HeightRequest="50" 
        X="120" Y="10" 
        CornerRadius="12, 0, 0, 24"
        Fill="Orange" />
    <alohakit:Ellipse
        WidthRequest="50" HeightRequest="50" 
        X="130" Y="70">
        <alohakit:Ellipse.Fill>
            <LinearGradientBrush StartPoint="0, 0" EndPoint="1, 0">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Color="Red" />
                    <GradientStop Color="Yellow" Offset="1" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </alohakit:Ellipse.Fill>
    </alohakit:Ellipse>
</alohakit:CanvasView>

```
C#

```
CanvasView()
    .Children({
        Rectangle()
            .X(10).Y(10)
            .Height(80).Width(80)
            .Fill(Colors.Red),
        Ellipse() 
            .X(10).Y(100)
            .Height(80).Width(80)
            .Fill(Colors.Orange),
        Label()
            .X(10).Y(200)
            .Height(20).Width(100)
            .Text("Label"),
    });
```

This way, instead of needing to use the .NET MAUI Graphics Canvas extension methods, you use XAML or C# in a similar way to how you would normally create UI in .NET MAUI.

_What if it could be even simpler?_

You also have the **From Figma to AlohaKit UI** tool available.

![From Figma to AlohaKit UI](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.UI/main/images/alohaui-figma.gif)

Turns your Figma design into AlohaKit UI code.

## Contribute

Do you want to contribute?.

**Found a Bug?**

If you find a bug, you can help me by submitting an [issue](https://github.com/jsuarezruiz/AlohaKit.UI/issues). Even better, you can submit a [Pull Request](https://github.com/jsuarezruiz/AlohaKit.UI/pulls) with a fix.

## Copyright and license

Code released under the [MIT license](https://opensource.org/licenses/MIT).