Skip to content

Commit

Permalink
Renamed project and updated to .NET 7
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsuarezruiz
jsuarezruiz committed Nov 17, 2022
1 parent ca4e9ea commit 4d44780
Show file tree
Hide file tree
Showing 47 changed files with 184 additions and 179 deletions.
78 changes: 39 additions & 39 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# MauiPane
# AlohaKit.Layouts

.NET MAUI **Layouts** Library.

![MauiAnimation](https://raw.githubusercontent.com/jsuarezruiz/MauiPane/main/images/mauipane-promo.png)
![AlohaKit.Layouts](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/AlohaKit.Layouts-promo.png)

_NOTE: This library is a port of [XamPane](https://github.com/jsuarezruiz/Xampane)._

## Usage

**Step 1**: Include the MauiPane package reference in your project.
**Step 1**: Include the AlohaKit.Layouts package reference in your project.

**Step 2**: Use the **ConfigureMauiPane** extension method in your MauiProgram class.
**Step 2**: Use the **UseAlohaKitLayouts** extension method in your MauiProgram class.

**Step 3**: Enjoy coding!.

Expand All @@ -19,54 +19,54 @@ _NOTE: This library is a port of [XamPane](https://github.com/jsuarezruiz/Xampan
The CircularLayout is a simple Panel 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).

```
<mauipane:CircularLayout
<alohakit:CircularLayout
Orientation="Clockwise">
<BoxView Color="Black" CornerRadius="6" WidthRequest="6" HeightRequest="6" />
<BoxView Color="Red" CornerRadius="12" WidthRequest="12" HeightRequest="12" mauipane:CircularLayout.Angle="0" mauipane:CircularLayout.Radius="120" />
<BoxView Color="Green" CornerRadius="12" WidthRequest="12" HeightRequest="12" mauipane:CircularLayout.Angle="10" mauipane:CircularLayout.Radius="120" />
<BoxView Color="Blue" CornerRadius="12" WidthRequest="12" HeightRequest="12" mauipane:CircularLayout.Angle="20" mauipane:CircularLayout.Radius="120" />
<BoxView Color="Yellow" CornerRadius="12" WidthRequest="12" HeightRequest="12" mauipane:CircularLayout.Angle="30" mauipane:CircularLayout.Radius="120" />
<Label Text="1" mauipane:CircularLayout.Angle="30" mauipane:CircularLayout.Radius="90" />
<Label Text="2" mauipane:CircularLayout.Angle="60" mauipane:CircularLayout.Radius="90" />
<Label Text="3" mauipane:CircularLayout.Angle="90" mauipane:CircularLayout.Radius="90" />
<Label Text="4" mauipane:CircularLayout.Angle="120" mauipane:CircularLayout.Radius="90" />
<Label Text="5" mauipane:CircularLayout.Angle="150" mauipane:CircularLayout.Radius="90" />
<Label Text="6" mauipane:CircularLayout.Angle="180" mauipane:CircularLayout.Radius="90" />
<Label Text="7" mauipane:CircularLayout.Angle="210" mauipane:CircularLayout.Radius="90" />
<Label Text="8" mauipane:CircularLayout.Angle="240" mauipane:CircularLayout.Radius="90" />
<Label Text="9" mauipane:CircularLayout.Angle="270" mauipane:CircularLayout.Radius="90" />
<Label Text="10" mauipane:CircularLayout.Angle="300" mauipane:CircularLayout.Radius="90" />
<Label Text="11" mauipane:CircularLayout.Angle="330" mauipane:CircularLayout.Radius="90" />
<Label Text="12" mauipane:CircularLayout.Angle="360" mauipane:CircularLayout.Radius="90" />
</mauipane:CircularLayout>
<BoxView Color="Red" CornerRadius="12" WidthRequest="12" HeightRequest="12" alohakit:CircularLayout.Angle="0" alohakit:CircularLayout.Radius="120" />
<BoxView Color="Green" CornerRadius="12" WidthRequest="12" HeightRequest="12" alohakit:CircularLayout.Angle="10" alohakit:CircularLayout.Radius="120" />
<BoxView Color="Blue" CornerRadius="12" WidthRequest="12" HeightRequest="12" alohakit:CircularLayout.Angle="20" alohakit:CircularLayout.Radius="120" />
<BoxView Color="Yellow" CornerRadius="12" WidthRequest="12" HeightRequest="12" alohakit:CircularLayout.Angle="30" alohakit:CircularLayout.Radius="120" />
<Label Text="1" alohakit:CircularLayout.Angle="30" alohakit:CircularLayout.Radius="90" />
<Label Text="2" alohakit:CircularLayout.Angle="60" alohakit:CircularLayout.Radius="90" />
<Label Text="3" alohakit:CircularLayout.Angle="90" alohakit:CircularLayout.Radius="90" />
<Label Text="4" alohakit:CircularLayout.Angle="120" alohakit:CircularLayout.Radius="90" />
<Label Text="5" alohakit:CircularLayout.Angle="150" alohakit:CircularLayout.Radius="90" />
<Label Text="6" alohakit:CircularLayout.Angle="180" alohakit:CircularLayout.Radius="90" />
<Label Text="7" alohakit:CircularLayout.Angle="210" alohakit:CircularLayout.Radius="90" />
<Label Text="8" alohakit:CircularLayout.Angle="240" alohakit:CircularLayout.Radius="90" />
<Label Text="9" alohakit:CircularLayout.Angle="270" alohakit:CircularLayout.Radius="90" />
<Label Text="10" alohakit:CircularLayout.Angle="300" alohakit:CircularLayout.Radius="90" />
<Label Text="11" alohakit:CircularLayout.Angle="330" alohakit:CircularLayout.Radius="90" />
<Label Text="12" alohakit:CircularLayout.Angle="360" alohakit:CircularLayout.Radius="90" />
</alohakit:CircularLayout>
```

![CircularLayout](https://raw.githubusercontent.com/jsuarezruiz/MauiPane/main/images/circularlayout.png)
![CircularLayout](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/circularlayout.png)

### DockLayout

The DockLayout allows you to **dock** the child controls to the top, bottom, left or right. By default, the last control, if not given a specific dock position, will fill the remaining space. You can achieve the same with the Grid panel, but for the simpler situations, the DockLayout will be easier to use. Use the DockLayout whenever you need to dock one or several controls to one of the sides, like for dividing up the screen into specific areas.

```
<mauipane:DockLayout
<alohakit:DockLayout
LastChildFill="False">
<Button mauipane:DockLayout.Dock="Top" Text="Top" HeightRequest="50"/>
<Button mauipane:DockLayout.Dock="Bottom" Text="Bottom" HeightRequest="50"/>
<Button mauipane:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
<Button mauipane:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
<Button mauipane:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
<Button mauipane:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
</mauipane:DockLayout>
<Button alohakit:DockLayout.Dock="Top" Text="Top" HeightRequest="50"/>
<Button alohakit:DockLayout.Dock="Bottom" Text="Bottom" HeightRequest="50"/>
<Button alohakit:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
<Button alohakit:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
<Button alohakit:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
<Button alohakit:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
</alohakit:DockLayout>
```

![DockLayout](https://raw.githubusercontent.com/jsuarezruiz/MauiPane/main/images/docklayout.png)
![DockLayout](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/docklayout.png)

### UniformGrid

The UniformGrid is just like the Grid, with the possibility of multiple rows and columns, but with one important difference: All rows and columns will have the **same size**. Use this when you need the Grid behavior without the need to specify different sizes for the rows and columns.

```
<mauipane:UniformGrid>
<alohakit:UniformGrid>
<BoxView Color="Red" />
<BoxView Color="Yellow" />
<BoxView Color="Orange" />
Expand All @@ -76,17 +76,17 @@ The UniformGrid is just like the Grid, with the possibility of multiple rows and
<BoxView Color="LightGreen" />
<BoxView Color="Gray" />
<BoxView Color="Pink" />
</mauipane:UniformGrid>
</alohakit:UniformGrid>
```

![UniformGrid](https://raw.githubusercontent.com/jsuarezruiz/MauiPane/main/images/uniformgrid.png)
![UniformGrid](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/uniformgrid.png)

### WrapLayout

The WrapLayout will position each of its child controls next to the other, horizontally (default) or vertically, until there is no more room, where it will **wrap** to the next line and then continue. Use it when you want a vertical or horizontal collection controls that automatically wraps when there's no more room.

```
<mauipane:WrapLayout
<alohakit:WrapLayout
Orientation="Vertical"
Spacing="6"
HorizontalOptions="Center">
Expand All @@ -99,14 +99,14 @@ The WrapLayout will position each of its child controls next to the other, horiz
<BoxView Color="LightGreen" />
<BoxView Color="Gray" />
<BoxView Color="Pink" />
</mauipane:WrapLayout>
</alohakit:WrapLayout>
```

![WrapLayout](https://raw.githubusercontent.com/jsuarezruiz/MauiPane/main/images/wraplayout.png)
![WrapLayout](https://raw.githubusercontent.com/jsuarezruiz/AlohaKit.Layouts/main/images/wraplayout.png)

## Feedback

Please use [GitHub issues](https://github.com/jsuarezruiz/mauipane/issues) for questions or comments.
Please use [GitHub issues](https://github.com/jsuarezruiz/AlohaKit.Layouts/issues) for questions or comments.

## Copyright and license

Expand Down
Binary file modified icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/alohakit-layouts-promo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed images/mauipane-promo.png
View file
Binary file not shown.
Binary file removed images/mauipane.gif
View file
Binary file not shown.
20 changes: 13 additions & 7 deletions src/MauiPane.Gallery/MauiPane.Gallery.csproj → ...s.Gallery/AlohaKit.Layouts.Gallery.csproj
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<Project Sdk="Microsoft.NET.Sdk">

<PropertyGroup>
<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
<TargetFrameworks>net7.0-android;net7.0-ios;net7.0-maccatalyst</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.19041.0</TargetFrameworks>
<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
<!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->
<!-- <TargetFrameworks>$(TargetFrameworks);net7.0-tizen</TargetFrameworks> -->
<OutputType>Exe</OutputType>
<RootNamespace>MauiPane.Gallery</RootNamespace>
<RootNamespace>AlohaKit.Layouts.Gallery</RootNamespace>
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
<ImplicitUsings>enable</ImplicitUsings>

<!-- Display name -->
<ApplicationTitle>MauiPane.Gallery</ApplicationTitle>
<ApplicationTitle>AlohaKit.Layouts.Gallery</ApplicationTitle>

<!-- App Identifier -->
<ApplicationId>com.companyname.mauipane.gallery</ApplicationId>
<ApplicationId>com.jsuarezruiz.AlohaKit.Layouts.gallery</ApplicationId>
<ApplicationIdGuid>2E7113D9-CF06-41A0-9867-C8431CC7BFCC</ApplicationIdGuid>

<!-- Versions -->
Expand Down Expand Up @@ -49,7 +49,13 @@
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\MauiPane\MauiPane.csproj" />
<ProjectReference Include="..\AlohaKit.Layouts\AlohaKit.Layouts.csproj" />
</ItemGroup>

<ItemGroup>
<MauiXaml Update="AppShell.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
</ItemGroup>

</Project>
4 changes: 2 additions & 2 deletions src/MauiPane.Gallery/App.xaml → src/AlohaKit.Layouts.Gallery/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<Application
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiPane.Gallery"
x:Class="MauiPane.Gallery.App">
xmlns:local="clr-namespace:AlohaKit.Layouts.Gallery"
x:Class="AlohaKit.Layouts.Gallery.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
Expand Down
2 changes: 1 addition & 1 deletion src/MauiPane.Gallery/App.xaml.cs → src/AlohaKit.Layouts.Gallery/App.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
namespace MauiPane.Gallery
namespace AlohaKit.Layouts.Gallery
{
public partial class App : Application
{
Expand Down
Loading

0 comments on commit 4d44780

Please sign in to comment.