[英]How do I make my Custom Control float in Xamarin Forms?
我正在做一个自定义浮动按钮控件,但是当我在屏幕上添加更多元素时,我的控件会离开屏幕。 我的想法是,即使屏幕上有元素,它也会保持在它们之上。
按钮.xaml:
<StackLayout> <AbsoluteLayout> <CollectionView x:Name="listView" Margin="0,0,22,-10" AbsoluteLayout.LayoutBounds="1,0,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="Transparent" ItemsSource="{Binding Source={x:Reference FloatingButtonView}, Path=ItemSource}" IsVisible="{Binding Source={x:Reference FloatingButtonView}, Path=CollectionViewVisible}" Rotation="180" WidthRequest="55"> <CollectionView.ItemTemplate> <DataTemplate> <Grid Padding="5" HeightRequest="50" WidthRequest="50"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <!--This ImageButton contais the data of the list--> <ImageButton x:Name="listita" Padding="10" BackgroundColor="{Binding ColorButton}" Command="{Binding Source={x:Reference FloatingButtonView}, Path=BindingContext.LaunchWeb}" CommandParameter="{Binding Website}" CornerRadius="70" WidthRequest="45" HeightRequest="45" Rotation="180" Source="{Binding Image}" /> </Grid> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </AbsoluteLayout> <ImageButton Margin="15" Padding="15" WidthRequest="70" HeightRequest="70" BackgroundColor="{Binding Source={x:Reference FloatingButtonView}, Path=PrimaryButtonColor}" Command="{Binding Source={x:Reference FloatingButtonView}, Path=BindingContext.OpenFloating}" CornerRadius="70" HorizontalOptions="End" Source="{Binding Source={x:Reference FloatingButtonView}, Path=PrimaryImageSource}" VerticalOptions="EndAndExpand" /> </StackLayout>
主页.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" x:Class="CustomControlWithList.MainPage" x:Name="page" xmlns:local="clr-namespace:CustomControlWithList"> <local:FloatingButton ItemSource="{Binding ItemList}" CollectionViewVisible = "{Binding IsVisible}" PrimaryImageSource="{Binding FirstImage}" PrimaryButtonColor="{Binding FirstButtonColor}" /> </ContentPage>
[编辑]我的完整代码。
主页.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" x:Class="CustomControlWithList.MainPage" x:Name="page" xmlns:local="clr-namespace:CustomControlWithList"> <local:FloatingButton ItemSource="{Binding ItemList}" CollectionViewVisible = "{Binding IsVisible}" PrimaryImageSource="{Binding FirstImage}" PrimaryButtonColor="{Binding FirstButtonColor}" /> </ContentPage>
浮动按钮.xaml:
<?xml version="1.0" encoding="UTF-8"?> <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="CustomControlWithList.FloatingButton" xmlns:pv="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" x:Name="FloatingButtonView"> <StackLayout> <AbsoluteLayout> <CollectionView x:Name="listView" Margin="0,0,22,-10" AbsoluteLayout.LayoutBounds="1,0,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="Transparent" ItemsSource="{Binding Source={x:Reference FloatingButtonView}, Path=ItemSource}" IsVisible="{Binding Source={x:Reference FloatingButtonView}, Path=CollectionViewVisible}" Rotation="180" WidthRequest="55"> <CollectionView.ItemTemplate> <DataTemplate> <Grid Padding="5" HeightRequest="50" WidthRequest="50"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <!--This ImageButton contais the data of the list--> <ImageButton x:Name="listita" Padding="10" BackgroundColor="{Binding ColorButton}" Command="{Binding Source={x:Reference FloatingButtonView}, Path=BindingContext.LaunchWeb}" CommandParameter="{Binding Website}" CornerRadius="70" WidthRequest="45" HeightRequest="45" Rotation="180" Source="{Binding Image}" /> </Grid> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </AbsoluteLayout> <ImageButton Margin="15" Padding="15" WidthRequest="70" HeightRequest="70" BackgroundColor="{Binding Source={x:Reference FloatingButtonView}, Path=PrimaryButtonColor}" Command="{Binding Source={x:Reference FloatingButtonView}, Path=BindingContext.OpenFloating}" CornerRadius="70" HorizontalOptions="End" Source="{Binding Source={x:Reference FloatingButtonView}, Path=PrimaryImageSource}" VerticalOptions="EndAndExpand" /> </StackLayout> </ContentView>
您需要将ImageButton放在AbsoluteLayout
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1" >
//... buttons
</StackLayout>
<StackLayout AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.55,AutoSize,AutoSize" >
<local:FloatingButton
...
/>
</StackLayout>
</AbsoluteLayout>
单击 ImageButton 时在 StackLayout 中添加按钮
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.