XAML 如何将一个元素的高度和宽度设置为另一个元素的高度和宽度+在xamarin.forms中多一点?

gxwragnw  于 2023-08-01  发布在  其他
关注(0)|答案(1)|浏览(105)

我有这3个标签元素,其文本将更改,我希望矩形元素更改其形状,以适应文本。(注:它们需要是矩形,不能使用BoxView代替)Image
我已经设法使矩形适合文本完美,但我不能使它添加一些额外的空间。下面是其中一个标记的XAML代码

<Rectangle Fill="red"
                                                   Grid.Column="0"
                                                   VerticalOptions="Center"
                                                   HorizontalOptions="Center"
                                                   HeightRequest="{Binding Height, Source={x:Reference TAG1}}" 
                                                   WidthRequest="{Binding Width, Source={x:Reference TAG1}}"/>

                                        <Label Text="{Binding tags[0]}"
                                               Grid.Column="0"
                                               TextColor="White"
                                               FontFamily="Kanit"
                                               FontSize="12"
                                               HorizontalOptions="Center"
                                               VerticalOptions="Center"
                                               x:Name="TAG1"/>

字符串
编辑:Here is what I'm trying to achieve
Edit2:我设法做到了,虽然是以一种迂回的方式,通过将标签放入框架中,我能够按照我想要的方式操纵框架的大小,因此我将引用从标签移动到框架,使框架透明并使用矩形。

<!--FirstTag -->
                                        <Rectangle StrokeThickness="1"
                                                   RadiusX="7"
                                                   RadiusY="7"
                                                   Grid.Column="0"
                                                   VerticalOptions="Center"
                                                   HorizontalOptions="Center"
                                                   HeightRequest="{Binding Source={x:Reference TAG1}, Path=Height}" 
                                                   WidthRequest="{Binding Source={x:Reference TAG1}, Path=Width}">
                                            <Rectangle.Stroke>
                                                <LinearGradientBrush EndPoint="1,1">
                                                    <GradientStop Color="#4DD599"
                                                                  Offset="0.1"/>
                                                    <GradientStop Color="#00918E"
                                                                  Offset="1.0"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Stroke>
                                        </Rectangle>

                                        <Frame Grid.Column="0"
                                               CornerRadius="10"
                                               HasShadow="False"
                                               Padding="7, 5, 7, 5"
                                               x:Name="TAG1"
                                               BackgroundColor="Transparent">
                                            
                                               <Label Text="{Binding tags[0]}"
                                                      Grid.Column="0"
                                                      TextColor="White"
                                                      FontFamily="Kanit"
                                                      FontSize="12"
                                                      HorizontalOptions="Center"
                                                      VerticalOptions="Center"/>
                                        </Frame>
                                        <!--EndFirstTag-->

lc8prwob

lc8prwob1#

既然你的目标是Xamarin,但是,如果你的目标是毛伊岛。我认为Border比毛伊岛的Frame灵活得多。使用Border,您可以为每个角授予单独的角半径、笔划颜色和笔划厚度。

<HorizontalStackLayout> 
        <Border
               StrokeThickness="2"
               Stroke="green"
               Padding="20"
               BackgroundColor="Transparent"
               HorizontalOptions="Center"
               VerticalOptions="Center">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="20"/>
            </Border.StrokeShape>

            <Label Text="TAG1"
                   TextColor="White"
                   FontSize="18"
                   FontAttributes="Bold"/>
        </Border>

        <Border
               StrokeThickness="2"
               Stroke="green"
               Padding="20"
               BackgroundColor="Transparent"
               HorizontalOptions="Center"
               VerticalOptions="Center">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="20"/>
            </Border.StrokeShape>

            <Label Text="TAG2"
                   TextColor="White"
                   FontSize="18"
                   FontAttributes="Bold"/>
        </Border>
</HorizontalStackLayout>

字符串

效果:


的数据

相关问题