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" />
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>
Whenever I press and hold the button I can see a blue color background till I release the button
I tried to reset it white by using the key ButtonPressedBackgroundThemeBrush
Here is my button code
<Button Content="Submit" BorderThickness="0" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" FontSize="21" Height="85" BorderBrush="White" Command="{Binding testCommand}" Foreground="{StaticResource Green}">
<Button.Resources>
<SolidColorBrush x:Key="ButtonPressedBackgroundThemeBrush" Color="White" />
</Button.Resources>
</Button>
But its not working for some reason.
Try defining the brush in your application resources:
<Application.Resources>
<SolidColorBrush x:Key="ButtonPressedBackgroundThemeBrush" Color="White" />
</Application.Resources>
This will change the button press background for ALL buttons however. If you want specific buttons to have different backgrounds, you'll need to edit the Button template for each. One simple way to do that is to define a style for each and set the Background to whatever you like during the IsPressed Trigger
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I am writing my first Win 8.1 App and I am trying to set background image for Hubapp Layout.
I can see the background in the preview, but once I run the application it became black background.
Here is my code:
<Grid x:Name="LayoutRoot">
<Hub x:Name="Hub" x:Uid="Hub" Header="The Header">
<Hub.Background>
<ImageBrush Stretch="None"
ImageSource="Assets\background.png"
AlignmentY="Top" AlignmentX="Center"/>
</Hub.Background>
</Hub>
</Grid>
I tried also to set the background using ThemeResource but I got the same result only black background
<Grid x:Name="LayoutRoot">
<Hub x:Name="Hub" x:Uid="Hub" Header="The Header">
Background="{ThemeResource HubBackgroundImageBrush}"> </Hub>
</Grid>
here is the Resources code
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<ImageBrush x:Key="HubBackgroundImageBrush" ImageSource="Assets\background.png"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<ImageBrush x:Key="HubBackgroundImageBrush" ImageSource="{x:Null}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
Would you please tell what is wrong?
Just looked into this and it appears the background of the hub doesn't appear until a HubSection is added.
If I try
<Hub x:Name="hub" Background="Red">
</Hub>
No Background appears despite the Hub appearing to stretch to the whole screen
but if I add a HubSection
<Hub x:Name="hub" Background="Red">
<HubSection></HubSection>
</Hub>
Red Background appears.
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?
I'm creating a Windows Store app where each page has a dominant color used for titles, buttons and such.
In App.xaml I've created a default Brush that's overriden in each Page's xaml file, and a style template for Buttons which I reuse in every page. The templates are supposed to use the page's color but for some reason they stick with the default value.
Here are my xaml files.
App.xaml
<Application
x:Class="Foo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Foo"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<SolidColorBrush x:Name="SectionDefaultBrush" Color="Red" />
<Style TargetType="Button" x:Name="NavigationButtonStyle">
<Setter Property="FontFamily" Value="Myriad Pro" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="Border" Fill="#f4f4f4" Margin="0" />
<TextBlock Foreground="{ ThemeResource SectionDefaultBrush }" Text=">" FontSize="31" />
<ContentPresenter x:Name="Content" VerticalAlignment="Center" Foreground="#5A5A5A" HorizontalAlignment="Left" FontSize="31"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
SomePage.xaml
<Page
x:Class="Foo.Pages.SomePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<SolidColorBrush x:Key="SectionDefaultBrush" Color="Green" />
</Page.Resources>
<ViewBox>
<Canvas>
<TextBlock Text="Some text" Foreground="{ ThemeResource SectionDefaultBrush }" Canvas.Left="130" TextWrapping="Wrap" Canvas.Top="252" Height="177" Width="507" FontFamily="Myriad Pro" FontSize="54" />
<Button Content="Click me" Style="{ ThemeResource NavigationButtonStyle }" Canvas.Left="130" Canvas.Top="900" Width="507" Height="48" />
</Canvas>
<ViewBox>
In this example, the TextBlock's text color is green as expected (and red if I remove the Brush from Page.Resources), but the Button's content remains red. Is there a way to tell the template to use the final color ?
The app's resource dictionary doesn't know about other dictionaries and unlike with WPF's DynamicResources - StaticResource isn't reevaluated and ThemeResource is, but I think only when the actual theme changes. The way you can customize the color of that button is to use TemplateBinding in the template and bind to say the Foreground property of the button and also set that in the Foreground Setter of your button style to {StaticResource SectionDefaultBrush}. Then in your page you can override that by setting the Foreground of the button to a different value or using a derived button style that changes the Foreground value.
Ideally too - you should define theme resources in your dictionary so the brushes change depending on OS theme (especially high contrast). You might want to name your brush then as "SectionDefaultThemeBrush" instead of just "SectionDefaultBrush".