I am currently trying to style a MenuFlyout using ToggleMenuFlyoutItems here are the resources of ToggleMenuFlyoutItems listed.
If I override those resources nothing changes.
These are my desired resources and colors.
<SolidColorBrush x:Key="ToggleMenuFlyoutItemBackground" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemBackgroundPointerOver" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemBackgroundPressed" Color="{ThemeResource StarCommandBlueColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemBackgroundDisabled" Color="{ThemeResource LightBlackColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemForeground" Color="{ThemeResource PitchBlackColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemForegroundPointerOver" Color="{ThemeResource PitchBlackColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemForegroundPressed" Color="{ThemeResource PitchBlackColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemCheckGlyphForeground" Color="{ThemeResource TabascoRedColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemCheckGlyphForegroundPointerOver" Color="{ThemeResource VikingGreenColor}"/>
<SolidColorBrush x:Key="ToggleMenuFlyoutItemCheckGlyphForegroundPressed" Color="{ThemeResource PitchBlackColor}"/>
is this a known problem or does anyone no a reason/solution?
Greetings
Related
I got a problem with my ToggleButton and its content.
I hope this information is sufficient, let me know if you need anything else!
Problem
I have a ToggleButton that contains a FontIcon and a TextBlock in a Grid:
<ToggleButton Grid.Row="1" HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<FontIcon Grid.Column="0"
FontSize="20"
Glyph="{StaticResource mdi_handyman}"
FontFamily="{StaticResource MaterialDesignIconsOutlined}"/>
<TextBlock Grid.Column="1" Margin="10,0,0,0" Text="{x:Bind p:Resources.Dashboard_Maintenance}"/>
</Grid>
</ToggleButton>
The text in the ToggleButton should always be white. That's why I set following resources for the ToggleButton:
<SolidColorBrush x:Key="ToggleButtonForeground" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundDisabled" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackground" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundDisabled" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{ThemeResource LightPrussianBlueColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedDisabled" Color="{ThemeResource PaleVividSkyBlueColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{ThemeResource LightPrussianBlueColor}"/>
Now there is the requirement to add the FontIcon in the Grid as well. But this FontIcon behaves the same as the text (obviously as the resources for the ToggleButton foreground are for the whole content).
However the FontIcon needs following behavior in the ToggleButton:
<SolidColorBrush x:Key="ToggleButtonForeground" Color="{ThemeResource VividSkyBlue}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundDisabled" Color="{ThemeResource VividSkyBlue}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource VividSkyBlue}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource WhiteColor}"/>
My guess
I guess I could solve this with a converter for the FontIcon Foreground that binds to the selected state of the ToggleButton but this converter would also need the disabled state of the ToggleButton which makes this a bit more compley.
As I think I would be able to get this running I think this might be a bit hacky and not satisfying.
Does anyone have an idea how to solve this more elegant?
Thank you in advance!
You can use the Microsoft.Xaml.Behaviors.WinUI.Managed NuGet package.
Here's the code but I changed the colors to check if this works.
<FontIcon
x:Name="ThisFontIcon"
Grid.Column="0"
FontSize="20"
Glyph="{StaticResource CheckBoxCheckedGlyph}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="PointerEntered">
<core:ChangePropertyAction
PropertyName="Foreground"
TargetObject="{Binding ElementName=ThisFontIcon}"
Value="HotPink" />
</core:EventTriggerBehavior>
<core:EventTriggerBehavior EventName="PointerExited">
<core:ChangePropertyAction
PropertyName="Foreground"
TargetObject="{Binding ElementName=ThisFontIcon}"
Value="{ThemeResource SystemAccentColor}" />
</core:EventTriggerBehavior>
<core:DataTriggerBehavior
Binding="{Binding IsChecked, ElementName=ThisToggleButton}"
Value="True">
<core:ChangePropertyAction
PropertyName="Foreground"
TargetObject="{Binding ElementName=ThisFontIcon}"
Value="{ThemeResource SystemChromeBlackHighColor}" />
</core:DataTriggerBehavior>
<core:DataTriggerBehavior
Binding="{Binding IsChecked, ElementName=ThisToggleButton}"
Value="False">
<core:ChangePropertyAction
PropertyName="Foreground"
TargetObject="{Binding ElementName=ThisFontIcon}"
Value="{ThemeResource SystemAccentColor}" />
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
</FontIcon>
I'm trying to override some default SolidColorBrush for my whole app:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="{ThemeResource SystemAccentColorLight1}"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="{ThemeResource SystemAccentColorLight2}"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="{ThemeResource SystemAccentColorDark1}"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="{ThemeResource SystemAccentColorDark2}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<ResourceDictionary>
</Application.Resources>
When I add these specific SolidColorBrush to my ThemeDictionary in App.xaml (I have more resources placed there) it has no effect.
However, when I place this ThemeDictionary in the Application.Resources of a Page with a ListView it does have an effect.
What is the problem here, and how can I solve it?
I am working on an app that uses a navigationview. I updated Uno to the latest prerelease(Uno 3.0.0-dev.405)- and today after updating Uno, the Hamburger button/Toggle button no longer has the same color as the rest of the menuitems- it is black. I added in the PaneButtonStyle - but that did not work either. How do I fix this?
<NavigationView x:Name="NavView"
Loaded="NavView_Loaded"
ItemInvoked="NavView_ItemInvoked"
PaneDisplayMode="LeftCompact" IsPaneOpen="False"
IsBackButtonVisible="Collapsed"
BackRequested="NavView_BackRequested"
Foreground="{StaticResource NavigationViewItemForeground}"
Background="{StaticResource NavigationViewDefaultPaneBackground}"
PaneToggleButtonStyle="{StaticResource PaneToggleButtonColor}"
Grid.Row="1" >
Style- in separate Resource Dictionary:
<Color x:key="PaneToggleButtonColor">#FF0A8000</Color>
<SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="#FFF2F2F2"/>
<SolidColorBrush x:Key="NavigationViewItemForeground" Color="Green"/>
<SolidColorBrush x:Key="NavigationViewItemForegroundSelected" Color="Green"/>
<SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver" Color="Green"/>
<SolidColorBrush x:Key="NavigationViewItemForegroundPressed" Color="Green"/>
<SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPressed" Color="Green"/>
<SolidColorBrush x:Key="NavigationViewSelectionIndicatorForeground" Color="DarkOrange" />
I want to paint Stack Panel surface using Acrylic brush.
<StackPanel Background="{ThemeResource SystemControlAcrylicElementBrush}"></StackPanel>
It works for me but there is a problem when I want to change Tint color and opacity. There is a following code to change it:
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<AcrylicBrush x:Key="MyAcrylicBrush"
BackgroundSource="HostBackdrop"
TintColor="#FFFF0000"
TintOpacity="0.8"
FallbackColor="#FF7F0000"/>
</ResourceDictionary>
I don't know where should I place it and rename brush for this?
<StackPanel Background="{ThemeResource **MyAcrylicBrush**}"></StackPanel>
Thanks for help.
P.S. You need Windows Insider SDK and system build 16190 or higher
You can create a ResourceDictionary, for example called "ThemeDictionary.xaml" and put the code you have for your AcrylicBrush in there.
Then in your App.xaml you can reference your ResourceDictionary like so:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ThemesDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Method 1:
Add ResourceDictionary.ThemeDictionaries in Application.Resources
In App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<AcrylicBrush x:Key="MyAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FF7F0000"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="MyAcrylicBrush" Color="{ThemeResource SystemColorWindowColor}"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<AcrylicBrush x:Key="MyAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FFFF7F7F"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
Method 2:
As #jsmyth886 answered
Add a separate ResourceDictionary file and place your ResourceDictionary.ThemeDictionaries code
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<AcrylicBrush x:Key="MyAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FF7F0000"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="MyAcrylicBrush" Color="{ThemeResource SystemColorWindowColor}"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<AcrylicBrush x:Key="MyAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FFFF7F7F"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
You MergedDictionaries in App.xaml to Merged your ResourceDictionary file
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
For more Info: ResourceDictionary and XAML resource references, XAML for Windows 10 Controls - Styling
i want to change the accent color in my app (windows universal app) from the default one to a custom color that is defined in my app.
Any idea how can I do this?
You cannot really change the base Accent color in your application because that's defined by the system theme color (Taskbar, Startmenu, etc...). However, you can MODIFY the Accent color by using styles. Here's an example:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1">
<!-- Basic Colors -->
<SolidColorBrush x:Key="SystemAccentTransparentHighBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.9"/>
<SolidColorBrush x:Key="SystemAccentTransparentMediumHighBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.7" />
<SolidColorBrush x:Key="SystemAccentTransparentMediumBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.6" />
<SolidColorBrush x:Key="SystemAccentTransparentMediumLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.5" />
<SolidColorBrush x:Key="SystemAccentTransparentLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.3" />
<SolidColorBrush x:Key="SystemAccentHighlightBrush" Color="{ThemeResource SystemAccentColor}" />
<SolidColorBrush x:Key="SystemBlackBrush" Color="{ThemeResource SystemChromeBlackHighColor}" />
<SolidColorBrush x:Key="SystemWhiteBrush" Color="{ThemeResource SystemChromeWhiteColor}" />
<SolidColorBrush x:Key="SystemGreyHighBrush" Color="#FFE0E0E0" />
<SolidColorBrush x:Key="SystemGreyMediumHighBrush" Color="#FFA0A0A0" />
<SolidColorBrush x:Key="SystemGreyMediumBrush" Color="#FF808080" />
<SolidColorBrush x:Key="SystemGreyMediumLowBrush" Color="#FF606060" />
<SolidColorBrush x:Key="SystemGreyLowBrush" Color="#FF404040" />
<SolidColorBrush x:Key="SystemAppBackgroundBrush" Color="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
<Style x:Key="GridStyle_Page" TargetType="Grid">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="Background" Value="{StaticResource SystemBlackBrush}" />
</Style>
</ResourceDictionary>
You would put that in a styles.xaml file. Then you have to tell the system about it as follows in the App.xaml file:
<Application
x:Class="App1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Finally, you use the styles/colors in your application by doing one of the following:
Add a Style="{StaticResource }" to the element that you
want to style. You would replace with a style that is
defined in the Styles.xaml file above.
Add a color attribute such as Forground, Background, or Border to
the element that you want to color. To do this, add something like
Background="{StaticResource }" where the is
replaced by one of the color styles above.
To modify the accent color, you need to overlay it over a background color. Notice in the SolidColorBrush definitions above. Some of them have an Opacity setting. The range for this setting is between 1.0 and 0.0 where 1.0 is completely opaque while 0.0 is completely transparent. So the lower the Opacity setting, the more of the underlying color shows through. If the underlying color is black, then a lower Opacity setting will give you a darker Accent color. If the underlying color is white, then you will get a lighter Accent color as the Opacity value decreases.
A note about styles: Much of how xaml works is through styles. There are a couple of files on the computer that defines what all the styles are in the system. Those files are generic.xaml and themeresources.xaml. On my system (Windows 10 Pro RTM with VS2015), these files are found in the following location:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
I hope this helps and sorry for the late answer. I just came across your question while I was googling for something else.
Have you tried using:
(App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Colors.Blue;
in you App.xaml.cs?