2017-12-13 27 views
2

コンテンツページにセカンダリツールバーアイテムを使用しています。私はアンドロイドと同じメニュー項目をiOSで使いたい。デフォルトではナビゲーションバーの下に表示されます。どうすればこれを実現できますか?Xamarinフォーム:コンテンツページAndroidと同じiOSのセカンダリツールバー

enter image description here

+0

これはiOSのデザインです。Toobarをカスタマイズしない限り、回避策はないと思います。 –

答えて

0

私はカスタムPageRendererクラスを作成したとして、私は解決策を見つけました。

public class RightToolbarMenuCustomRenderer : PageRenderer 
{ 

    //I used UITableView for showing the menulist of secondary toolbar items. 
    List<ToolbarItem> _secondaryItems; 
    UITableView table; 

    protected override void OnElementChanged(VisualElementChangedEventArgs e) 
    { 
     //Get all secondary toolbar items and fill it to the gloabal list variable and remove from the content page. 
     if (e.NewElement is ContentPage page) 
     { 
      _secondaryItems = page.ToolbarItems.Where(i => i.Order == ToolbarItemOrder.Secondary).ToList(); 
      _secondaryItems.ForEach(t => page.ToolbarItems.Remove(t)); 
     } 
     base.OnElementChanged(e); 
    } 

    public override void ViewWillAppear(bool animated) 
    { 
     var element = (ContentPage)Element; 
     //If global secondary toolbar items are not null, I created and added a primary toolbar item with image(Overflow) I   
       // want to show. 
     if (_secondaryItems != null && _secondaryItems.Count > 0) 
     { 
      element.ToolbarItems.Add(new ToolbarItem() 
      { 
       Order = ToolbarItemOrder.Primary, 
       Icon = "more.png", 
       Priority = 1, 
       Command = new Command(() => 
       { 
        ToolClicked(); 
       }) 
      }); 
     } 
     base.ViewWillAppear(animated); 
    } 

    //Create a table instance and added it to the view. 
    private void ToolClicked() 
    { 
     if (table == null) 
     { 
      //Set the table position to right side. and set height to the content height. 
      var childRect = new RectangleF((float)View.Bounds.Width - 250, 0, 250, _secondaryItems.Count() * 56); 
      table = new UITableView(childRect) 
      { 
       Source = new TableSource(_secondaryItems) // Created Table Source Class as Mentioned in the 
           //Xamarin.iOS Official site 
      }; 
      Add(table); 
      return; 
     } 
     foreach (var subview in View.Subviews) 
     { 
      if(subview == table) 
      { 
       table.RemoveFromSuperview(); 
       return; 
      } 
     } 
     Add(table); 
    } 
} 

表ソース・クラスは、私は私が

<ContentPage.ToolbarItems> 
    <ToolbarItem Text ="Cancel" Priority="1" Order="Secondary" Command="{Binding CancelCommand}"/> 
</ContentPage.ToolbarItems> 

としてツールバー項目を使用していますコンテンツページXAMLで

public ICommand CancelCommand { get; set; } 

//In constructor of ViewModel I Created Event for Command 
CancelCommand = new Command(async() => await Cancel()); 

private async Task Cancel() 
{ 
    await Task.CompletedTask; 
} 

を持つビューモデルではUITableViewSource

public class TableSource : UITableViewSource 
{ 

     // Global variable for the secondary toolbar items and text to display in table row 
    List<ToolbarItem> _tableItems; 
    string[] _tableItemTexts; 
    string CellIdentifier = "TableCell"; 

    public TableSource(List<ToolbarItem> items) 
    { 
      //Set the secondary toolbar items to global variables and get all text values from the toolbar items 
     _tableItems = items; 
     _tableItemTexts = items.Select(a => a.Text).ToArray(); 
    } 

    public override nint RowsInSection(UITableView tableview, nint section) 
    { 
     return _tableItemTexts.Length; 
    } 

    public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) 
    { 
     UITableViewCell cell = tableView.DequeueReusableCell(CellIdentifier); 
     string item = _tableItemTexts[indexPath.Row]; 
     if (cell == null) 
     { cell = new UITableViewCell(UITableViewCellStyle.Default, CellIdentifier); } 
     cell.TextLabel.Text = item; 
     return cell; 
    } 

    public override nfloat GetHeightForRow(UITableView tableView, NSIndexPath indexPath) 
    { 
     return 56; // Set default row height. 
    } 

    public override void RowSelected(UITableView tableView, NSIndexPath indexPath) 
    { 
     //Used command to excute and deselct the row and removed the table. 
     var command = _tableItems[0].Command; 
     command.Execute(_tableItems[0].CommandParameter); 
     tableView.DeselectRow(indexPath, true); 
     tableView.RemoveFromSuperview(); 
    } 
} 

を継承されますアウトプ解決のためのtは私が望むのと同じです。

ハッピーエンディング:)。より良いアプローチを使用できるかどうか教えてください。学習する準備ができました。

関連する問題