个人中心
gpt4 book ai didi

.NET MAUI how to make the border same size as the image?(.NET MAUI如何让边框和图片大小一样？)

转载 作者：bug小助手 更新时间：2023-10-27 20:09:38 29 4
gpt4 key购买 nike



Code:

代码：


<Grid>
   <Border  BackgroundColor="Aqua">
        <Image 
            x:Name="cardImage"
            Source="test4.png"
            Aspect="AspectFit"
            />
   </Border>
</Grid>

I am expecting this code to generate a border as big as the image, however I get below instead. I am not clear what is the reason for the spaces above and below the image.

我期待这段代码生成一个与图像一样大的边框，但我得到的却是下面的边框。我不清楚图像上方和下方空格的原因是什么。


How can I make the size of the border as high as the image ?

我如何才能使边框的大小与图像一样高？


EDIT: Adding a full XAML. Image is any PNG that is 640x640px.

编辑：添加完整的XAML。图像是640x640px的任何PNG。


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Test101.MainPage">
    
    <ScrollView>
        <VerticalStackLayout
            VerticalOptions="Center">
            <Grid>
                <Border BackgroundColor="Aqua">
                    <Image Source="atom_1.png" Aspect="AspectFit"/>
                </Border>
            </Grid>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

enter image description here


更多回答

The image is being AspectFit into space available from Grid. Border has no way of knowing image is not using the full space it was given. Add to question the declarations of surrounding layouts, starting from root of xaml (contentpage?)

图像正在自动调整到网格中的可用空间。边界无法知道图像没有使用它被赋予的全部空间。从xaml的根目录（contentpage？）开始，添加对周围布局声明的质疑

@ToolmakerSteve, thank you. This is exactly it. But then the question is why the Border gets an arbitrary height ? If I remove the Image, Border resizes to 0 x 0, so that's why I was expecting it to be as big as the image, after adding an image in.

@工具制造者史蒂夫，谢谢你。就是这个。但接下来的问题是，为什么边界会有一个武断的高度？如果我删除图像，边框的大小将调整为0 x 0，这就是为什么在中添加图像后，我希望它与图像一样大。

@Charles full XAML please.

@Charles完整的XAML请。

@Charles. That is what I tried to explain. The image has sized itself to the grid cell. Then it drew itself, but did not use the full height. I know it looks a certain size, but internally, the height of the area it owns became as tall as the grid.

@查尔斯。这就是我试图解释的。图像已调整到网格单元格的大小。然后它自己画，但没有使用完整的高度。我知道它看起来有一定的大小，但在内部，它所拥有的区域的高度变得和网格一样高。

Wrap border with verticalstacklayout having vertical layout = Center. Better advice is possible if you show more xaml surrounding what you show. Please read carefully what I asked in first comment.

用垂直布局=居中的垂直堆叠布局换行边框。如果围绕所显示的内容显示更多的XAML，则可能会有更好的建议。请仔细阅读我在第一条评论中提出的问题。

优秀答案推荐

You can try the following code:

您可以尝试以下代码：


     <Border                   
        Stroke="#C49B33"
        StrokeThickness="6"
        StrokeShape="RoundRectangle 0,0,0,0"
        Background="#2B0B98"
        Padding="0"
         >
        <Image  BackgroundColor="Pink" 
        Source="test.jpg"
        Aspect="AspectFit"
        />
    </Border>

更多回答

Thank you, which part of this code expected to make the Border as big as the Image ?

谢谢，这段代码的哪一部分应该使边框和图像一样大？

The size of the Border is automatically adjusted according to the size of the image.

边框的大小会根据图像的大小自动调整。

29 4 0
文章推荐： Jenkins Pipeline script environment if condition(Jenkins管道脚本环境IF条件)
文章推荐： Flask/React: Returned json data not being availabe(FlASK/REACTION：返回的json数据不可用)
文章推荐： Checking whether a number is a power of two(检查一个数是否是2的幂)
文章推荐： What's the difference between ClusterIP, NodePort and LoadBalancer service types in Kubernetes?(Kubernetes中的ClusterIP、NodePort和LoadBalancer服务类型有什么区别？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com