当我需要一个带边框的框和一些具有不同字体和大小的不同文本时该使用什么 [英] What to use when i need a box with a border and some different text with different fonts and sizee

问题描述

我花了几天时间寻找如何解决这个问题的答案这就是我想要的，只是制作了一个应该是什么样子的图像

Hi i have spend some days searching for the answer how to solve this This is what i want, just made a image how it should look like

1. 解决此问题的最佳解决方案是什么?

我尝试使用 Frame 执行此操作，但只允许使用 1 个内容.

I tryed to do this with a Frame but it just allowed be to use 1 content .

1. 我可以以某种方式使用多个内容吗(内容可以只有一种字体颜色和字体大小等设置.)

我刚到这部分

在这里，我尝试放置一个带有边距的标签 - 所以它在上面.但这实在是太糟糕了.因为我需要在框架下进行实施.像这样.

Here i try to put a label with margin with - so it go above. But this is really bad to to. because i need to have the implementation under the frams. like this.

_stack.Children.Add(frame);

_stack.Children.Add(bordertext);

当我用内容填充框架时，标签出现在另一个位置，因为当框架变高时它与边距的关系.

and when i fill the frame with content the lable apear in another position because how it relate to the margin when the Frame get higher.

但是如果我将标签实现放在框架之上，那么它就会出现在框架的背景中

But if i put the lable implementation above the Frame then it appear in the background of the frame

_stack.Children.Add(bordertext);

_stack.Children.Add(frame);

标签被我不知道如何摆脱的阴影磨损了.

And the label get weard with the shadow that i cant figure out how to get rid of.

C#

Frame frame = new Frame
            {                
                BorderColor = Color.Brown,              
                CornerRadius = 10,
                HasShadow = false,
                Margin = 10,
                BackgroundColor = Color.White, 
            };          
            
            
            Label bordertext = new Label( );
            bordertext.Text = "BorderText";
            bordertext.Margin = new Thickness(40, -65,0 , 0);
          
            bordertext.BackgroundColor = Color.White;
            

            _stack.Children.Add(frame);
            _stack.Children.Add(bordertext);

解决方案的一部分

@Jason 的解决方案将内容放在 Stacklayout 中，然后将其放入框架中 解决了具有不同字体、大小和内容的多个文本的问题.

@Jason 's solution to put the Content in a Stacklayout and then put it in a Frame Solves the problem with having more then one text with different font,sizes and stuff.

但是我在 Stacklayout 之外放了一个文本，所以我可以在边框上放置文本.但是因为我先放了边框文本，然后是框架.然后边框文本进入背景.如果我把它放在框架之后，那么我就会在前面.但是后来我对动态文本有一个大问题，即根据文本的数量，BorderText 会显得非常奇怪.即使我之前实施过，我也无法将 BorderText 放在前面，所以我无法将其向下移动一点.

But i put a text outside the Stacklayout so i can have the Text on the border. But because i put the Bordertext first and then the Frame. Then the Border text gets in the background. If i put it after the Frame then i gets in the front. But then i have a big problem with dynamic text that the BorderText will appear very strange depending on how much text. How i cant put the BorderText in front even if i implement in before so i cant move it down a little bit.

_stack.Children.Add(new Label { Text = "Bordertext", Margin = new Thickness(0, 0, 0, -25) });_stack.Children.Add(_frame);

_stack.Children.Add(new Label { Text = "Bordertext", Margin = new Thickness(0, 0, 0, -25) }); _stack.Children.Add(_frame);

推荐答案

要组成布局，首先要确定其他框内需要哪些框(矩形).每个盒子"是某种容器(布局)类型.

To compose a layout, first determine what boxes (rectangles) you need inside other boxes. Each "box" is some container (layout) type.

我看到一个框A"，父容器的大小，包含边界线B"，被一个框C"覆盖阻止一行的一部分，并包含一个文本D".

I see one box "A", the size of the parent-container, containing the border lines "B", overlaid by a box "C" that blocks part of one line, and contains a text "D".

我看到第二个框E"，从父容器稍微插入，其中包含附加内容F".

I see a second box "E", inset slightly from the parent-container, which contains additional content "F".

要覆盖多个项目，请使用一个单元格的网格，在 (row,column) 处的子项为 0,0 - 可以省略，因为这是默认值:

To overlay multiple items, use a one-cell Grid, with children at (row,column) of 0,0 - which can be omitted because is default:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsApp1.MainPage">

    <Grid BackgroundColor="Violet">
        <!-- Border lines formed by one box visually "inside" another, via margins.
             Instead use "Rectangle" if need rounded corners. -->
        <BoxView BackgroundColor="Red" Margin="10"/>
        <BoxView BackgroundColor="LightCoral" Margin="16"/>

        <!-- Text "box" given size by putting inside a StackLayout. -->
        <!-- Some of these dimensions may not be needed. -->
        <StackLayout WidthRequest="300" HeightRequest="30">
            <Label Text="Header Text" TextColor="Black" BackgroundColor="White" FontSize="18"
                   HorizontalOptions="Start"
                   WidthRequest="150" HeightRequest="30" Margin="20,0" Padding="20,0,0,0"/>
        </StackLayout>

        <!-- this contains your contents. -->
        <StackLayout BackgroundColor="#2196F3" Padding="10" Margin="40">
            <Label Text="Content line 1" HorizontalTextAlignment="Center" TextColor="White"/>
            <Label Text="Content line 2" HorizontalTextAlignment="Center" TextColor="White"/>
        </StackLayout>
    </Grid>

</ContentPage>

定位"是通过保证金"完成的和填充"属性.

"Positioning" is done via "Margin" and "Padding" properties.

我使用了各种颜色，所以你可以看到这个布局的各个部分.内容页面"可能不需要包装器；使用您的应用期望的任何内容作为最顶层的容器.

I've used various colors, so you can see the parts of this layout. "ContentPage" wrapper might not be needed; use whatever your app expects as topmost container.

带有标题文本的组框架"的布局:

layout of group' frame' with header text:

这篇关于当我需要一个带边框的框和一些具有不同字体和大小的不同文本时该使用什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！