简体   繁体   English

如何以Xamarin形式滚动框架?

[英]How to Scroll Frame in Xamarin Forms?

I have designed one page in Xamarin Forms.I have used StackLayout and Frame Combination. 我已经用Xamarin Forms设计了一页,使用了StackLayout和Frame Combination。 But ContentPage doesn't scrolling. 但是ContentPage不会滚动。 The last frame is not displaying on the page.How can I manage scrolling? 页面上未显示最后一帧。如何管理滚动? Also Listview add scroll automatic, I don't want to display scroll in Listview. 另外Listview自动添加滚动,我不想在Listview中显示滚动。 How's it possible? 怎么可能 My code is : 我的代码是:

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

Replace your code with this 以此替换您的代码

<ContentPage.Content>
   <ScrollView x:Name="MainScroll" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
       <StackLayout >
          //Your main StackLayout code
       </StackLayout>
     </ScrollView>
</ContentPage.Content> 

EDIT 编辑

For List view expand based on content put following code in constructer of xaml.cs page. 对于基于内容的列表视图展开,将以下代码放入xaml.cs页面的构造函数中。

Set your ListView name and specific RowHeight. 设置您的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();
                    }
                }
            };

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM