XamPane 1.0.0

Xampane

用于 Xamarin.Forms 的布局库。

CircularLayout

The CircularLayout 是一个简单的 Panel 衍生类，它以 圆形 布局排列其子项。它有一些有用的属性，允许您进行一些自定义，例如方向（顺时针或逆时针）。

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

DockLayout

DockLayout 允许您将子控件停靠在顶部、底部、左侧或右侧。默认情况下，如果未指定特定停靠位置，则最后一个控件将填满剩余空间。您可以使用 Grid 面板实现相同的效果，但对于简单的情况，DockLayout 将更易于使用。在您需要将一个或多个控件停靠到一侧时（例如，将屏幕分成特定区域），请使用 DockLayout。

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

HexLayout

一个面板，按照 蜂窝图案 布局元素。

<xampane:HexLayout
    RowCount="3"
    ColumnCount="3"
    Orientation="Vertical">
    <polygon:PolygonFrame Grid.Row="0" Grid.Column="1" OffsetAngle="90" BackgroundColor="Red"/>
    <polygon:PolygonFrame Grid.Row="0" Grid.Column="2" OffsetAngle="90" BackgroundColor="Green"/>
    <polygon:PolygonFrame Grid.Row="1" Grid.Column="0" OffsetAngle="90" BackgroundColor="Blue"/>
    <polygon:PolygonFrame Grid.Row="1" Grid.Column="1" OffsetAngle="90" BackgroundColor="Yellow"/>
    <polygon:PolygonFrame Grid.Row="1" Grid.Column="2" OffsetAngle="90" BackgroundColor="Orange"/>
    <polygon:PolygonFrame Grid.Row="2" Grid.Column="1" OffsetAngle="90" BackgroundColor="Purple"/>
    <polygon:PolygonFrame Grid.Row="2" Grid.Column="2" OffsetAngle="90" BackgroundColor="Pink"/>
</xampane:HexLayout>

UniformGrid

UniformGrid 与 Grid 类似，具有多行多列的可能性，但有一个重要区别：所有行和列都将有 相同的大小。当您不需要为行和列指定不同大小时，请使用该功能。当您需要 Grid 行为而不需要指定行和列的大小时，请使用此功能。

<xampane:UniformGrid>
    <BoxView Color="Red" />
    <BoxView Color="Yellow" />
    <BoxView Color="Orange" />
    <BoxView Color="Purple" />
    <BoxView Color="Blue" />
    <BoxView Color="Green" />
    <BoxView Color="LightGreen" />
    <BoxView Color="Gray" />
    <BoxView Color="Pink" />
</xampane:UniformGrid>

WrapLayout

WrapLayout 将将其每个子控件水平（默认）或垂直放置在另一个子控件旁边，直到没有更多空间，然后它将 换行 并继续。当您想要一行或一列的集合控件，在没有更多空间时自动换行时，请使用此功能。

<xampane:WrapLayout 
    Orientation="Vertical"
    Spacing="6"
    HorizontalOptions="Center">
    <BoxView Color="Red" />
    <BoxView Color="Yellow" />
    <BoxView Color="Orange" />
    <BoxView Color="Purple" />
    <BoxView Color="Blue" />
    <BoxView Color="Green" />
    <BoxView Color="LightGreen" />
    <BoxView Color="Gray" />
    <BoxView Color="Pink" />
</xampane:WrapLayout>

反馈

请使用 GitHub issues 发表问题或评论。