更改导航页面上的菜单栏图标

时间:2017-05-31 22:33:08

标签: android xamarin.forms master-detail

我正在拼命尝试更改我的Xamarin Forms应用程序上的图标颜色。我认为这个汉堡包菜单是文字,但我现在似乎无法改变它。这是一张照片吗?我找到了一个slideout.png图片,但是对该图片的任何修改都没有在应用中显示。它从哪里拉出这个汉堡菜单图标?enter image description here

页:

Do you want to continue (y/n)? Y
Do you want to continue (y/n)? Y
Do you want to continue (y/n)? N

站长:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LandingPage : MasterDetailPage
{
    public LandingPage()
    {
        InitializeComponent();
        MasterPage.ListView.ItemSelected += ListView_ItemSelected;
    }
    public void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as LandingPageMenuItem;
        if (item == null)
            return;
        var page = (Page)Activator.CreateInstance(item.TargetType);
        page.Title = item.Title;
        Detail = new NavigationPage(page);
        MasterPage.ListView.SelectedItem = null;
        IsPresented = false;
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Test.LandingPage" xmlns:pages="clr-namespace:Test">
    <MasterDetailPage.Master>
        <pages:LandingPageMaster x:Name="MasterPage" />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <pages:LandingPageDetail />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

详情:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LandingPageMaster : ContentPage
{
    public LandingPageMasterViewModel Vm { get; private set; }
    public ListView ListView => ListViewMenuItems;
    public LandingPageMaster()
    {
        InitializeComponent();
        Vm = new LandingPageMasterViewModel();
        BindingContext = Vm;
    }

    protected override void OnAppearing()
    {
        ListViewMenuItems.SelectedItem = Vm.MenuItems[0];
    }
    public class LandingPageMasterViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<LandingPageMenuItem> _menuItems;

        public ObservableCollection<LandingPageMenuItem> MenuItems
        {
            get
            {
                return _menuItems;
            }
            set
            {
                _menuItems = value;
                OnPropertyChanged();
            }
        }

        public LandingPageMasterViewModel()
        {
            ObservableCollection<LandingPageMenuItem> items = new ObservableCollection<LandingPageMenuItem>();
            items.Add(new LandingPageMenuItem { Title = "OCR" });
            MenuItems = items;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        void OnPropertyChanged([CallerMemberName]string propertyName = "") => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test.LandingPageMaster" Title="">
    <StackLayout>
        <ListView x:Name="ListViewMenuItems" SeparatorVisibility="None" HasUnevenRows="True" ItemsSource="{Binding MenuItems}">
            <ListView.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Label Grid.Column = "0" Grid.Row="0" Text=" " />
                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
                            <Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding Title}" FontSize="Medium" />
                            <Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding Subtitle}" FontSize="Small" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

2 个答案:

答案 0 :(得分:2)

这是Android平台中的ImageButton。所以你可以改变这个汉堡包按钮的图像来源。

您可以在渲染器中创建自定义MasterDetailPage使用Custom Renderers

public class MyMasterDetailRenderer : MasterDetailPageRenderer
{
    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);
        var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
        for (var i = 0; i < toolbar.ChildCount; i++)
        {
            var imageButton = toolbar.GetChildAt(i) as ImageButton;

            var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable;
            if (drawerArrow == null)
                continue;

            imageButton.SetImageDrawable(Forms.Context.GetDrawable(Resource.Drawable.hamburger));
        }
    }
}

答案 1 :(得分:0)

在Android上,汉堡包图形和附带的动画由Android操作系统提供,并不关心主 - 细节中定义的图标,尽管该图标将在iOS / UWP上使用。

它可能会覆盖,但我没有必要这样做可以帮助实现这一点。

如果您仅在更改颜色后再更改标题栏的Android主题文字颜色,这也会改变汉堡包的颜色,正如我所理解的那样。