Xamarin Forms：无法为两列布局创建角半径答案

【问题标题】：Xamarin Forms: Not able to create a corner radius for a two column layoutXamarin Forms：无法为两列布局创建角半径
【发布时间】：2019-01-20 22:11:44
【问题描述】：

我正在尝试创建一个高度为 8px 的网格布局，水平角半径如下图所示。

：https://ibb.co/s1dkpnw

<Grid Margin="0,0,0,24" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="6*">
                    </ColumnDefinition>
                    <ColumnDefinition Width="4*">
                    </ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="8">
                    </RowDefinition>
                </Grid.RowDefinitions>
                <Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
                    <Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
                    <Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
                </Frame>
            </Grid>

我可以得到如下图所示的 UI。

: https://ibb.co/7nLTgdL

我无法在可见的框架内显示 UI，尽管我得到了两列布局的拐角半径。它只是显示一个空框架。

请告诉我如何设计 XAML UI 以获得设计快照中的 UI。

【问题讨论】：

Frame 会覆盖 android 上的其他颜色。如果您使用 Xamarin forms 3.4，请将 Frame 替换为 BoxView（现在支持此功能和圆角半径），或者您可以尝试使用 nuget 的 RoundedBoxView。

标签： xamarin.forms

【解决方案1】：

如下图所示，通过在框架控件中推送 Grid 来对齐 UI，

<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Grid HorizontalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="6*">
                </ColumnDefinition>
                <ColumnDefinition Width="4*">
                </ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="8">
                </RowDefinition>
            </Grid.RowDefinitions>

                <Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
                <Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>

        </Grid>
</Frame>

【讨论】：

【解决方案2】：

AbsoluteLayout 可以帮助您：

<AbsoluteLayout HorizontalOptions="Center">
         <Frame
            AbsoluteLayout.LayoutBounds="0,0,150,8"
            AbsoluteLayout.LayoutFlags="None"
            BackgroundColor="#0086C9"
            CornerRadius="7" />

        <Frame
            AbsoluteLayout.LayoutBounds="120,0,150,8"
            AbsoluteLayout.LayoutFlags="None"
            BackgroundColor="#D8D8D8"
            CornerRadius="7" />

        <Frame
            AbsoluteLayout.LayoutBounds="120,0,30,8"
            AbsoluteLayout.LayoutFlags="None"
            BackgroundColor="#0086C9"
            CornerRadius="1" />
</AbsoluteLayout>

输出：https://i.ibb.co/jh6QmBL/ss.png

【讨论】：