我正试图在我的应用程序的左下角找到我的浮动操作按钮。
目前它看起来像这样:
我希望它看起来像这样:
我的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重叠
答案 0 :(得分:2)
发现它!
只需稍微调整布局边界,我不知道我可以超过1。 这是我对包含fab的stacklayout的新布局:
values = [[1, 2], [3, 4, 5]]
答案 1 :(得分:1)
假设FloatingActionButton
继承自Button
,而AbsoluteLayout
是ContentPage
的子元素,并且浮动按钮的预期边距从右边和右边分别为(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设置为
将其推到右下角。 Y
和Width
已设置
分别设置为75和75,以将元素定位到布局的左侧75
右边框和布局底边框的顶部75个点。
75的计算方式为
Height
由于60(element width/height request) + 15(right/bottom margin) = 75
和WidthRequest
为60,因此其中一半为30
将是元素的HeightRequest
。