Xamarin形成stacklayout问题

时间:2018-05-21 09:27:40

标签: listview xamarin.forms stacklayout

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

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

enter image description here

您可以看到列表视图未填充的底部有一个间隙。

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

 <?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>

控件正被添加到网格&#39; frmMain&#39;

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

 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>

1 个答案:

答案 0 :(得分:1)

Xamarin Forms并不像WPF那样强大......有一些不自然的&#39;行为。 在我的情况下,我使用这样的网格控件:

<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>

请注意&#39; RowSpacing&#39; Grid的属性设置为&#39; 0&#39;避免控件之间的空白空间。 应该现在正在工作......

编辑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>

在后面的代码中使用行名称(&#39; r1&#39;&amp;&#39; r2&#39;)来添加控件。

我建议你不要混淆XAML和UI初始化背后的代码 ......它不是很清楚,也不是错误的根源......