web-dev-qa-db-ja.com

XAMARINフォームのフローティングアクションボタンを作成する方法

私はXamarin CrossPlatformアプリを構築しています!

このように、アプリページの右下隅にあるフローティングアクションボタンを追加したいと思いました

https://i.stack.imgur.com/4PJcv.jpg

これは私の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="Last_MSPL.Views.HomePage">


    <ListView x:Name="Demolist" ItemSelected="OnItemSelected" BackgroundColor="AliceBlue">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem x:Name="OnMore" Clicked="OnMore_Clicked" CommandParameter="{Binding .}"
                                 Text="More" />
                        <MenuItem x:Name="OnDelete" Clicked="OnDelete_Clicked" CommandParameter="{Binding .}"
                                 Text="Delete" IsDestructive="True" />
                    </ViewCell.ContextActions>
                    <StackLayout>

                        <StackLayout Padding="15,0">
                            <Label Text="{Binding employee_name}" FontAttributes="bold" x:Name="en"/>
                            <Label Text="{Binding employee_age}"/>
                        </StackLayout>

                    </StackLayout>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>



</ContentPage>
 _

XAMLを使ってこれを行うにはどうすればいいですか?これを通して私を助けてくれてありがとう!

14
Hashir Malik

Xamarinフォームにフローティングボタンを追加するのはとても簡単です。 grid.row = "0"のどちらでも、ScrollViewとボタンを追加した1行のグリッドを追加します。 ScrollViewの内側に、デザインフォームを入れます。ボタンを円形にするには、WidthRequestとWidthRequestと同様にBardradiusとHeightRequestを入力します。また、右下隅に表示するには、Margin = "0,0,20,22"を入れる。そのボタンの内側のアイコンを表示するには、ボタンのImagesourceとしてFontawesomeアイコンを入れます。 FontAwesomeアイコンは別のクラスで定義できます(フォンタウソームアイコンの使用方法についての詳細が必要な場合はお知らせください)。

それはそれです、あなたは完了です。

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ScrollView Grid.Row="0">
        
        </ScrollView>
        <Button Grid.Row="0" BorderColor="#2b3c3c" BorderWidth="1" FontAttributes="Bold" BackgroundColor="#1968B3" BorderRadius="35" TextColor="White" 
                    HorizontalOptions="End" VerticalOptions="End" WidthRequest="70" HeightRequest="70" Margin="0,0,20,22" Command="{Binding OpenSearchModalPopupCommand}">
            <Button.ImageSource>
                <FontImageSource FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
                                 Glyph="{x:Static fonts:Icons.FAFilter}" 
                                 Size="20"
                                 Color="White"/>
            </Button.ImageSource>
        </Button>
    </Grid>
 _
0
Saket Sinha