Xamarin.Community.Toolkit 新增布局！

Xamarin 社区工具包包含多个在移动应用中常用但在 Xamarin.Forms 代码库中不可用的视图，填补了Xamarin.Forms 开发的空白。视图还包括新的布局，这些布局扩展了排列用户界面的可能性。本章介绍库提供的布局和视图，使用官方示例项目作为起点，但对实际使用有许多注意事项。

新布局

• DockLayout
• StateLayout
• UniformGrid
• HexLayout

DockLayout

很明显， 这个布局容器和WPF的DockPanel 类似, 可以将控件锚定在容器的4个方向, 以及选择是否填充剩余空间

由于Xamarin.Forms本身为提供类似功能的布局容器, 所以需要单独添加命名空间:

xmlns:xc="http://xamarin.com/schemas/2020/toolkit"

<xc:DockLayout LastChildFill="False">
            <Button Text="Button1" />
            <Button xc:DockLayout.Dock="Right" Text="Button2" />
            <Button xc:DockLayout.Dock="Top" Text="Button3" />
            <Button xc:DockLayout.Dock="Bottom" Text="Button4" />
        </xc:DockLayout>

StateLayout

有时，当应用处于特定状态时，你可能需要显示特定视图，例如，在应用忙于执行某些操作时显示加载程序，或在出现问题时显示错误消息。使用 StateLayout 控件，可以将任何布局元素（如 Grid 或 StackLayout）转换为单独的状态感知元素。

使用 StateLayout 附加属性使布局具有状态感知的每个布局都 包含一个 StateView 对象的集合。这些对象可用作 StateLayout 支持的不同状态的模板。每当 CurrentState 属性设置为与其中一个 StateView 的 State 属性匹配的值时，将显示其内容而不是主要内容。

可能的状态在 LayoutState 枚举中定义，值可以是：“无”、“正在加载”、“保存”、“成功”、“错误”、“空”和“自定义”。

下面显示了一个示例：

<Grid xc:StateLayout.AnimateStateChanges="True" xc:StateLayout.CurrentState="Loading">
        <xc:StateLayout.StateViews>
            <xc:StateView StateKey="Loading" VerticalOptions="CenterAndExpand">
                <StackLayout>
                    <ActivityIndicator IsRunning="True" />
                    <Label HorizontalOptions="Center" Text="Loading..." />
                </StackLayout>
            </xc:StateView>
        </xc:StateLayout.StateViews>

        <Button Text="Hello World!" />
    </Grid>

如您所见，网格使用状态布局的附加属性。在此示例中，CurrentState 属性设置为Loading (等待)，其类型为 LayoutState，并在支持数据绑定。它表示视图的当前状态，如果为“无”，则表示视图处于默认状态。通过指定状态视图的集合，可以确定状态更改时发生的情况。

在这种情况下，StateView 对象指定如果状态更改为“正在加载”，则网格的内容替换为对应LayoutState的 StackLayout。当状态变回“ None ”时，网格也将返回以显示其原始内容。可以通过将 StateView 的 StateKey 属性与 LayoutState 枚举中的一个值分配来提供状态的类型。

其他的状态工作方式与这个类似, 但状态不同。关键点是，您可以直接在当前视图中为不同状态提供视图，而无需为状态更改实现自定义逻辑，也无需创建更复杂的 UI 层次结构。

UniformGrid

和WPF不同, 它无法指定Rows以及Columns , 因为 UniformGrid 会根据需要自动排列其内容包装和对齐, 以下示例展示了使用方法:

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

HexLayout

以蜂窝式的形式进行布局, 如下所示:

相应代码如下所示:

<xct:HexLayout     
        RowCount="5" 
        ColumnCount="5">
            <BoxView xct:HexLayout.Row="0" xct:HexLayout.Column="1" CornerRadius="24" BackgroundColor="#006699" Margin="12"/>
            <BoxView xct:HexLayout.Row="0" xct:HexLayout.Column="2" CornerRadius="24" BackgroundColor="#0033CC" Margin="12"/>
            <BoxView xct:HexLayout.Row="0" xct:HexLayout.Column="3" CornerRadius="24" BackgroundColor="#3333FF" Margin="12"/>
            <BoxView xct:HexLayout.Row="1" xct:HexLayout.Column="0" CornerRadius="24" BackgroundColor="#00cc99" Margin="12"/>
            <BoxView xct:HexLayout.Row="1" xct:HexLayout.Column="1" CornerRadius="24" BackgroundColor="#00FFFF" Margin="12"/>
            <BoxView xct:HexLayout.Row="1" xct:HexLayout.Column="2" CornerRadius="24" BackgroundColor="#3399FF" Margin="12"/>
            <BoxView xct:HexLayout.Row="1" xct:HexLayout.Column="3" CornerRadius="24" BackgroundColor="#6600FF" Margin="12"/>
            <BoxView xct:HexLayout.Row="2" xct:HexLayout.Column="0" CornerRadius="24" BackgroundColor="#008000" Margin="12"/>
            <BoxView xct:HexLayout.Row="2" xct:HexLayout.Column="1" CornerRadius="24" BackgroundColor="#66FF66" Margin="12"/>
            <BoxView xct:HexLayout.Row="2" xct:HexLayout.Column="2" CornerRadius="24" BackgroundColor="#FFFFFF" Margin="12"/>
            <BoxView xct:HexLayout.Row="2" xct:HexLayout.Column="3" CornerRadius="24" BackgroundColor="#FF66FF" Margin="12"/>
            <BoxView xct:HexLayout.Row="2" xct:HexLayout.Column="4" CornerRadius="24" BackgroundColor="#CC00CC" Margin="12"/>
            <BoxView xct:HexLayout.Row="3" xct:HexLayout.Column="0" CornerRadius="24" BackgroundColor="#99CC00" Margin="12"/>
            <BoxView xct:HexLayout.Row="3" xct:HexLayout.Column="1" CornerRadius="24" BackgroundColor="#FFFF66" Margin="12"/>
            <BoxView xct:HexLayout.Row="3" xct:HexLayout.Column="2" CornerRadius="24" BackgroundColor="#FF7C80" Margin="12"/>
            <BoxView xct:HexLayout.Row="3" xct:HexLayout.Column="3" CornerRadius="24" BackgroundColor="#D60093" Margin="12"/>
            <BoxView xct:HexLayout.Row="4" xct:HexLayout.Column="1" CornerRadius="24" BackgroundColor="#CC9900" Margin="12"/>
            <BoxView xct:HexLayout.Row="4" xct:HexLayout.Column="2" CornerRadius="24" BackgroundColor="#FF3300" Margin="12"/>
            <BoxView xct:HexLayout.Row="4" xct:HexLayout.Column="3" CornerRadius="24" BackgroundColor="#CC0000" Margin="12"/>
        </xct:HexLayout>