Размещение SearchBar в верхней части/панели навигации

В проекте Forms можно ли разместить SearchBar таким образом, чтобы он отображался в верхней части/панели навигации приложения? Чего я хочу добиться, так это приложения Android Youtube, только кроссплатформенного:

введите здесь описание изображения


person csvan    schedule 14.03.2015    source источник
comment
вы получили решение для этого. Мне нужно то же самое в формах xamarin   -  person SANDEEP    schedule 30.12.2016
comment
@SANDEEP К сожалению, я давно перестал использовать Xamarin, поэтому я не уверен, как это сделать в настоящее время. Вы пробовали какой-либо из ответов?   -  person csvan    schedule 30.12.2016


Ответы (1)


Для этого вам нужно написать рендерер для вашей страницы.

Есть моя реализация для iOS (с пользовательским searchField)

using CoreGraphics;
using Foundation;
using MyControls;
using MyRenderer;
using UIKit;
using Xamarin.Forms;

[assembly: ExportRenderer(typeof(MySearchContentPage), typeof(MySearchContentPageRenderer))]

namespace IOS.Renderer
{
    using Xamarin.Forms.Platform.iOS;

    public class MySearchContentPageRenderer : PageRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            SetSearchToolbar();
        }

        public override void WillMoveToParentViewController(UIKit.UIViewController parent)
        {
            base.WillMoveToParentViewController(parent);

            if (parent != null)
            {
                parent.NavigationItem.RightBarButtonItem = NavigationItem.RightBarButtonItem;
                parent.NavigationItem.TitleView = NavigationItem.TitleView;
            }
        }

        private void SetSearchToolbar()
        {
            var element = Element as MySearchContentPage;
            if (element == null)
            {
                return;
            }

            var width = NavigationController.NavigationBar.Frame.Width;
            var height = NavigationController.NavigationBar.Frame.Height;
            var searchBar = new UIStackView(new CGRect(0, 0, width * 0.85, height));

            searchBar.Alignment = UIStackViewAlignment.Center;
            searchBar.Axis = UILayoutConstraintAxis.Horizontal;
            searchBar.Spacing = 3;

            var searchTextField = new MyUITextField();
            searchTextField.BackgroundColor = UIColor.FromRGB(239, 239, 239);
            NSAttributedString strAttr = new NSAttributedString("Search", foregroundColor: UIColor.FromRGB(146, 146, 146));
            searchTextField.AttributedPlaceholder = strAttr;
            searchTextField.SizeToFit();

            // Delete button
            UIButton textDeleteButton = new UIButton(new CGRect(0, 0, searchTextField.Frame.Size.Height + 5, searchTextField.Frame.Height));
            textDeleteButton.Font = UIFont.FromName("FontAwesome", 18f);
            textDeleteButton.BackgroundColor = UIColor.Clear;
            textDeleteButton.SetTitleColor(UIColor.FromRGB(146, 146, 146), UIControlState.Normal);
            textDeleteButton.SetTitle("\uf057", UIControlState.Normal);
            textDeleteButton.TouchUpInside += (sender, e) => 
            {
                searchTextField.Text = string.Empty;
            };

            searchTextField.RightView = textDeleteButton;
            searchTextField.RightViewMode = UITextFieldViewMode.Always;

            // Border
            searchTextField.BorderStyle = UITextBorderStyle.RoundedRect;
            searchTextField.Layer.BorderColor = UIColor.FromRGB(239, 239, 239).CGColor;
            searchTextField.Layer.BorderWidth = 1;
            searchTextField.Layer.CornerRadius = 5;
            searchTextField.EditingChanged += (sender, e) => 
            { 
                element.SetValue(MySearchContentPage.SearchTextProperty, searchTextField.Text);
            };

            searchBar.AddArrangedSubview(searchTextField);

            var searchbarButtonItem = new UIBarButtonItem(searchBar);
            NavigationItem.SetRightBarButtonItem(searchbarButtonItem, true);

            NavigationItem.TitleView = new UIView();

            if (ParentViewController != null)
            {
                ParentViewController.NavigationItem.RightBarButtonItem = NavigationItem.RightBarButtonItem;
                ParentViewController.NavigationItem.TitleView = NavigationItem.TitleView;
            }
        }
    }
}

Кроме того, есть обсуждение: как включить представление в NavigationBar Формы Xamarin?

введите здесь описание изображения

Надеюсь, вы поняли основную мысль.

person Vitaliy Litvinov    schedule 06.09.2016
comment
Привет @Виталий! Я попытался реализовать ваше решение в проекте Xamarin Forms с Prism, и оно почти работает. Моя проблема заключается в том, что при открытии страницы поиска текстовое поле поиска исчезает, а слева отображается заголовок «Назад». У вас было что-то подобное? Есть какое-то событие, которое создает этот заголовок Back после события ViewWillAppear. - person Cleyton T.; 11.07.2017
comment
Неважно. Я понял. Я использую плагин, который изменил поведение навигации (Iconize). - person Cleyton T.; 11.07.2017