【问题标题】:Responsive grid in Xamarin.formsXamarin.forms 中的响应式网格
【发布时间】:2016-02-09 06:36:28
【问题描述】:

参考my previous question,我需要一些帮助,让列表视图项目在所有平台、所有尺寸以及横向和纵向模式下都能响应。我现在拥有的列表视图在 10" 屏幕上变得很小。我想让它响应。任何参考来实现这一点?

【问题讨论】:

  • 如果您仍然需要关于背景颜色更改的帮助,请删除最后一个问题并发布另一个问题,因为您应该只问一个问题。
  • @Pete 好的,我会这样做的

标签: c# android ios windows-phone xamarin.forms


【解决方案1】:

如果您的ListView 很小并且没有覆盖整个页面,您可能会遇到某种固定宽度问题?

在您的mainList 上,您设置为ContentPage,没有任何布局选项。

尝试先设置外部元素的HorizontalOptionsVerticalOptions,一旦你开始工作,专注于内部控件,以确保它们之后占用所需的空间量。

        o.HorizontalOptions = LayoutOptions.FillAndExpand;
        o.VerticalOptions = LayoutOptions.FillAndExpand;

ListView BackgroundColor 更改为一些明显的颜色,以帮助您确保布局正确。

【讨论】:

  • 列表视图覆盖了整个页面。但问题在于行的大小和字体大小。与工具栏项相比,listview 文本和整个高度都很小
  • 你能发过来我看一下吗?它很可能仍然与您内部子项/列表视图项上的 Horizo​​ntalOptions 和 VerticalOptions 有关。
【解决方案2】:

每个 Xamarin.Forms.Element(因此每个页面)都实现了 Width 和 Height 属性,您可以使用它们来根据 Page-Size 调整布局。 您应该在此页面上获取有关 VisualElement 类 https://developer.xamarin.com/api/type/Xamarin.Forms.VisualElement/ 的战利品

您还可以使用 Device.Idiom 来检查您是在手机还是平板电脑上,并单独处理每个案例:

        if (Device.Idiom == TargetIdiom.Phone)
            //your code goes here
        else
            if (Device.Idiom == TargetIdiom.Tablet)
            //your code goes here
        else
            throw new PlatformNotSupportedException();

对于横向/纵向,只需检查页面的宽度/高度属性:

        if (Width > Height)
        {
            //"landscape"
        }
        else
        {
            //"portrait"
        }

为了处理方向变化,为 SizeChanged 实现一个事件处理程序或简单地覆盖 OnSizeAllocated (https://developer.xamarin.com/api/member/Xamarin.Forms.VisualElement.OnSizeAllocated/p/System.Double/System.Double/)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-09-03
    • 1970-01-01
    • 2016-05-18
    • 2020-01-27
    • 2018-01-16
    • 1970-01-01
    • 2021-01-24
    • 2017-09-14
    相关资源
    最近更新 更多