如何在Xamarin表单中启用工具栏

时间:2016-08-29 05:41:15

标签: c# xamarin.forms material-design

我有一个简单的Xamarin XamaL项目,我想使用Material Design,它似乎默认启用,但工具栏不会与MainPage一起显示。或者我需要通过xaml添加一个toobar?

MainPage.xaml:

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Material"
             x:Class="Material.MainPage"> 
  <Label Text="Welcome to Xamarin Forms!"
           VerticalOptions="Center"
           HorizontalOptions="Center" />
  <ToolbarItem Name="Test" /> 
</ContentPage>

style.xml:

 <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">#2196F3</item>
    <item name="colorPrimaryDark">#1976D2</item>
    <item name="colorAccent">#FF4081</item>
    <item name="windowActionModeOverlay">true</item>
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
  </style>
  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>

Toobar.axml:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Tabbar.axml

<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="@android:color/white"
app:tabGravity="fill"
app:tabMode="fixed" />

MainActivity.cs:

[Activity(Label = "Material", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;

        base.OnCreate(bundle);
        global::Xamarin.Forms.Forms.Init(this, bundle);
        LoadApplication(new App());
    }
}

我正在关注This教程。谢谢!

到目前为止,我刚刚得到了...... enter image description here

1 个答案:

答案 0 :(得分:4)

您应该将ContentPage包裹在NavigationPage的{​​{1}}中。

因此,在App.(xaml).cs内定义MainPage时,请按照以下方式进行操作:

App.(xaml).cs

当您进一步导航时,您不必每次都将public App() { InitializeComponent(); MainPage = new NavigationPage(new MainPage()); } 包裹在ContentPage中,因为导航是相对的。