Xamarin 表单中如何重叠？答案

【问题标题】：How do overlap in Xamarin forms?Xamarin 表单中如何重叠？
【发布时间】：2016-09-30 16:40:04
【问题描述】：

有z-index的概念吗？图片显示没有重叠。如何设置z-index？前两个自定义选择框

<AbsoluteLayout Padding="10,10,10,10" VerticalOptions="FillAndExpand">

    <ui:BoxSelector x:Name="selectorExchangs"
                    AbsoluteLayout.LayoutBounds="0,0,0.5,0.3"
                    AbsoluteLayout.LayoutFlags="All"
                    BackgroundColor="Transparent"
                    CommandAfterChanged="{Binding ExchangesAfterChangedCommand}"
                    Items="{Binding ExchangesList}"
                    LabelPath="Name"
                    PanelColor="#f9f9f9"
                    SelectedItem="{Binding SelectedExchange}"
                    SelectorLabel="EXCHANGE" />

    <ui:BoxSelector AbsoluteLayout.LayoutBounds="1,0,0.5,0.3"
                    AbsoluteLayout.LayoutFlags="All"
                    BackgroundColor="Transparent"
                    CommandAfterChanged="{Binding TradingPairAfterChangedCommand}"
                    Items="{Binding AvailableTradinPairsList}"
                    LabelPath="PriceCurrencyName"
                    PanelColor="#f9f9f9"
                    SelectedItem="{Binding SelectedTraingPair}"
                    SelectorLabel="CURRENCY" />

还有其他的。图表、数据等

    <StackLayout AbsoluteLayout.LayoutBounds="1,1,1,0.9" AbsoluteLayout.LayoutFlags="All">...</StackLayout>

BoxSelector.xaml(content view), Reusable ContentView extends

<ContentView.Resources>
    <ResourceDictionary x:Name="AppDictionary">
        <Color x:Key="BackgroundColor">#f9f9f9</Color>
        <Color x:Key="BorderColor">#e2e2e2</Color>
        <Style x:Key="InternalViewStyle" TargetType="ContentView">
            <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}" />
            <Setter Property="VerticalOptions" Value="Fill" />
            <Setter Property="Padding" Value="5,5,5,5" />
        </Style>
        <Style x:Key="BorderStyle" TargetType="ContentView">
            <Setter Property="BackgroundColor" Value="{StaticResource BorderColor}" />
            <Setter Property="Padding" Value="1,1,1,1" />
        </Style>
    </ResourceDictionary>
</ContentView.Resources>

<StackLayout BindingContext="{x:Reference Name=ContentView}" HorizontalOptions="FillAndExpand">
    <ContentView BackgroundColor="#f5f5f5" HorizontalOptions="FillAndExpand">
        <StackLayout>
            <ContentView Style="{StaticResource BorderStyle}">
                <ContentView Style="{StaticResource InternalViewStyle}">
                    <StackLayout Orientation="Horizontal">
                        <StackLayout x:Name="selectorBox"
                                     BackgroundColor="{Binding PanelColor}"
                                     HorizontalOptions="FillAndExpand"
                                     Orientation="Horizontal">
                            <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
                                <Label FontSize="12"
                                       HorizontalOptions="FillAndExpand"
                                       Text="{Binding SelectorLabel}"
                                       TextColor="#cccccc" />
                                <Label x:Name="valueLabe"
                                       BackgroundColor="{Binding PanelColor}"
                                       FontSize="13"
                                       HorizontalOptions="FillAndExpand"
                                       Text="Choose"
                                       TextColor="#313131" />
                            </StackLayout>
                            <StackLayout HorizontalOptions="EndAndExpand">
                                <Label Text="+" TextColor="#313131" />
                            </StackLayout>
                        </StackLayout>
                    </StackLayout>
                </ContentView>
            </ContentView>

            <Grid x:Name="boxSelectorGrid"
                  BackgroundColor="#f5f5f5"
                  Padding="10,10,10,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
            </Grid>

        </StackLayout>
    </ContentView>
</StackLayout>

【问题讨论】：

恐怕我不明白你的问题。你说图片没有重叠，但是“重叠”是指一件事被画在另一件事上，图片清楚地表明了这一点。你想隐藏底层吗？
在我看来，您唯一缺少的部分是顶层的不透明背景 - 像 <StackLayout> 这样的元素没有设置背景颜色，因此默认为透明。所以无论什么元素是你的“顶层”，只需要一个BacgkroundColor="#f9f9f9"就可以达到你想要的效果。

标签： c# xaml layout xamarin xamarin.forms

【解决方案1】：

Z-Index 是通过容器元素中子元素的排序建立的。第一个孩子在 Z 堆栈的后面，第二个孩子放在它上面，依此类推。

您使用的布局容器将决定每个孩子的位置。 StackLayout 不允许重叠。 AbsoluteLayout 和 RelativeLayout 将允许轻松重叠。 Grid 将允许延伸到同一行和同一列的元素重叠。这些都没有自己的外观（默认情况下将它们视为透明框）。如果您希望它们遮挡其背后的内容，则需要指定背景颜色或图像，否则它们只会被绘制在其他内容之上。

【讨论】：

XF 中的任何内容？
关于更改 z-order 的一些细节：要将子元素置于最前面，请搜索 event binding。在 XAML 中，将 Focused 事件绑定到 C# 方法。在该方法中，调用Layout.RaiseChild(theChildElement)。抱歉，我不知道确切的细节，但这些概念应该可以帮助您入门。
但是说我正在开发一个需要在顶部显示的自定义控件。使用它的人是否必须重组他们的页面布局以使用AbsoluteLayout、RelativeLayout、Grid 才能显示在顶部。
@ToolmakerSteve 我一直在寻找这个解决方案，但它没有帮助我将 Label 添加到 Stacklayour 或 Absolute 结果是相同的。然后我添加了一个框架。如果我这样做，标签将出现在背景中。，但是我把它放在标签之后，但很难处理，所以它几乎不可能，因为框架中的文本是动态的，我不能把边距用- 所以标签达到了边界。我如何先放置标签，然后放置框架，并且仍然将标签放在前面。我试过 RaiseChild 没有成功
@Jonas - 我不清楚你的意思。请开始一个新问题并更详细地描述。将指向该问题的链接放在此处，使用@toolmakersteve 以便我收到通知。