处理 MAUI 中 AbsoluteLayout 内元素之间的深度

Question

我有一个名为 CameraPage 的页面，其中包含一个具有多个子级的 AbsoluteLayout，我的问题是填充布局的最大元素始终位于其他所有元素的前面。

这是前面有 Frame 且突出显示 AbsoluteLayout 的页面： 这是隐藏框架时的样子（为了清楚起见，我强制显示绿色状态按钮）： 与问题相关的代码是：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="DermAtoZ.Views.Pages.CameraPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:converters="clr-namespace:DermAtoZ.Views.Converters"
    xmlns:custom="clr-namespace:DermAtoZ.Views.Custom"
    xmlns:local="clr-namespace:DermAtoZ.MarkupExtentions"
    xmlns:p="clr-namespace:DermAtoZ.Views.Pages"
    xmlns:vm="clr-namespace:DermAtoZ.ViewModels"
    Title="{local:Translate AppName}"
    x:DataType="vm:CameraViewModel">
    <Shell.TitleView>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="180" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Margin="0"
                HeightRequest="50"
                HorizontalOptions="CenterAndExpand"
                MinimumHeightRequest="50"
                MinimumWidthRequest="180"
                Source="dermatoz.png"
                WidthRequest="180" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                FontSize="Small"
                HorizontalTextAlignment="Center"
                Text="Powered by Pixience"
                TextColor="White"
                VerticalOptions="Center"
                VerticalTextAlignment="Center" />
        </Grid>
    </Shell.TitleView>
    <ContentPage.ToolbarItems>
        <ToolbarItem
            Clicked="OpenConfigurationPage_Clicked"
            Order="Secondary"
            Priority="0"
            Text="{local:Translate Configuration}" />
        <ToolbarItem
            Clicked="PickPhoto_ClickedAsync"
            Order="Secondary"
            Priority="0"
            Text="{local:Translate Gallery}" />
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
        <Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="16*" />
                <RowDefinition Height="3*" />
                <RowDefinition Height="5*" />
            </Grid.RowDefinitions>
            <AbsoluteLayout>
                <!--  Status button  -->
                <ImageButton
                    x:Name="StatusButton"
                    AbsoluteLayout.LayoutBounds="0.05, 0.05"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    BackgroundColor="{StaticResource GreenColor}"
                    BorderColor="White"
                    BorderWidth="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=8}"
                    Clicked="Resend_Clicked"
                    HeightRequest="{Binding Height, Source={RelativeSource AncestorType={x:Type AbsoluteLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=10}"
                    IsVisible="False"
                    Source="confirm.png">
                    <ImageButton.Style>
                        <Style BasedOn="{StaticResource ButtonImageRound}" TargetType="ImageButton">
                            <Style.Triggers>
                                <DataTrigger
                                    Binding="{Binding TransferStatus}"
                                    TargetType="ImageButton"
                                    Value="False">
                                    <Setter Property="Source" Value="repeat.png" />
                                    <Setter Property="IsVisible" Value="True" />
                                    <Setter Property="BackgroundColor" Value="{StaticResource RedColor}" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ImageButton.Style>
                </ImageButton>

                <!--  Zone label  -->
                <Button
                    Margin="0"
                    Padding="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=12}"
                    AbsoluteLayout.LayoutBounds="1, 0.7, AutoSize, AutoSize"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    BackgroundColor="{StaticResource PrimaryLightColor}"
                    BorderColor="White"
                    BorderWidth="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=8}"
                    Clicked="OpenBodyPage_Clicked"
                    FontSize="Medium"
                    IsVisible="{Binding CaptureMode, Converter={StaticResource InvertBoolConverter}}"
                    Rotation="90"
                    Text=" Zone "
                    TextColor="White"
                    TextTransform="Uppercase"
                    TranslationX="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=40}" />

                <!--  Background image  -->
                <Frame
                    Margin="0"
                    Padding="0"
                    AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                    AbsoluteLayout.LayoutFlags="All"
                    BackgroundColor="Black"
                    CornerRadius="0"
                    IsClippedToBounds="True"
                    IsVisible="False">
                    <custom:PinchToZoomContainer VerticalOptions="Center">
                        <custom:PinchToZoomContainer.Content>
                            <Image x:Name="TakenPictureImage" Aspect="AspectFit" />
                        </custom:PinchToZoomContainer.Content>
                    </custom:PinchToZoomContainer>

                </Frame>
            </AbsoluteLayout>
        </Grid>
    </ContentPage.Content>
</ContentPage>

到目前为止，我已经尝试使用 ZIndex 来对元素进行排序，但这没有结果，并且通过将 Frame 放在第一个或最后一个来重新排序元素，但这也不起作用。

这是完整的代码，以防需要更多上下文：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="DermAtoZ.Views.Pages.CameraPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:converters="clr-namespace:DermAtoZ.Views.Converters"
    xmlns:custom="clr-namespace:DermAtoZ.Views.Custom"
    xmlns:local="clr-namespace:DermAtoZ.MarkupExtentions"
    xmlns:p="clr-namespace:DermAtoZ.Views.Pages"
    xmlns:vm="clr-namespace:DermAtoZ.ViewModels"
    Title="{local:Translate AppName}"
    x:DataType="vm:CameraViewModel">
    <Shell.TitleView>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="180" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Margin="0"
                HeightRequest="50"
                HorizontalOptions="CenterAndExpand"
                MinimumHeightRequest="50"
                MinimumWidthRequest="180"
                Source="dermatoz.png"
                WidthRequest="180" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                FontSize="Small"
                HorizontalTextAlignment="Center"
                Text="Powered by Pixience"
                TextColor="White"
                VerticalOptions="Center"
                VerticalTextAlignment="Center" />
        </Grid>
    </Shell.TitleView>
    <ContentPage.ToolbarItems>
        <ToolbarItem
            Clicked="OpenConfigurationPage_Clicked"
            Order="Secondary"
            Priority="0"
            Text="{local:Translate Configuration}" />
        <ToolbarItem
            Clicked="PickPhoto_ClickedAsync"
            Order="Secondary"
            Priority="0"
            Text="{local:Translate Gallery}" />
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
        <Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="16*" />
                <RowDefinition Height="3*" />
                <RowDefinition Height="5*" />
            </Grid.RowDefinitions>
            <AbsoluteLayout>
                <!--  Status button  -->
                <ImageButton
                    x:Name="StatusButton"
                    AbsoluteLayout.LayoutBounds="0.05, 0.05"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    BackgroundColor="{StaticResource GreenColor}"
                    BorderColor="White"
                    BorderWidth="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=8}"
                    Clicked="Resend_Clicked"
                    HeightRequest="{Binding Height, Source={RelativeSource AncestorType={x:Type AbsoluteLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=10}"
                    IsVisible="False"
                    Source="confirm.png">
                    <ImageButton.Style>
                        <Style BasedOn="{StaticResource ButtonImageRound}" TargetType="ImageButton">
                            <Style.Triggers>
                                <DataTrigger
                                    Binding="{Binding TransferStatus}"
                                    TargetType="ImageButton"
                                    Value="False">
                                    <Setter Property="Source" Value="repeat.png" />
                                    <Setter Property="IsVisible" Value="True" />
                                    <Setter Property="BackgroundColor" Value="{StaticResource RedColor}" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ImageButton.Style>
                </ImageButton>

                <!--  Zone label  -->
                <Button
                    Margin="0"
                    Padding="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=12}"
                    AbsoluteLayout.LayoutBounds="1, 0.7, AutoSize, AutoSize"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    BackgroundColor="{StaticResource PrimaryLightColor}"
                    BorderColor="White"
                    BorderWidth="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=8}"
                    Clicked="OpenBodyPage_Clicked"
                    FontSize="Medium"
                    IsVisible="{Binding CaptureMode, Converter={StaticResource InvertBoolConverter}}"
                    Rotation="90"
                    Text=" Zone "
                    TextColor="White"
                    TextTransform="Uppercase"
                    TranslationX="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=40}" />

                <!--  Background image  -->
                <Frame
                    Margin="0"
                    Padding="0"
                    AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                    AbsoluteLayout.LayoutFlags="All"
                    BackgroundColor="Black"
                    CornerRadius="0"
                    IsClippedToBounds="True"
                    IsVisible="False">
                    <custom:PinchToZoomContainer VerticalOptions="Center">
                        <custom:PinchToZoomContainer.Content>
                            <Image x:Name="TakenPictureImage" Aspect="AspectFit" />
                        </custom:PinchToZoomContainer.Content>
                    </custom:PinchToZoomContainer>

                </Frame>
            </AbsoluteLayout>
            <!--  Bottom menu  -->
            <FlexLayout
                Grid.Row="1"
                AlignContent="Center"
                AlignItems="Center"
                BackgroundColor="{StaticResource PrimaryDarkColor}"
                Direction="Row"
                JustifyContent="SpaceAround">

                <!--  First Label with Responsive Font Size  -->
                <Label
                    FontSize="{Binding Width, Source={RelativeSource AncestorType={x:Type FlexLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=5}"
                    HorizontalTextAlignment="Center"
                    Text="{local:Translate Clinical}"
                    TextColor="White" />

                <!--  Switch element  -->
                <Switch
                    HeightRequest="{Binding Height, Source={RelativeSource AncestorType={x:Type FlexLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=45}"
                    IsToggled="{Binding CaptureMode, Mode=TwoWay}"
                    WidthRequest="{Binding Width, Source={RelativeSource AncestorType={x:Type FlexLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=15}" />

                <!--  Second Label with Responsive Font Size  -->
                <Label
                    FontSize="{Binding Width, Source={RelativeSource AncestorType={x:Type FlexLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=5}"
                    HorizontalTextAlignment="Center"
                    Text="{local:Translate Dermoscopy}"
                    TextColor="White" />

                <!--  Custom Button with Responsive Sizing  -->
                <custom:LabelButton
                    x:Name="MultiButton"
                    Clicked="MultiButton_Clicked"
                    HorizontalOptions="Center"
                    IsEnabled="{Binding CaptureMode, Mode=OneWay}"
                    Text="x1"
                    WidthRequest="{Binding Width, Source={RelativeSource AncestorType={x:Type FlexLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=15}">
                    <custom:LabelButton.Style>
                        <Style BasedOn="{StaticResource ButtonLabel}" TargetType="custom:LabelButton">
                            <Style.Triggers>
                                <DataTrigger
                                    Binding="{Binding DermMode}"
                                    TargetType="custom:LabelButton"
                                    Value="True">
                                    <Setter Property="Text" Value="x3" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </custom:LabelButton.Style>
                </custom:LabelButton>
            </FlexLayout>
            <FlexLayout
                Grid.Row="2"
                AlignItems="Center"
                BackgroundColor="{StaticResource SecondaryDarkColor}"
                Direction="Row"
                JustifyContent="SpaceEvenly">
                <ImageButton
                    x:Name="MainButton"
                    Padding="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=25}"
                    Clicked="MainButton_Clicked"
                    HeightRequest="{Binding Height, Source={RelativeSource AncestorType={x:Type FlexLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=70}"
                    Source="clinical.png">
                    <ImageButton.Style>
                        <Style BasedOn="{StaticResource Key=ButtonImageRound}" TargetType="ImageButton">
                            <Style.Triggers>
                                <DataTrigger
                                    Binding="{Binding CaptureMode}"
                                    TargetType="ImageButton"
                                    Value="True">
                                    <Setter Property="Source" Value="dermoscopy.png" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ImageButton.Style>
                </ImageButton>
                <Button
                    Padding="{Binding Height, Source={RelativeSource AncestorType={x:Type FlexLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=10}"
                    Command="{Binding AButtonCommand}"
                    Style="{StaticResource ButtonRound}"
                    Text="A" />
                <Button
                    Padding="{Binding Height, Source={RelativeSource AncestorType={x:Type FlexLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=10}"
                    Command="{Binding BButtonCommand}"
                    Style="{StaticResource ButtonRound}"
                    Text="B" />
            </FlexLayout>
        </Grid>
    </ContentPage.Content>
</ContentPage>

感谢您阅读本文！

Answer 1

通过将 HasShadow Frame 属性设置为 false，我能够在遇到的两个地方解决此问题。完成后，我将框架放在我的 xaml 中，这次它起作用了。 工作xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="DermAtoZ.Views.Pages.CameraPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:converters="clr-namespace:DermAtoZ.Views.Converters"
    xmlns:custom="clr-namespace:DermAtoZ.Views.Custom"
    xmlns:local="clr-namespace:DermAtoZ.MarkupExtentions"
    xmlns:p="clr-namespace:DermAtoZ.Views.Pages"
    xmlns:vm="clr-namespace:DermAtoZ.ViewModels"
    Title="{local:Translate AppName}"
    x:DataType="vm:CameraViewModel">
    <Shell.TitleView>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="180" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Margin="0"
                HeightRequest="50"
                HorizontalOptions="CenterAndExpand"
                MinimumHeightRequest="50"
                MinimumWidthRequest="180"
                Source="dermatoz.png"
                WidthRequest="180" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                FontSize="Small"
                HorizontalTextAlignment="Center"
                Text="Powered by Pixience"
                TextColor="White"
                VerticalOptions="Center"
                VerticalTextAlignment="Center" />
        </Grid>
    </Shell.TitleView>
    <ContentPage.ToolbarItems>
        <ToolbarItem
            Clicked="ConfigurationPageButton_Clicked"
            Order="Secondary"
            Priority="0"
            Text="{local:Translate Configuration}" />
        <ToolbarItem
            Clicked="GalleryButton_Clicked"
            Order="Secondary"
            Priority="0"
            Text="{local:Translate Gallery}" />
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
        <Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="16*" />
                <RowDefinition Height="3*" />
                <RowDefinition Height="5*" />
            </Grid.RowDefinitions>
            <AbsoluteLayout>
                <!--  Background image  -->
                <Frame
                    Margin="0"
                    Padding="0"
                    AbsoluteLayout.LayoutBounds="0, 0,1,1"
                    AbsoluteLayout.LayoutFlags="All"
                    BackgroundColor="Black"
                    CornerRadius="0"
                    HasShadow="False"
                    IsClippedToBounds="True">
                    <custom:PinchToZoomContainer VerticalOptions="Center">
                        <custom:PinchToZoomContainer.Content>
                            <Image x:Name="TakenPictureImage" Aspect="AspectFit" />
                        </custom:PinchToZoomContainer.Content>
                    </custom:PinchToZoomContainer>
                </Frame>
                <!--  Status button  -->
                <ImageButton
                    x:Name="StatusButton"
                    AbsoluteLayout.LayoutBounds="0.05, 0.05"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    BackgroundColor="{StaticResource GreenColor}"
                    BorderColor="White"
                    BorderWidth="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=8}"
                    Clicked="StatusButton_Clicked"
                    HeightRequest="{Binding Height, Source={RelativeSource AncestorType={x:Type AbsoluteLayout}}, Converter={StaticResource PercentageConverter}, ConverterParameter=10}"
                    IsVisible="{Binding TransferStatus, Converter={StaticResource InvertBoolConverter}}"
                    Source="confirm.png"
                    TranslationX="30"
                    TranslationY="30">
                    <ImageButton.Style>
                        <Style BasedOn="{StaticResource ButtonImageRound}" TargetType="ImageButton">
                            <Style.Triggers>
                                <DataTrigger
                                    Binding="{Binding TransferStatus}"
                                    TargetType="ImageButton"
                                    Value="False">
                                    <Setter Property="Source" Value="repeat.png" />
                                    <Setter Property="BackgroundColor" Value="{StaticResource RedColor}" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ImageButton.Style>
                </ImageButton>

                <!--  Zone label  -->
                <Button
                    Margin="0"
                    Padding="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=12}"
                    AbsoluteLayout.LayoutBounds="1, 0.7, AutoSize, AutoSize"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    BackgroundColor="{StaticResource PrimaryLightColor}"
                    BorderColor="White"
                    BorderWidth="{Binding Height, Source={RelativeSource Self}, Converter={StaticResource PercentageConverter}, ConverterParameter=8}"
                    Clicked="BodyPageButton_Clicked"
                    FontSize="Medium"
                    HeightRequest="100"
                    Rotation="90"
                    Text=" Zone "
                    TextColor="White"
                    TextTransform="Uppercase"
                    WidthRequest="100" />
            </AbsoluteLayout>

不过，这只是一个修复，并不是真正的解决方案，因为它有效，但我不知道是什么导致了问题。