0

我有一个垂直堆栈布局的表单。它有两个孩子。第一个(最上面的)孩子是一个条目。第二个孩子是列表视图。我的问题是我希望列表视图扩展以填充屏幕上的剩余空间,然后可以滚动。没有为列表视图设置一个特定的高度(这显然不适用于不同的屏幕尺寸)我一直无法实现这一点。如果我将列表视图的垂直选项设置为 FillAndExpand,它似乎会从屏幕边缘展开,并且您无法滚动到列表视图中最底部的条目。在不设置特定高度的情况下如何实现这一点?此布局是在 C# btw 中动态生成的。父堆栈布局的垂直选项也是 FillAndExpand。

我尝试按照@KFactory 的建议使用网格。当我这样做时,我得到了这个结果:

在此处输入图像描述

您可以看到列表视图未填充底部的空白。

这是视图被添加到的页面:

 <?xml version="1.0" encoding="utf-8" ?>
    <local:BaseContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:TecMan.MobileApp"
                 xmlns:f="clr- 
     namespace:TecMan.MobileApp.Behaviours;assembly=TecMan.MobileApp"
                 x:Class="TecMan.MobileApp.MainPage">
    <AbsoluteLayout x:Name="frmLayout" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="LightGray">
        <StackLayout
            Orientation="Vertical"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">
            <Grid 
                x:Name="frmMain" 
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                RowSpacing="0">
                <local:BaseContentPage.Behaviors>
                    <f:BindingChangedBehaviour/>
                </local:BaseContentPage.Behaviors>
            </Grid>
        </StackLayout>
    </AbsoluteLayout>
    </local:BaseContentPage>

控件被添加到网格“frmMain”

在控件背后的代码中是动态添加的(内容因场景而异)。控件的行/列和网格位置是这样定义的:

 Grid frmMain = page as Grid;  //page.FindByName<Grid>("frmMain");
                if (frmMain == null) throw new NotImplementedException("Only support Grid");

                frmMain.ColumnDefinitions.Clear();
                frmMain.ColumnDefinitions.Add(new ColumnDefinition
                {
                     Width = new GridLength(1, GridUnitType.Star)
                });

                frmMain.RowDefinitions.Clear();
                frmMain.RowDefinitions.Add(new RowDefinition
                {
                    Height = new GridLength(1, GridUnitType.Auto)
                });
                frmMain.RowDefinitions.Add(new RowDefinition
                {
                    Height = new GridLength(1, GridUnitType.Star)
                });

            Grid.SetColumn(btnFrame, 0);
            Grid.SetRow(btnFrame, 0);

            Grid.SetColumn(oViewColumn, 0);
            Grid.SetRow(oViewColumn, 1);

第一个控件是包装在框架中的条目。第二个控件是一个自定义列表视图,其 xaml 为:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TecMan.MobileViewModels.Controls.CollapsibleListView"
              xmlns:local="clr-namespace:TecMan.MobileViewModels.Controls;assembly=TecMan.MobileViewModels"  >
    <ContentView.Content
       BackgroundColor="LightGrey" >

        <ListView
             VerticalOptions="FillAndExpand"
             BackgroundColor="White" 
            HasUnevenRows="True"
            RowHeight="-1"
            x:Name="collapseLV"
            MinimumHeightRequest="1000"
             ItemsSource="{Binding Items}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <local:CollapsibleGridView  Title="{Binding Title}"
                                                    TitleColour="#99ff66"  
                                                    ButtonVisible="{Binding ButtonVisible}" 
                                                    CaptionField="{Binding CaptionField}" 
                                                    DataField="{Binding DataField}" 
                                                    IsHiddenField="{Binding IsHiddenField}" 
                                                    ButtonColour="{Binding ButtonColour}"                                                   
                                                    VisibleItemsColour="{Binding VisibleItemsColour}" 
                                                    HiddenItemsColour="{Binding HiddenItemsColour}" 
                                                    CellBackgroundColor="{Binding CellBackgroundColor}" 
                                                    ImageFile="{Binding ImageFile}"    
                                                    ItemsSource="{Binding}">
                        </local:CollapsibleGridView>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>



    </ContentView.Content>
</ContentView>
4

1 回答 1

1

Xamarin Forms 不像 WPF 那样(还)强大......有一些“不自然”的行为。在我的情况下,我使用这样的网格控件:

<Grid RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- Row 0: your entry />
    <Entry Grid.Row="0" ... />

    <!-- Row 1: your Listview that will take all available remaining space /> 
    <Listview Grid.Row="1"
        ...
        />
</Grid>

请注意,Grid 的“RowSpacing”属性设置为“0”以避免控件之间出现空白。现在应该上班了...


编辑 1(完整的 xaml 代码):

<?xml version="1.0" encoding="utf-8" ?>
<local:BaseContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TecMan.MobileApp"
    xmlns:f="clr- 
     namespace:TecMan.MobileApp.Behaviours;assembly=TecMan.MobileApp"
                 x:Class="TecMan.MobileApp.MainPage">

    <!-- Set your page's behavior here -->
    <local:BaseContentPage.Behaviors>
        <f:BindingChangedBehaviour/>
    </local:BaseContentPage.Behaviors>

    <!-- Set directly a grid as content of your page -->
    <Grid 
        x:Name="frmMain" 
        BackgroundColor="LightGray"
        RowSpacing="0">

        <Grid.RowDefinitions>
            <RowDefinition x:Name="r1" Height="Auto" />
            <RowDefinition x:Name="r2" Height="*" />
        </Grid.RowDefinitions>

        <!-- Row 0: your entry />
        <Entry Grid.Row="0" ... />

        <!-- Row 1: your Listview that will take all available remaining space /> 
        <local:CollapsibleListView 
            Grid.Row="1"
            ...
            />

    </Grid>
</local:BaseContentPage>

在后面的代码中使用行名称('r1' & 'r2')来添加你的控件。

我建议你不要在 UI 初始化后面混用 XAML 和代码……这不是很清楚,而且是错误的来源……

于 2018-05-21T09:57:38.453 回答