Question

我希望在代码隐藏中通过BoxView在AbsoluteLayout组件上添加文字像这样：

我该怎么做？

以下是我的代码，最后我将AbsoluteLayout放入StackLayout：

 public TestPageBoxView()
    {
        StackLayout sl = new StackLayout();
        AbsoluteLayout al = new AbsoluteLayout();

        BoxView bv = new BoxView { BackgroundColor = Color.Green };
        Label l = new Label { Text = "Some text with \n breaks" };

        AbsoluteLayout.SetLayoutBounds(l, new Rectangle(0, 0,1,1));
        AbsoluteLayout.SetLayoutFlags(l, AbsoluteLayoutFlags.All);

        sl.Children.Add(bv);
        sl.Children.Add(al);
        Content = sl;
    }

所以，我关心的是这个l组件坚持使用stacklayout而不是BoxView。

也许我应该尝试RelativeLayout？

你知道git上的一些组件吗？像XLabs？

感谢。

Answer 1

您可以尝试使用Frame而不是Absolute Layout这样的

<Frame BackgroundColor="#13CF13" Padding="5" HorizontalOptions="Center" WidthRequest="80" HeightRequest="20" CornerRadius="40">
        <Label WidthRequest="40" Text="Backlog" HorizontalTextAlignment="Center"></Label>
    </Frame>

为您提供此结果：

Answer 2

我没有测试c＃代码，但我在xaml中有确切的代码，它对我有用。您需要将boxview和label标记为absolutelayout的子项，并且您必须设置一些absolutelayout选项，如下所示，它们相互叠加。当然首先添加boxview标签应覆盖在其上。标签的背景颜色必须为透明。

最后，我不确定，但我认为boxview doest有舍入选项作为默认值。你需要一些自定义渲染器。在下面的示例中，我使用了xamarin light主题，它将一个样式表公开为圆形。否则搜索customrenderer或有一些nugetpackages avabilable。 xlab有一个我猜。我希望这会对你有所帮助。

C＃

  AbsoluteLayout al = new AbsoluteLayout()
            {
                WidthRequest = 30,
                BackgroundColor = Color.White,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };

            BoxView bv = new BoxView
            {
                StyleClass = "Circle"   ,
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };

            AbsoluteLayout.SetLayoutBounds(bv, new Rectangle(.5, .5, 1, 1));
            AbsoluteLayout.SetLayoutFlags(bv, AbsoluteLayoutFlags.All);


            Label l = new Label { Text = "1", BackgroundColor = Color.Transparent };
            AbsoluteLayout.SetLayoutBounds(l, new Rectangle(.5, .5, 1, 1));
            AbsoluteLayout.SetLayoutFlags(l, AbsoluteLayoutFlags.All);
            al.Children.Add(bv);
            al.Children.Add(l);

Answer 3

这是一个非常老的问题，但是我只是实现了以下目标。

在XAML中

<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <BoxView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HeightRequest="2" />
            <Label Text="{Binding Caption}" Grid.Row="0"  FontAttributes="Bold" BackgroundColor="Silver" FontSize="Large"/>
        </Grid>
    </StackLayout>

这就是它在应用程序中的样子

Answer 4

这可以通过Grid轻松实现。

<Grid RowSpacing="0" ColumnSpacing="0"
              VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
              BackgroundColor="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <Image Source="buttonbg.png" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" />
                <Label Text="I am Label" Grid.Row="0" Grid.Column="1" />

</Grid>

或在如下代码背后：

Grid grid = new Grid
            {
                VerticalOptions = LayoutOptions.FillAndExpand,
                RowDefinitions = 
                {
                    new RowDefinition { Height = GridLength.Star }
                },
                ColumnDefinitions = 
                {
                     new ColumnDefinition { Width = new GridLength(10, GridUnitType.Absolute)
                    new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                    new ColumnDefinition { Width = new GridLength(10, GridUnitType.Absolute) }
                }
            };

            grid.Children.Add(new Image
                {
                    Source = "buttonbg.png",
                }, 0, 1, 0, 3);

            grid.Children.Add(new Label
                {
                    Text = "I am Label",
                    TextColor = Color.Black
                }, 0, 1, 1, 1);

            this.Content = grid;

我没有考虑对齐问题，因此您可能必须研究一下。

如何将标签文本添加到圆形boxview中

4 个答案: