Xamarin ContentPage.ToolbarItems移动到页面底部

Posted 2021-05-05

以下是我的代码我想要做的是将工具栏移动到网格后面的页面底部

<ContentPage.ToolbarItems>
    <ToolbarItem Icon="heart.png" Command="{Binding GotoWishlistCommand}"/>
    <ToolbarItem Icon="shoppingcart.png"
                 Command="{Binding GotoCartCommand}"/>
</ContentPage.ToolbarItems>
<ContentPage.Resources>
    <ResourceDictionary>
        <converter:SelectedToColorConverter x:Key="cnvInvert"/>
    </ResourceDictionary>
</ContentPage.Resources>

答案

不幸的是，ToolbarItem默认设计在页面顶部。

如果想将ToolbarItem移动到页面底部，可以通过自定义视图完成。你可以创建一个StackLayout，它包含像ToolbarItem这样的按钮。另外，StackLayout可以设置在GridLayout下面。这看起来像是一个ToolbarItem位于页面底部。

示例代码如下：

<StackLayout>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="20" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
            <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
            <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
            <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
        </Grid>

        <StackLayout BackgroundColor="BlueViolet" x:Name="CustomToolBarItem" Orientation="Horizontal" HorizontalOptions="EndAndExpand" WidthRequest="1000">
            <ImageButton Source="heart.png" Command="{Binding GotoWishlistCommand}" HorizontalOptions="End" VerticalOptions="Center"/>
            <ImageButton Source="shoppingcart.png" Command="{Binding GotoCartCommand}" HorizontalOptions="End" VerticalOptions="Center"/>
        </StackLayout>
</StackLayout>

另一答案

如果你想在底部安装android，请在TabbedPage中添加这一行。对于ios，它是默认的。

xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"

最后，您的页面将是这样的：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
  x:Class="SampleApp.MainPage"
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
  xmlns:views="clr-namespace:SampleApp"
  android:TabbedPage.ToolbarPlacement="Bottom">
  <TabbedPage.Children>
    <NavigationPage
      Title="Browse"
      BackgroundColor="White"
      Icon="tab_feed.png">
      <x:Arguments>
        <views:ItemsPage />
      </x:Arguments>
    </NavigationPage>
    <NavigationPage
      Title="About"
      BackgroundColor="White"
      Icon="tab_about.png">
      <x:Arguments>
        <views:AboutPage />
      </x:Arguments>
    </NavigationPage>
  </TabbedPage.Children>
</TabbedPage>