locked
UWP UI Colors (Tool Bar and Tabbed Page) RRS feed

  • Question

  • User392730 posted

    Hello, I feel bad that my first post here will probably be stupidly simple but I can’t seem to find this one, so after a full day of looking around I decided to ask (and accept all criticism). Created a UWP application inside an already existing (Prism) Forms project, everything referenced to the Forms nicely, but editing the colors is not straightforward at all. Specifically the Tool Bar (or Navigation Bar?, the red square) has this gray-ish color (from the Light Theme I presume) and I can’t seem to change it or the letters. Was looking around for a non hackish solution like changing the theme’s light color, even though I haven’t tried that to even see if it works. Also the “More” dot thing (the blue circle), is redundant, there is nothing to expand, can it go away? Lastly in the tabbed page, the icons (purple square) are stacked on the left side and I cannot seem to find anything resembling its Column Definitions, Horizontal Options or the option of whatever structure it uses to align them in the center. Do I need a custom renderer for this one? I have no code to show, since I don’t even know from where to edit these, the Xamarin docs had an example with SolidColorBrush for buttons but since most code I found uses x:Keys to reference the items, I don’t have intellisense on those and can’t try different things out. Thanks for any answer on any on the above in advance!

    Tuesday, February 11, 2020 2:40 PM

All replies

  • User392795 posted

    @Zebe said: Specifically the Tool Bar (or Navigation Bar?, the red square) has this gray-ish color (from the Light Theme I presume) and I can’t seem to change it or the letters. Was looking around for a non hackish solution like changing the theme’s light color, even though I haven’t tried that to even see if it works.

    Take a look at this : https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.commandbar?view=winrt-18362

    You can find the ThemedResources that the CommandBar uses. Now in your App.xaml(UWP project), you can override these styles.

    For example, I had to get my Appbar/Toolbar button's Foreground color on hover changed to white. Hence I had to override the _AppBarButtonForegroundPointerOver _style as such:

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

    Use this: https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/CommonStyles/CommandBar_themeresources.xaml, to understand the various styles that are available, and play around with them in your App.xaml.

    I just started UWP development with Xamarin, without any prior knowledge to UWP, so it is a challenge to figure out what kind of element the style needs. In the AppBarButton, situation I was using a Color tag to override AppBarButtonForegroundPointerOver and it didn't reflect any change. Then I tried with SolidColorBrush, and it worked.

    It is absolutely painstaking to find any UWP help easily, hope this helps.

    Monday, April 20, 2020 6:42 AM
  • User392730 posted

    After another day of looking into it, > @R0undProblemsFound said:

    @Zebe said: Specifically the Tool Bar (or Navigation Bar?, the red square) has this gray-ish color (from the Light Theme I presume) and I can’t seem to change it or the letters. Was looking around for a non hackish solution like changing the theme’s light color, even though I haven’t tried that to even see if it works.

    Take a look at this : https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.commandbar?view=winrt-18362

    You can find the ThemedResources that the CommandBar uses. Now in your App.xaml(UWP project), you can override these styles.

    For example, I had to get my Appbar/Toolbar button's Foreground color on hover changed to white. Hence I had to override the _AppBarButtonForegroundPointerOver _style as such:

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

    Use this: https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/CommonStyles/CommandBar_themeresources.xaml, to understand the various styles that are available, and play around with them in your App.xaml.

    I just started UWP development with Xamarin, without any prior knowledge to UWP, so it is a challenge to figure out what kind of element the style needs. In the AppBarButton, situation I was using a Color tag to override AppBarButtonForegroundPointerOver and it didn't reflect any change. Then I tried with SolidColorBrush, and it worked.

    It is absolutely painstaking to find any UWP help easily, hope this helps.

    Thanks a lot for your answer, sorry it took so long to notice.

    I dealt with the color part a while back by setting the style for the bar in the Forms project. I hadn’t realized that on each other platform the color scheme is defined in the native project, while in UWP is not. As for the small icons, for that version of forms, it was bug and it was reported at Github as well. After I found out that it is called Command Bar, I was also able to get rid of the expansion dots.

    I will definitely take a look on your resources, because in UWP it is indeed hard to find anything when starting out. You never know when they will be needed!

    Sunday, May 17, 2020 8:08 PM
  • User394095 posted

    Hey @Zebe , can you post your solution here?

    Tuesday, May 19, 2020 11:09 AM
  • User392730 posted

    @Goutham_HasProblems said: Hey @Zebe , can you post your solution here?

    In Forms App.xaml I specifically declared the colors for the navigation bar, since on other platforms I usually change those from each native project "style". <Style TargetType="NavigationPage"> <Setter Property="BarBackgroundColor" Value="{OnPlatform Android={StaticResource PrimaryColor},iOS={StaticResource AccentColor}, UWP={StaticResource AccentColor}}" /> <Setter Property="BarTextColor" Value="{OnPlatform Android={StaticResource AccentColor},iOS={StaticResource PrimaryColor}, UWP={StaticResource PrimaryColor}}" /> </Style>

    And for the expansion dots in UWP App.xaml I just set the expand button width to 0: ```

            <x:Double x:Key="AppBarExpandButtonThemeWidth">0</x:Double>
    
        </ResourceDictionary>
    </Application.Resources>
    

    ```

    I didn't find a way to center the tabs back then and then the project was scrapped so I never got to it.

    Tuesday, May 19, 2020 11:49 AM