如何将搜索栏包含在导航页面中

Question

所以，我需要将搜索栏包含到导航页面或导航栏中，但我不明白如何以编程方式执行此操作。我可以在 App.cs 中创建搜索栏，但不能将其包含在导航栏中（我在 Xamarin.Forms 中工作，在 ASp.NetCore 中创建 RestApi。请帮助我！

Result in Android.Sdk

protected async override void OnStart(){

HttpResponseMessage response = await client.GetAsync("http://192.168.1.6:5000/api/Events");

                if (response.StatusCode == HttpStatusCode.OK)
                {
                    HttpContent responseContent = response.Content;
                    var json = await responseContent.ReadAsStringAsync();
                    List<Event> Events = JsonConvert.DeserializeObject<List<Event>>(json);
                    MainPage page =  new MainPage();
                    StackLayout MyButtons = new StackLayout()
                    {
                        Orientation = StackOrientation.Vertical,
                        HorizontalOptions = LayoutOptions.FillAndExpand,
                    };
                    SearchBar search = new SearchBar
                    {
                        Placeholder = "Search items...",
                        PlaceholderColor = Color.Gray,
                        TextColor = Color.Gray,
                        HorizontalTextAlignment = TextAlignment.End,
                        HorizontalOptions = LayoutOptions.Center,
                        VerticalOptions = LayoutOptions.Start,
                        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(SearchBar)),
                        FontAttributes = FontAttributes.Italic,
                    };
                    search.SearchButtonPressed += OnSearchButtonPressed;
                    Frame FrameSearch = new Frame()
                    {
                        BorderColor = Color.Gray,
                        CornerRadius = 10,
                        HorizontalOptions = LayoutOptions.Center,
                        VerticalOptions = LayoutOptions.Start,
                        HeightRequest = 40,
                        WidthRequest = 180,
                        HasShadow = true,
                        Margin = new Thickness(0,10,0,0),
                        Padding = new Thickness(0),
                        Content = new StackLayout
                        {
                            Padding = 0,
                            Children =
                            {
                                search                  
                            }
                        }
                    };                
                    MyButtons.Children.Add(FrameSearch);                
                    foreach (var item in Events)
                    {
                        var btn = new Button()
                        {
                            Text = item.Name, //Whatever prop you wonna put as title;
                            StyleId = item.EventId.ToString(), //use a property from event as id to be passed to handler
                            BorderRadius = 50,
                            FontSize = 30,
                            BorderColor = Color.Black,
                            FontAttributes = FontAttributes.Bold,
                            Margin = new Thickness(2, 5, 2, 0),
                            Padding = new Thickness(0),
                            HorizontalOptions = LayoutOptions.FillAndExpand
                        };
                        btn.Clicked += OnDynamicBtnClicked;
                        //Content = new ContentPage()
                        MyButtons.Children.Add(btn);
                    }
                    ScrollView scrollView = new ScrollView();
                    scrollView.Content = MyButtons;
                    page.Content = scrollView;
                    Application.Current.MainPage = new NavigationPage(page);
                    NavigationPage _Page = Application.Current.MainPage as NavigationPage;
                    _Page.BarBackgroundColor = Color.FromHex("009688");  

Answer 1

你可以设置NavigationPage.TitleView来达到效果。

就像在 c# 代码中一样：

public TitleViewPage()
    {
        InitializeComponent();
        var titleView = new SearchBar { HeightRequest = 44, WidthRequest = 300 };
        NavigationPage.SetTitleView(this, titleView);
    }

或在xaml中：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="NavigationPageTitleView.TitleViewPage">
  <NavigationPage.TitleView>
    <SearchBar HeightRequest="44" WidthRequest="300" />
  </NavigationPage.TitleView>
   ...
</ContentPage>