Forum› Xamarin.Forms

How to change size of Icon in Toolbar Xamarin Forms

kingston5555kingston5555 Member ✭✭✭
in Xamarin.Forms

Please tell me how to change size of icon in Toolbar.Because when I put another icons with the same resolution they are too small

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              Icon="{Binding CurrentIcon}"
             x:Class="App1.BicyclePageMain"
             xmlns:control="clr-namespace:App1"

               BackgroundColor="{AppThemeBinding Light=White, Dark=White}">

</ContentPage>

Tagged:

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    I saw the image took the same space from the screenshot you posted above.
    Did you want a larger icon?
    If you want to change the size programmatically, try to implement it on each platform.
    Refer to this post for the specific code:
    https://forums.xamarin.com/discussion/165702/how-do-i-change-the-size-of-an-image-for-a-toolbaritem

  • kingston5555kingston5555 Member ✭✭✭

    I add this code in styles.xml.Need to do something else? Because it doesn't work

  • LandLuLandLu Member, Xamarin Team Xamurai

    The default size for the icon on the toolbar has been fixed by 24x24.
    It's better to customize a toolbar instead of using the default one if you want other sizes.
    i.e.

    <NavigationPage.TitleView>
    <StackLayout Orientation="Horizontal">
        <ImageButton Source="close.png" WidthRequest="100" HeightRequest="50" HorizontalOptions="EndAndExpand"/>
    </StackLayout>
</NavigationPage.TitleView>
  • kingston5555kingston5555 Member ✭✭✭

    I have to write instead of mine Icon="{Binding CurrentIcon}" your code on each page,yes?

  • LandLuLandLu Member, Xamarin Team Xamurai

    You could use binding as what you did before.
    I posted a simple usage here.

  • kingston5555kingston5555 Member ✭✭✭
    edited October 2020

    sorry please maybe I misunderstood

    ```

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Bike"
    x:Class="App1.BicyclePageMain"
    xmlns:control="clr-namespace:App1"

               BackgroundColor="{AppThemeBinding Light=White, Dark=White}">
<NavigationPage.TitleView>
    <StackLayout Orientation="Horizontal">
        <ImageButton Source="{Binding CurrentIcon}" WidthRequest="100" HeightRequest="50" HorizontalOptions="EndAndExpand"/>
    </StackLayout>
</NavigationPage.TitleView>
<AbsoluteLayout>

    <control:BicyclePage AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">


    <control:BicyclePageSmall
    IsVisible="False" x:Name="CarWindow" AbsoluteLayout.LayoutFlags="PositionProportional"
    AbsoluteLayout.LayoutBounds="1, 0.3, AutoSize, AutoSize"

    </AbsoluteLayout>

</ContentPage>

    ```

  • kingston5555kingston5555 Member ✭✭✭

    I try like this I understand that I make mistakes but where?

  • kingston5555kingston5555 Member ✭✭✭
    edited October 2020

    <ContentPage.ToolbarItems>
    ToolbarItem IconImageSource="{Binding CurrentIcon}">
    </ContentPage.ToolbarItems>

    this also doe not work

  • LandLuLandLu Member, Xamarin Team Xamurai

    What issue are you facing now?
    Was the page wrapped by a navigation page?
    There should be a button aligning at the right side of the top view:

    Make sure there's a navigation page here:

    // in the app class
 MainPage = new NavigationPage(new MainPage());
  • kingston5555kingston5555 Member ✭✭✭

    So I need to use not ContentPage but NavigationPage?

  • kingston5555kingston5555 Member ✭✭✭

    I want to make of some page a Tabbed page

  • kingston5555kingston5555 Member ✭✭✭

    https://github.com/kamenskyh/customTabbedPage
    this is my project where I want to increase images

  • LandLuLandLu Member, Xamarin Team Xamurai

    If you want to show the toolbar on the page, the page must be wrapped by a navigation page.
    Try to modify the code like:

    Children.Add(new NavigationPage(new TabIconsPage())
{

});

    Refer to:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar

  • kingston5555kingston5555 Member ✭✭✭

    Do you have a repository in git of this code? or can you make it, please

  • LandLuLandLu Member, Xamarin Team Xamurai

    There is a repo in the documentation I posted above:
    https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/navigation-titleview/
    You could follow it to build your own navigation title view.
    The key point is to wrap each tabs with a separate navigation page and set the title view on your content page.
    You could adjust the image's size using the code I posted as you want.

  • kingston5555kingston5555 Member ✭✭✭

    I understood from the very beginning that I would have to write a custom table page, the problem is that I can't write it myself yet, so I started looking for other ways, could they help me?

  • LandLuLandLu Member, Xamarin Team Xamurai

    Have you ever tried my code on your side?
    Firstly, try to add a navigation page when assigning the children of the tabbed page:

    Children.Add(new NavigationPage(new TabIconsPage())
{

});

    And then add the title code on the TabIconsPage page:

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="customTap.TabIconsPage"

              xmlns:local="clr-namespace:customTap"
             >


    <NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal">
            <ImageButton Source="yourImage.png" WidthRequest="100" HeightRequest="50" HorizontalOptions="EndAndExpand"/>
        </StackLayout>
    </NavigationPage.TitleView>

    <Label BackgroundColor="White" TextColor="Green" Text="meow"></Label>

</ContentPage>

    Please take a look at the effect after doing this in your sample.
    You need to pay some effort to get the stuff you want. We won't implement the whole thing here for you.

Sign In or Register to comment.