Xamarinでのメニューとナビゲーションバーを作成すると、アプリ

Question

を形成して、私はxamarin形の助けを借りて、今のAndroidアプリを作っています[XAML]クロスプラットフォームポータブルプロジェクトテンプレートを使用してVisual Studioで

自分のアプリケーションのホーム・ページをデザインしながら、私が持っているのが好き通常のAndroidアプリ

https://developer.android.com/training/appbar/index.html

しかし、私はホームページに使用してナビゲーションバーとコードを使用していますのようなデザインは

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"; 

    } 

のようなものです0

タイトルが付いたナビゲーションバーと右側に+アイコンが表示され、別のページを表示するのに役立ちます

しかし、左側のいくつかのメニュー項目とイベントで投稿されたリンクのようなページをデザインするにはどうすればよいですかこのNavBarを使用して右側のメニューアクション。

例または役に立つリンクはありますか？

Answer 1

AppCompatについて聞いたことがありますか？まずはthisを参照してください。

私が理解しているように、アプリケーションは、Android Material Themeを使用して作成されたように、iOSとAndroidでアプリケーションを表示する必要があります。

ナビゲーションバーにはcustom rendererを実装する必要があります。つまり、使用するプラットフォームごとにナビゲーションバーのカスタム実装を記述する必要があります。また、PCLからその一部を編集する必要があります。同様にがあるPCL内のすべてのUIオブジェクトの場合

[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())); 
     } 
    } 
} 

：

はたとえば、ナビゲーションバーにXamarinのデフォルトのアイコンを取り除くために、このコード（あなたのドロイドプロジェクトにこれを追加）を使用することができます各プラットフォーム。 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 
} 

いくつか追加できます。

また、コンテキストメニューをツールバーに追加してネイティブのアンドロイドのように動作させたい場合は、おそらくanimationについて少し読んで、それを自分で描画/アニメーションしてから、 、AbsoluteLayout。

Answer 2

カスタムナビゲーションバーの場合は、ナビゲーションバーを非表示にして独自のカスタムバーを作成するだけです。あなたはいくつかの欲求を失ってしまいます。それからサイジングはあなたにありますが、それはより柔軟性を提供します。

それからちょうどGrid内の色のBoxViewを配置し、BoxViewの上にそれらを置く、Gridにボタンを追加することができます。

NavigationPage.SetHasNavigationBar(this, false); 

*編集：行うことはかなり容易になり、ナビゲーションバーとあなたのContentPageさんに次のコンストラクタを非表示にするには

。私が言ったように、あなたはGridを作って、緑色のBoxViewを追加してから、アイコンを左に追加し、さらに3つ右に追加します。このような

何か：

<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>