让图像仅占用剩余空间

菲利克斯·K。

我希望图像占用的剩余空间StackLayout,但是以某种方式在XAML中这似乎是不可能的。图像总是尝试以最大尺寸显示自己。

<StackLayout>
  <Image Source="{Binding ProfileImage}" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start" />
  <StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="EndAndExpand">
    <Button HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonShare" Text="Share" />
    <Button HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonExternalLinks" Text="External links"/>
  </StackLayout>
</StackLayout>

我尝试了不同的Vertical-和Horizo​​ntalOptions来实现此目的,但是第二个按钮始终从视图中推出。使用特定高度也不是最佳解决方案。

相对布局似乎可行,但这意味着我必须绑定相对值,如果我针对不同的设备(例如iPhone4S和iPhone5),这不是一个好主意。

<RelativeLayout>
  <Image Source="{Binding ProfileImage}" Aspect="AspectFit"
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.7}"/>
  <StackLayout Orientation="Vertical"
         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8}"
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2}">
    <Button HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonShare" Text="Share" />
    <Button HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonExternalLinks" Text="External links"/>
  </StackLayout>
</RelativeLayout>

如何正确执行此操作?

RoelV

我认为您正在寻找的是网格。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  Source="{Binding ProfileImage}" Aspect="AspectFit" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
        <Button Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonShare" Text="Share" />
        <Button Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonExternalLinks" Text="External links"/>
    </Grid> 

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使表格中的图像仅占用所需的空间

Android:EditText占用剩余空间

在gnome中使用Chrome仅占用可用空间?

使输入占用所有剩余空间

使RecyclerView后空视图占用剩余空间?

Flutter使TableRow占用剩余的可用空间

如何使CSS Grid项目占用剩余空间?

使TabBarView占用所有剩余空间

Android:如何使自定义视图仅占用可用的屏幕空间?

获取容器占用标题下方屏幕的剩余空间

CSS网格中的行应占用剩余空间

工具栏中的搜索栏占用了剩余空间

如何调整元素的大小并占用所有剩余空间?

如何使CSS Grid的最后一行占用剩余空间

标头后占用所有剩余空间的Textarea

D驱动器上几乎没有可用空间,但是文件/文件夹仅占用很少的空间

CSS转换比例-图像仍然占用空间

剪切路径占用整个图像的空间?

图像未占用完整的div空间以获取圆形图像

使Div占用剩余宽度

如何使DIV占用剩余空间到底部的绝对位置容器中

将flex列与div一起使用时会占用所有剩余空间

在CSS3中,具有flex-grow 0.1的flex项目应该占用所有额外空间还是仅占10%?

如果我的内存使用量是8/16 GB,但压缩后仅占用3 GB,我应该没有13 GB的可用空间吗?

不按比例缩放SVG图像以适合剩余空间

调整图像大小后填充剩余空间,保持其长宽比

Kubeflow:图像拉->设备上没有剩余空间

使用SVG图像时div内剩余的空间

图像被缓存并占用了我的堆空间

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档