Forum Xamarin Xamarin.Forms

Making a Toolbar

MaruMaru DEMember ✭✭

Hi everyone,

I wanted to make a toolbar with a few TollbarItems in it, but I can't get it to work. I think I saw an example somewhere but can't find it anymore.
Can someone point me in the right direction?

Posts

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai
    var contentPage = new ContentPage ();
    page.ToolbarItems.Add (new ToolbarItem (....));
    

    There is one important note here, on iOS there must be a navigation page on screen for the toolbar items to show up (that is where they show up).

  • MaruMaru DEMember ✭✭
    edited May 2014

    Can I do this on axml too? I get an error when putting it into my StackLayout thats within my ContentPage.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    ToolbarItems is a property of the page, not a StackLayout.

  • MaruMaru DEMember ✭✭

    Can I have a StackLayout and a ToolbarItem in the same ContentPage? I'm getting a Position 25:3. Property Content is null or is not IEnumerable when doing this so I think no or I did something wrong.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    ToolbarItems are meta-data for the page which gets composed together when the page is shown on screen. They are not explicit Views in Xamarin.Forms like a button or a label is. Can I see your XAML to help you along?

  • MaruMaru DEMember ✭✭

    Sure, thank you for looking into it:

    <ContentPage
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="TestProject.UI.MyPage">
        <StackLayout Spacing="10" HorizontalOptions="CenterAndExpand">
            <Image x:Name="logo" Source="logo.png" />
            <Label x:Name="scheduleLabel" Text="TestText"
               Font="20" 
               HorizontalOptions="Center" />
        </StackLayout>
    
        <ToolbarItem Name="Test" />
    
    </ContentPage>
    
  • KevinFordKevinFord USUniversity, Certified XTC Partners ✭✭✭

    A ContentPage can only ditectly contain one item. You can have a ContentPage that contains a StackLayout that in turn contains other items though that isn't likely what you want to do for a Toolbar.

  • MaruMaru DEMember ✭✭

    KevinFord, I was already thinking that a ContentPage can have one item, but thank you for pointing that out again. :)

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai
    edited May 2014

    instead of just a lone ToolbarItem tag

    you need to do

    <ContentPage.ToolbarItems>
      <ToolbarItem .... />
    </ContentPage.ToolbarItems>
    
  • MaruMaru DEMember ✭✭
    edited May 2014

    Something learned again: you can have multiple ContentPages in one axml. Makes sense when you think about it.

    What can you do with the "." after the ContentPage? I mean what is the point of putting something behind it?

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    You are not putting a second content page in, you are accessing the property on the parent content page

  • MaruMaru DEMember ✭✭

    Ah ok, now I understand.

    But know, on Android, the ToolbarItem is showing on the top of the screen in the same row as the titlebar. When I use Theme = "@android:style/Theme.Black.NoTitleBar", in my activity I get a null pointer exception when I try to set the page.

  • alxbogalxbog RUMember ✭✭

    Hi, guys!

    I have a strange behaviour working with toolbar icons on iOS. Here is the code:
    ToolbarItems.Add(new ToolbarItem("Info", "info-icon.png", () => { Navigation.PushAsync(new AboutPage()); }));

    In iOS project resources I have [email protected] sized 44x44.

    When the screen is shown I see the icon, but it's heavily blurred. Why?

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    @Maru, this is correct as it is using the built in ActionBar. If you don't have an ActionBar then you can't have toolbaritems. The same would be true if you set this as the theme in a non-xamarin.forms application. If you try to access this.ActionBar from your activity it will be null.

  • MaruMaru DEMember ✭✭
    edited May 2014

    @JamesMontemagno‌, thanks for giving me a little insight in that. But how can I "disable" the text in there so that only the Toolbar is shown there? The only way of "hiding" it is putting multiple items in there but at some point the Toolbar is full and not displaying anymore content.

    EDIT:
    Noticing right now, when I put an icon in the ToolbarItems the image is not sized down to fit the actual ActionBar.

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    @maru you will need to snap a photo for me to help me out. I am not sure what platform you are talking about.

  • MaruMaru DEMember ✭✭

    Sorry, I'm talking about Android. The image quality is a little bit blurry but I hope you can see what I mean.

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai
  • MaruMaru DEMember ✭✭

    So is it actually an Android problem that the images not showing in the right size or a general problem?

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    Correct, you have to give it the correct sizes for the dpi which is why they have the generator :) this is best practices for general images as well on Android.

  • r_vodelayahoocomVODELAr_vodelayahoocomVODELA USMember, University

    I have xamarin forms app with toolbar items - This works correctly on IOS - on the Android the icons don't appear and
    also the tool bar title does not appear

  • AlecTucker.2208AlecTucker.2208 AUInsider, University, Developer Group Leader mod

    On Windows Phone I can make the toolbar transparent by varying the Opacity property, like this:

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" **Opacity="0.8"**>
            <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/check.png" Text="login" Click="AppBarOK_Click" />
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    

    Is there support for this in Xamarin.Forms?

  • TargusSignityTargusSignity INMember

    Hi,
    I am working with Toolbaritems, I am adding two different item on two different content pages as following :
    on MainPage : I have added (Add)
    on SecondPage : I have added (Edit)

    in ios works like i want e.g. (on MainPage i have (add) and after navigation on second page i got (Edit) )
    but in android I got same (Add) button on Second page instead (Edit).

    Can you please help to achieve this task as I have in ios?

    Thanks

  • CraigDunnCraigDunn USXamarin Team Xamurai

    @AlecTucker‌ no, sorry... ApplicationBar.Opacity isn't accessible from Xamarin.Forms code.

  • @CraigDunn @Alec.Tucker‌ - I'm assuming this can be done through a Custom Renderer though.

  • PaulPPaulP USMember ✭✭

    @DerekJensen.2647‌ You can do it without a CustomRenderer. Just on the MainPage do this :

        ApplicationBar.Mode = ApplicationBarMode.Minimized;
        ApplicationBar.Opacity = 0.5;
    

    Or if you want to change it during run time then you will need a CustomRenderer. Access the AppBar using this code :

        var mainPage = ((PhoneApplicationFrame)App.Current.RootVisual).Content as MainPage;
        ((ApplicationBar)mainPage.ApplicationBar).Opacity = 0.5;
    
  • DerekJensenDerekJensen USMember, University

    @PaulP‌ Fantastic. Thanks for the info!

  • d_dblud_dblu CAUniversity ✭✭
    edited November 2014

    UPDATE: Just after posting I noticed that I've nested it in the Content. I've placed it outside of ContentPage.Content and it now works, although I'm still getting an exception saying it can't convert ToolbarItem to a List of ToolbarItems:

    Object type Xamarin.Forms.ToolbarItem cannot be converted to target type: System.Collections.Generic.IList`1[[Xamarin.Forms.ToolbarItem, Xamarin.Forms.Core, Version=1.2.3.0, Culture=neutral, PublicKeyToken=null]]

    I'm using XAML to add my ToolbarItems as listed above, but I'm getting a parse error:

    Type ContentPage.ToolbarItems not found in xmlns http://xamarin.com/schemas/2014/forms

    I can't see the error in my XAML though, does this look correct?

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage Title="Contacts" 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    >
    <ContentPage.Content>
        <ContentPage.ToolbarItems>
            <ToolbarItem Name="Invite" Command="{Binding ToolbarItemCommand}"></ToolbarItem>
        </ContentPage.ToolbarItems>
    ...
    <ContentPage.Content>
    </ContentPage>
    
  • powerdudepowerdude USMember ✭✭

    the toolbar items shouldn't be in the Content XAML.

        <ContentPage.Content>
            ...
        </ContentPage.Content>
        <ContentPage.ToolbarItems>
          <ToolbarItem Name="Invite" Command="{Binding ToolbarItemCommand}"></ToolbarItem>
        </ContentPage.ToolbarItems>
    
  • Hi,

    I want to show toolbar and tabbed pages in my android using Xamarin.Forms.

    I tried using Toolbar but it is not working. Please help me to fix this.

    How to add toolbar and tabbed page to App class in shared project.

  • Hi @RajeshRajendran‌ Did you get solution for this, i have faced same problem when run windows, can you please give an idea

  • YortYort USUniversity ✭✭

    Is there a way to make the toolbar items appear at the bottom of the page in iOS, like they do in Safari and other iOS apps, instead of in the navigation bar at the top?

  • PhilOxenbergPhilOxenberg USMember ✭✭

    It seems one must populate the ToolbarItems on the first Navigation Page, is that true? If I defer populating the ToolbarItems until the second page, they never show up. I don't want them on the first page. Thoughts?

  • MicheldeKokMicheldeKok NLMember

    @RajeshRajendran‌ and @Manikandan.5390: I had the same problem, adding a NavigationPage solved this for me.
    See: http://stackoverflow.com/questions/26646378/toolbar-item-not-showing-in-xamarin-forms

  • bujjiiibujjiii INMember ✭✭

    hi guys

    can anyone know how to add picker in toolbar (xamarin crossplatform)

  • PriyaRastogiPriyaRastogi INMember ✭✭✭

    Hii..
    @powerdude
    can we change the background color of toolbaritems?

Sign In or Register to comment.