如何在Xamarin表单中滚动框架?

时间:2017-10-26 06:02:50

标签: c# xamarin.forms

我在Xamarin Forms中设计了一个页面。我使用了StackLayout和Frame Combination。但ContentPage不滚动。页面上没有显示最后一帧。如何管理滚动?另外Listview自动添加滚动,我不想在Listview中显示滚动。怎么可能? 我的代码是:

<ContentPage.Content>
    <StackLayout >
        <StackLayout>
            <Frame>
                <StackLayout>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0"/>
                            <ColumnDefinition Width="40*"></ColumnDefinition>
                            <ColumnDefinition Width="60*"></ColumnDefinition>
                            <ColumnDefinition Width="0"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="0"></RowDefinition>
                        </Grid.RowDefinitions>

                        <!--<StackLayout Grid.Column="1" VerticalOptions="Center" Grid.RowSpan="6">-->
                        <Image Source="qrcode.png" Grid.Column="1" Grid.RowSpan="6"></Image>
                        <!--</StackLayout>-->

                        <!--<StackLayout Grid.Column="2" Grid.RowSpan="6" VerticalOptions="Center">-->
                        <StackLayout Grid.Column="2" Grid.Row="1" Orientation="Horizontal">
                            <Image Source="checkedguest.png"></Image>
                            <Label Text="{Binding Name}" Grid.Column="2" Grid.Row="1" Style="{StaticResource CommonLabel}" />
                        </StackLayout>

                        <StackLayout Grid.Column="2" Grid.Row="2" Orientation="Horizontal">
                            <Image Source="phone.png"></Image>
                            <Label Text="{Binding PhoneNo}" Grid.Column="2" Grid.Row="2" Style="{StaticResource CommonLabel}"/>
                        </StackLayout>

                        <StackLayout Grid.Column="2" Grid.Row="3" Orientation="Horizontal">
                            <Image Source="mobile.png"></Image>
                            <Label Text="{Binding MobileNo}" Grid.Column="2" Grid.Row="2" Style="{StaticResource CommonLabel}"/>
                        </StackLayout>

                        <StackLayout Grid.Column="2" Grid.Row="4" Orientation="Horizontal">
                            <Image Source="email.png"></Image>
                            <Label Text="{Binding Email}" Grid.Column="2" Grid.Row="2" Style="{StaticResource CommonLabel}"/>
                        </StackLayout>
                        <!--</StackLayout>-->
                    </Grid>
                    <StackLayout Margin="3,0,0,0">
                        <StackLayout Orientation="Horizontal">
                            <Image Source="address.png"></Image>
                            <Label Text="{Binding Address}" Style="{StaticResource CommonLabel}"/>
                        </StackLayout>
                        <StackLayout Orientation="Horizontal">
                            <Image Source="center.png"></Image>
                            <Label Text="{Binding Center}" Style="{StaticResource CommonLabel}"/>
                        </StackLayout>
                        <StackLayout Orientation="Horizontal">
                            <Image Source="Spouse.png"></Image>
                            <Label Text="{Binding SpouseName}" Style="{StaticResource CommonLabel}"/>
                        </StackLayout>
                    </StackLayout>
                </StackLayout>
            </Frame>
        </StackLayout>
        <StackLayout>
            <Frame >
                <StackLayout >
                    <Label Text="Services" FontAttributes="Bold"></Label>
                    <ListView SeparatorVisibility="None" ItemsSource="{Binding ServiceName}" HasUnevenRows="True">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="bulleticon.png"></Image>
                                        <Label Text="{Binding}"></Label>
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </Frame>
        </StackLayout>
        <StackLayout>
            <Frame>
                <StackLayout>
                    <Label Text="No. Of Persons" FontAttributes="Bold"></Label>
                    <StackLayout Orientation="Horizontal">
                        <Image Source="male.png"></Image>
                        <Label Text="Male" Style="{StaticResource CommonLabel}"></Label>
                        <Label Text="{Binding NoOfMale}"></Label>
                        <!--<ImageCell Text="{Binding NoOfMale}" ImageSource="male.png"></ImageCell>-->
                        <Image Source="female.png" Margin="10,0,0,0"></Image>
                        <Label Text="Female" ></Label>
                        <Label Text="{Binding NoOfFemale}"></Label>
                    </StackLayout>
                </StackLayout>
            </Frame>
        </StackLayout>
        <StackLayout>
            <Frame x:Name="ActionLayout" IsVisible="True" >
                <StackLayout >
                    <Label Text="Notes"  Style="{StaticResource CommonLabel}"></Label>
                    <Editor HorizontalOptions="FillAndExpand" HeightRequest="100" ></Editor>

                    <Label Text="Action" VerticalTextAlignment="Center" />
                    <Picker x:Name="ActionPicker" HorizontalOptions="FillAndExpand" ></Picker>
                    <Button Text="Submit" Style="{StaticResource DefaultButtonBackgroundColor}"></Button>
                </StackLayout>


            </Frame>
        </StackLayout>
    </StackLayout>

</ContentPage.Content>

1 个答案:

答案 0 :(得分:2)

用此

替换您的代码
<ContentPage.Content>
   <ScrollView x:Name="MainScroll" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
       <StackLayout >
          //Your main StackLayout code
       </StackLayout>
     </ScrollView>
</ContentPage.Content> 

修改

对于列表视图,根据在xaml.cs页面的构造函数中放入以下代码的内容进行展开。

设置ListView名称和特定的RowHeight。

MyListView.PropertyChanged += (object sender, System.ComponentModel.PropertyChangedEventArgs e) =>
            {
                if (e.PropertyName == "ItemsSource")
                {
                    try
                    {
                        if (MyListView.ItemsSource != null)
                        {
                            var tmp = (IList)MyListView.ItemsSource;
                            MyListView.HeightRequest = tmp.Count * MyListView.RowHeight;
                        }
                    }
                    catch (Exception ex)
                    {
                        ex.Track();
                    }
                }
            };