XAML代码将按钮放在右下角

时间:2017-07-04 14:12:08

标签: c# xaml xamarin xamarin.forms

我正试图在我的应用程序的左下角找到我的浮动操作按钮。

目前它看起来像这样:

How I don't want it

我希望它看起来像这样:

What I want

我的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:local="clr-namespace:xxx;assembly=xxx"
         x:Class="xxx.xxx.xxx.xxxx"> 

 <AbsoluteLayout HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand">

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

        <StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
            <StackLayout HorizontalOptions="CenterAndExpand"  Margin="0,15,0,0" Orientation="Vertical">
                <!--<local:CustomImage Source="logo.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" />-->

                <local:CustomImageButton  WidthRequest="150" Image="Foto.png" ClassId="Eigendommen" x:Name="buttonFoto" HeightRequest="150"/>

            </StackLayout>

            <StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" Margin="10,0,0,0" x:Name="MainStack" >
                <BoxView BackgroundColor="#F15A35" HeightRequest="1" WidthRequest="400" Margin="0,-2,0,5" />
                <Label Text="Toegevoegd:" FontSize="Medium" FontAttributes="Bold" />
                <StackLayout Orientation="Horizontal">
                    <StackLayout Orientation="Vertical"  IsVisible="False" Margin="10,0,10,0" x:Name="hideImage1">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" BackgroundColor="White" Clicked="Hide_Image_Click" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage2" IsVisible="False">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage3" IsVisible="False">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                </StackLayout>

            </StackLayout>

        </StackLayout>

    </StackLayout>

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

        <StackLayout HorizontalOptions="End" VerticalOptions="End" Margin="0,0,0,0">
            <local:FloatingActionButton Image="checktaak.png" x:Name="insertTaak"  HeightRequest="60" WidthRequest="60" />
        </StackLayout>

    </StackLayout>

</AbsoluteLayout>

</ContentPage>

你可以在所有代码(最后一个stacklayout)的底部找到我的浮动动作按钮。如果您需要更多代码,请在评论中告诉我。 修改我希望按钮始终存在,即使它与其他stacklayout重叠

2 个答案:

答案 0 :(得分:2)

发现它!

只需稍微调整布局边界,我不知道我可以超过1。 这是我对包含fab的stacklayout的新布局:

values = [[1, 2], [3, 4, 5]]

答案 1 :(得分:1)

假设FloatingActionButton继承自Button,而AbsoluteLayoutContentPage的子元素,并且浮动按钮的预期边距从右边和右边分别为(15,15)底边框,

<AbsoluteLayout>
    <!-- SOME OTHER ELEMENTS -->

    <local:FloatingActionButton Image="checktaak.png"
                                CornerRadius="30"
                                WidthRequest="60" HeightRequest="60"
                                AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1,1,75,75"
                                HorizontalOptions="Center" VerticalOptions="Center" />
</AbsoluteLayout>

要注意

  • 使用AbsoluteLayout.LayoutFlags="PositionProportional"进行 仅定位成比例

    然后将AbsoluteLayout.LayoutBounds的{​​{1}}和X,1和1设置为 将其推到右下角。 YWidth已设置 分别设置为75和75,以将元素定位到布局的左侧75 右边框和布局底边框的顶部75个点。

      

    75的计算方式为

         

    Height

  • 由于60(element width/height request) + 15(right/bottom margin) = 75WidthRequest为60,因此其中一半为30 将是元素的HeightRequest