Forum Cross Platform with Xamarin

Custmoize ToolbarIcon/ Commandbar icon/ AppBar icon size and hover in Xamarin UWP

R0undProblemsFoundR0undProblemsFound Member ✭✭

There are two toolbar icons in this screenshot: Check mark(48x48) and an options icon(6x24). I am not able to warp my head around the fact that the check mark appears smaller than the options icon, even though its dimensions are bigger than the later.

Also, the icon turns black and a translucent box is added over it when mouse cursor hovers it, as depicted in the below screen shot. How do I disable this?

I tried overriding the AppBarButtonStyle, as suggested in this answer: https://stackoverflow.com/questions/55433039/commandbar-appbarbutton-icon-size
by changing all the 'ContentViewbox.Width' and 'ContentViewbox.Height' to 20. Should I be overriding a different style, if yes, can you please provide me the proper one, or am I missing something here?

Thanks in advance :smiley:

Best Answer

  • R0undProblemsFoundR0undProblemsFound Member ✭✭
    Accepted Answer

    @jezh said:

    I was able to set the icon color to turn to white by overriding the _AppBarButtonForegroundPointerOver _SolidBrushColor.

    Congratulations on solving this problem.
    Could you please share the relative code about this answer, so that it can help others who have the similar question?

    Thanks @jezh , this is what I tried:

    <SolidColorBrush x:Key="AppBarButtonForegroundPointerOver" Color="White" />

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Hey friend @R0undProblemsFound

    Is your app is a MasterDetailPage app?
    To help us investigate on your question, could you please share the two icons with different sizes so that we can try to test on our side?

  • Hey @jezh ,

    I have attached the icons with this comment, and to answer your question: yes, the app is a MasterDetailPage app. And on that note, will you also be able to help me in disabling the hover effect on the master detail icon(Hamburger icon)?
    Thank you :smile:

  • Also, the icon turns black and a translucent box is added over it when mouse cursor hovers it, as depicted in the below screen shot. How do I disable this?

    I was able to set the icon color to turn to white by overriding the _AppBarButtonForegroundPointerOver _SolidBrushColor.

  • jezhjezh Member, Xamarin Team Xamurai

    I was able to set the icon color to turn to white by overriding the _AppBarButtonForegroundPointerOver _SolidBrushColor.

    Congratulations on solving this problem.
    Could you please share the relative code about this answer, so that it can help others who have the similar question?

  • R0undProblemsFoundR0undProblemsFound Member ✭✭
    Accepted Answer

    @jezh said:

    I was able to set the icon color to turn to white by overriding the _AppBarButtonForegroundPointerOver _SolidBrushColor.

    Congratulations on solving this problem.
    Could you please share the relative code about this answer, so that it can help others who have the similar question?

    Thanks @jezh , this is what I tried:

    <SolidColorBrush x:Key="AppBarButtonForegroundPointerOver" Color="White" />

  • jezhjezh Member, Xamarin Team Xamurai

    Thanks, @R0undProblemsFound could you please mark your answer to finish this topic? :)

  • I tried overriding the AppBarButtonStyle, as suggested in this answer: https://stackoverflow.com/questions/55433039/commandbar-appbarbutton-icon-size
    by changing all the 'ContentViewbox.Width' and 'ContentViewbox.Height' to 20. Should I be overriding a different style, if yes, can you please provide me the proper one, or am I missing something here?

    >

    I am not able to increase the icon size here. I did try with the attached icon, the size has matched that of the options icon. Is there a cap on the maximum size limit?

  • R0undProblemsFoundR0undProblemsFound Member ✭✭
    edited April 22

    @jezh said:
    Hey friend @R0undProblemsFound

    Is your app is a MasterDetailPage app?
    To help us investigate on your question, could you please share the two icons with different sizes so that we can try to test on our side?

    Hi @jezh , were you able to check it out with the icons I had provided? I am still not able to fix this issue.

Sign In or Register to comment.