web-dev-qa-db-ja.com

Xamarinフォームでどのようにオーバーラップしますか？

Z-indexの概念はありますか？写真は、重なりがないことを示しています。 enter image description here z-indexの設定方法は？上の2つのカスタム選択ボックス

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

そして残りすべて。チャート、データ、e.t.c

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

BoxSelector.xaml（コンテンツビュー）、再利用可能なContentViewの拡張

<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>
c#xamllayoutxamarinxamarin.forms
16
bleggleb

Z-Indexは、コンテナ要素内の子要素の順序によって確立されます。最初の子はZスタックの後ろにあり、2番目の子はその上に配置されます。

使用しているレイアウトコンテナによって、各子の配置方法が決まります。 StackLayoutは重複を許可しません。 AbsoluteLayoutとRelativeLayoutを使用すると、簡単にオーバーラップできます。 Gridを使用すると、同じ行と列に及ぶ要素のオーバーラップが可能になります。これらはどれも独自の外観を持ちません（デフォルトでは透明なボックスと考えてください）。背後のコンテンツを隠したい場合は、背景色または画像を割り当てる必要があります。そうしないと、他のコンテンツのすぐ上にペイントされます。

30
Keith Rome