XAML 页眉和页脚固定，扩展器浮动

cigdeys3  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(132)

我正在用XAML建立一个页面。在这个页面上，我想使页眉和页脚固定。内容将有一个卷轴，也将有一个浮动按钮与扩展。
代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">
    <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <!-- MAIN CONTAINER -->
            <Grid Grid.Row="0" RowSpacing="0" BackgroundColor="#e6e6e6">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <!-- CUSTOM NAVBAR -->
                <Grid Grid.Row="0" BackgroundColor="{DynamicResource DarkAccentColor}" HeightRequest="64">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>

                    <!-- BACK ICON -->
                    <ffimageloading:CachedImage Grid.Column="0" HeightRequest="20" WidthRequest="20" Margin="0,0,0,12"  VerticalOptions="End" HorizontalOptions="Center" BackgroundColor="Transparent" CacheType="All" FadeAnimationEnabled="false" Opacity="1" Source="{StaticResource BackArrowWhite}" Aspect="AspectFit">
                        <ffimageloading:CachedImage.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding NavigateBackCommand}"/>
                        </ffimageloading:CachedImage.GestureRecognizers>
                    </ffimageloading:CachedImage>

                    <!-- APP NAME -->
                    <Label Grid.Column="1" VerticalOptions="End" Margin="5,0,0,10" Text="{Binding PageTitle}" FontSize="20" FontAttributes="None" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" TextColor="{ DynamicResource BaseTextColor }" />

                    <!-- SETTINGS ICON -->
                    <ffimageloading:CachedImage Grid.Column="2" HeightRequest="20" WidthRequest="20" Margin="0,0,10,12"  VerticalOptions="End" HorizontalOptions="Center" BackgroundColor="Transparent" CacheType="All" FadeAnimationEnabled="false" Opacity="1" Source="{StaticResource ThreeDotsWhite}" Aspect="AspectFit">
                        <ffimageloading:CachedImage.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding NavigateToSettingsCommand}"/>
                        </ffimageloading:CachedImage.GestureRecognizers>
                    </ffimageloading:CachedImage>
                </Grid>

                <!-- MAIN AREA -->
                <ScrollView Grid.Row=1" BackgroundColor="#e6e6e6" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" Margin="0">
                    <!-- MAIN GRID -->
                    <Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="4" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="0" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="0" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="0" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <!-- Expander One -->
                        <xct:Expander Grid.Row="1" Background="Transparent" ExpandAnimationLength="500" CollapseAnimationLength="500" Padding="10,0,10,10">
                            <xct:Expander.Header>
                                <Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent" Padding="0,10,0,0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <Image Source="{ StaticResource CollapseUp }" HeightRequest="15" WidthRequest="15" HorizontalOptions="End" VerticalOptions="Start" Margin="5,5,0,0">
                                        <Image.Triggers>
                                            <DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}" Value="True">
                                                <Setter Property="Source" Value="{ StaticResource CollapseDown }" />
                                            </DataTrigger>
                                        </Image.Triggers>
                                    </Image>

                                    <Label Grid.Column="1" Grid.Row="0" FontFamily="{StaticResource RobotoMonoRegular}" VerticalOptions="End" Margin="15,0,0,0" Text="Expander One" FontSize="18" FontAttributes="None" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" TextColor="{ DynamicResource ServiceOrderInfoValueColor }" />
                                </Grid>
                            </xct:Expander.Header>
                            <xct:Expander.ContentTemplate>
                                <DataTemplate>
                                    <Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <!-- SEPARATOR -->
                                        <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Opacity="0.30" Margin="0,10" HeightRequest="0.8" Color="#9B9B9B"/>
                                    </Grid>
                                </DataTemplate>
                            </xct:Expander.ContentTemplate>
                        </xct:Expander>

                        <!-- Expander Two -->
                        <xct:Expander Grid.Row="3" Background="Transparent" ExpandAnimationLength="500" CollapseAnimationLength="500" Padding="10,0,10,10">
                            <xct:Expander.Header>
                                <Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent" Padding="0,10,0,0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <Image Source="{ StaticResource CollapseUp }" HeightRequest="15" WidthRequest="15" HorizontalOptions="End" VerticalOptions="Start" Margin="5,5,0,0">
                                        <Image.Triggers>
                                            <DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}" Value="True">
                                                <Setter Property="Source" Value="{ StaticResource CollapseDown }" />
                                            </DataTrigger>
                                        </Image.Triggers>
                                    </Image>

                                    <Label Grid.Column="1" Grid.Row="0" FontFamily="{StaticResource RobotoMonoRegular}" VerticalOptions="End" Margin="15,0,0,0" Text="Expander Two" FontSize="18" FontAttributes="None" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" TextColor="{ DynamicResource ServiceOrderInfoValueColor }" />
                                </Grid>
                            </xct:Expander.Header>
                            <xct:Expander.ContentTemplate>
                                <DataTemplate>
                                    <Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                    </Grid>
                                </DataTemplate>
                            </xct:Expander.ContentTemplate>
                        </xct:Expander>

                        <!-- Expander Three -->
                        <xct:Expander Grid.Row="5" Background="Transparent" ExpandAnimationLength="500" CollapseAnimationLength="500" Padding="10,0,10,10">
                            <xct:Expander.Header>
                                <Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent" Padding="0,10,0,0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <Image Source="{ StaticResource CollapseUp }" HeightRequest="15" WidthRequest="15" HorizontalOptions="End" VerticalOptions="Start" Margin="5,5,0,0">
                                        <Image.Triggers>
                                            <DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}" Value="True">
                                                <Setter Property="Source" Value="{ StaticResource CollapseDown }" />
                                            </DataTrigger>
                                        </Image.Triggers>
                                    </Image>

                                    <Label Grid.Column="1" Grid.Row="0" FontFamily="{StaticResource RobotoMonoRegular}" VerticalOptions="End" Margin="15,0,0,0" Text="Expander Three" FontSize="18" FontAttributes="None" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" TextColor="{ DynamicResource ServiceOrderInfoValueColor }" />
                                </Grid>
                            </xct:Expander.Header>
                            <xct:Expander.ContentTemplate>
                                <DataTemplate>
                                    <Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <!-- SEPARATOR -->
                                        <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Opacity="0.30" Margin="0,10" HeightRequest="0.8" Color="#9B9B9B"/>
                                    </Grid>
                                </DataTemplate>
                            </xct:Expander.ContentTemplate>
                        </xct:Expander>
                    </Grid>
                </ScrollView>

                <!-- Footer -->
                <Grid Grid.Row="2" BackgroundColor="White" RowSpacing="10" ColumnSpacing="20" Padding="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <!-- YES BUTTON -->
                    <artina:Button BorderColor="#7b7b7b" BorderWidth="1" Grid.Column="0" Grid.Row="0" FontFamily="{StaticResource RobotoMonoBold}" Margin="15" FontSize="14" FontAttributes="Bold" Style="{StaticResource RatButtonStylePrevious}" VerticalOptions="EndAndExpand" Text="Back" WidthRequest="160" Command="{Binding ToBack}"/>

                    <!-- NO BUTTON-->
                    <artina:Button Grid.Column="1" Grid.Row="0" FontFamily="{StaticResource RobotoMonoBold}" Margin="15" FontSize="14" FontAttributes="Bold" Style="{StaticResource RatButtonStyleNext}" VerticalOptions="EndAndExpand" Text="Next" WidthRequest="160" Command="{Binding ToNext}"/>
                </Grid>
            </Grid>
        </Grid>

        <!-- Floating expander -->
        <Frame CornerRadius="30"
                    Padding="15"
                    Margin="0,0,15,40"
                    HorizontalOptions="End"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize"               
                    VerticalOptions="End">

            <xct:Expander Rotation="180">

                <xct:Expander.Header>
                    <Label
                             Style="{StaticResource LabelStyle}"
                             Text="Item">

                        <Label.Triggers>
                            <DataTrigger
                                     Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"
                                                       TargetType="Label" Value="True">
                                <Setter Property="Text" Value="a" />
                            </DataTrigger>
                        </Label.Triggers>

                    </Label>
                </xct:Expander.Header>

                <StackLayout>
                    <Label Style="{StaticResource LabelStyle}"
                                Text="01" />

                    <Label Style="{StaticResource LabelStyle}"
                                Text="02" />

                    <Label Style="{StaticResource LabelStyle}"
                                Text="03" />
                </StackLayout>

            </xct:Expander>

        </Frame>
    </AbsoluteLayout>
</ContentPage>

但我不能使页脚固定，总是有一些冲突与我的浮动扩展器

xaml

1条答案

按热度按时间
piv4azn7

piv4azn71#

CollectionView页眉和页脚的设计理念并不是它们应该粘在屏幕的特定区域，它们就像屏幕上的页眉和页脚一样，所以如果它收缩，它们会彼此靠近。
但是如果你想要一个视图，坚持在屏幕的底部，无论你添加到它只是使用网格来做这一点。

<Grid RowDefinitions="Auto,*,Auto">

  <StackLayout Grid.Row="0" >
   <!--Whatever view you wanna display...-->
  </StackLayout>

   <CollectionView Grid.Row= "1">
     ......
   </CollectionView >

   <StackLayout Grid.Row="2" >
     <!--Whatever view you wanna display...-->
   </StackLayout>

</Grid>

希望这能有所帮助，
如果您有疑问，请随时询问我

赞(0）分享  回复(0）举报  2022-12-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com