在Xamarin表单应用程序中创建带菜单的导航栏

iq3niunx  于 2022-12-07  发布在  其他
关注(0)|答案(2)|浏览(178)

I am making an android app now with help of xamarin forms [xaml] using crossplatform portable project template in Visual studio
While designing home page of my application I like to have a design like in a normal android app
https://developer.android.com/training/appbar/index.html
But I am using a Navbar and code using in home page is like

public  Homepage()
    {
        InitializeComponent();
        #region toolbar
        ToolbarItem tbi = null;
        if (Device.OS == TargetPlatform.Android)
        {
            tbi = new ToolbarItem("+", "plus", async () =>
            {
                var target_page = new AddStudent();
                await Navigation.PushModalAsync(target_page);
            }, 0, 0);
        }
        ToolbarItems.Add(tbi);
        #endregion             
            this.Title = "Home Page";

    }

Its giving a Navigation bar with title and a + icon on right side which helps me to show another page
But how can I design a page like in the link posted with some menu items and events on left side and some menu actions on right side using this NavBar .
Any examples or useful links?

piztneat

piztneat1#

您听说过AppCompat吗?请参阅this
据我所知,您希望应用程序在iOS和Android上看起来像是使用Android材料主题创建的。
显然,你需要为导航栏实现一个custom renderer。这意味着你必须为你想要使用它的每个平台编写导航栏的自定义实现。而且,你需要从PCL中编辑它的一部分。
例如,您可以使用下面的代码去掉导航栏上Xamarin的默认图标(将其添加到您的Droid项目中):

[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationRenderer))]
namespace App.Droid
{
    public class CustomNavigationRenderer : NavigationRenderer
    {

        protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
        {
            base.OnElementChanged(e);
            RemoveAppIconFromActionBar();
        }

        void RemoveAppIconFromActionBar()
        {
            var actionBar = ((Activity)Context).ActionBar;
            actionBar.SetIcon(new ColorDrawable(Color.Transparent.ToAndroid()));
        }
    }
}

对于PCL中的每个UI对象,在每个平台中都有一个类似的操作。将XF对象转换为本地对象是渲染器的责任。创建对象时,将调用OnElementChanged。从那里,您可以访问本地API并对PCL中不可用的元素进行修改。就像调用SetIcon一样(请记住,此代码可能是Android特定的。在大多数情况下,您可能需要复制并修改渲染器,以便它在其他平台上工作)。
为了将按钮添加到操作栏的右侧,我将使用以下xaml:

<ContentPage.ToolbarItems>
    <ToolbarItem x:Name="btn"
             Text="Mail"
             Icon="btn_icon.png"
             Clicked="BtnClickHandler" />
</ContentPage.ToolbarItems>

而不是简单地用后面的代码来备份它,就像处理一个简单的按钮点击:

private void BtnClickHandler(object sender, EventArgs e)
{
    // handling
}

您可以添加几个这样的对象。
此外,如果你想在工具栏上添加上下文菜单,并希望它像原生的android一样,你可能应该阅读一些关于animation的知识,并自己绘制/动画它,然后使用AbsoluteLayout来协调它。

tcomlyy6

tcomlyy62#

For custom nav bars, I like to just hide the navigation bar and make my own custom one. You do loose some connivence and then the sizing is on you but it gives a ton more flexibility.
You can then just place a colored BoxView within a Grid and then add buttons to the Grid , placing them on top of the BoxView .
To hide the navigation bar and the following to your ContentPage 's constructor:

NavigationPage.SetHasNavigationBar(this, false);
  • Edit: That would be fairly easy to do. Like I said, you would make a Grid , add a green BoxView , and then add an icon to the left and and 3 more to the right.

Something like this:

<Grid VerticalOptions="Start"
      HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <BoxView BackgroundColor="Green"
             Grid.Row="0"
             Grid.Column="0"
             Grid.ColumnSpan="5"/>

    <Image Source="hamburger.png"
           Grid.Row="0"
           Grid.Column="0">
        <Image.GestureRecognizer>
            <!-- TODO: Add your gesture stuff -->
        </Image.GestureRecognizer>
    </Image>

    <Label Text="Sheets"
           Grid.Row="0"
           Grid.Column="1"/>

    <Image Source="search.png"
           Grid.Row="0"
           Grid.Column="2">
        <Image.GestureRecognizer>
            <!-- TODO: Add your gesture stuff -->
        </Image.GestureRecognizer>
    </Image>

    <Image Source="folder.png"
           Grid.Row="0"
           Grid.Column="3">
        <Image.GestureRecognizer>
            <!-- TODO: Add your gesture stuff -->
        </Image.GestureRecognizer>
    </Image>

    <Image Source="settingstack.png"
           Grid.Row="0"
           Grid.Column="4">
        <Image.GestureRecognizer>
            <!-- TODO: Add your gesture stuff -->
        </Image.GestureRecognizer>
    </Image>

</Grid>

相关问题