I am developing a Xamarin.Forms UWP application.
I am struggling to set the accent colour of my application. This is the colour that is used for certain behaviors by default on controls.
For example the Entry control has a default blue highlighting on focus shown below:
I have tried a few suggestions from this thread: Change Accent Color in Windows 10 UWP but none seemed to work.
I am not sure whether it is because I didn't fully understand how changing the colour for UWP differs for Xamarin.UWP, or whether what I'm trying to do is even possible with Xamarin.Forms.
Has anyone found out how to do this?
Here is the style code of FormsTextBox for UWP.
You need to override below styled colors:
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
<Setter Property="BackgroundFocusBrush" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
So to change the colour of your textbox boarder brush you can add these ThemeResources to your App.xaml like so:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="#ff0000" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
You can define a style setter property in App.xaml
<ResourceDictionary>
<Style TargetType="Button" x:Name="myNewButtonStyle">
<Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}" />
</Style>
</ResourceDictionary>
Then use CustomRenderer for the controls you need to change colors
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (this.Element != null)
{
this.Control.Style = Windows.UI.Xaml.Application.Current.Resources["myNewButtonStyle"] as Windows.UI.Xaml.Style;
}
}
in a similar way you would be able to use Themed Resource Dictionary key and apply. This code can be used to have native styles on Xamarin's control.
The absolute easiest way is to go to the styles.xml file which is located in Resources/values and uncomment:
<item name="colorAccent">#FF2081</item>
This changes the accent color on the whole project eg with Entrys.
Related
I have been trying very hard to disable hover, mouse over and row selections on datagrid rows. I had used the following code for Wpf application in the past and it worked perfectly. However, I am in the middle of the process of migrating my code to the new Winui3 and I just can't make it work again.
but the problem is how to hide row selections. See this picture:
Here is the code that works for Wpf;
<controls:DataGrid.Style>
<Style TargetType="controls:DataGridCell">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</controls:DataGrid.Style>
Now, FocusVisualStyle doesn't exists. I was able to disable cell borders on selection by overriding some brush resources like these:
<SolidColorBrush x:Key="DataGridCellFocusVisualPrimaryBrush" Color="Transparent" />
<SolidColorBrush x:Key="DataGridCellFocusVisualSecondaryBrush" Color="Transparent" />
This should work:
<controls:DataGrid>
<controls:DataGrid.Resources>
<Color x:Key="DataGridRowSelectedBackgroundColor">Transparent</Color>
<Color x:Key="DataGridRowSelectedHoveredUnfocusedBackgroundColor">Transparent</Color>
<Color x:Key="DataGridRowSelectedUnfocusedBackgroundColor">Transparent</Color>
<!--
This one is better not being just "Transparent".
This way you won't lose visual effects for hovered selected rows.
-->
<StaticResource
x:Key="DataGridRowSelectedHoveredBackgroundColor"
ResourceKey="SystemListLowColor" />
</controls:DataGrid.Resources>
</controls:DataGrid>
You can find the colors in the GitHub repo.
I want to change the border thickness and border brush of autosuggest box in UWP. But the change is not reflecting in the view.
Here is my code:
<Autosuggest Box border thickness="0.5" border brush="gray"/>
From AutoSuggestBox's template resources, you can see that this control contains a TextBox.
Modify the relevant properties.
<Page.Resources>
<Style x:Key="NewTextBoxStyle" TargetType="TextBox">
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="0.5"/>
</Style>
<Style x:Key="NewStyle" TargetType="AutoSuggestBox">
<Setter Property="TextBoxStyle" Value="{StaticResource NewTextBoxStyle}" />
</Style>
</Page.Resources>
<Grid>
<AutoSuggestBox Style="{StaticResource NewStyle}"/>
</Grid>
If you need to modify other control properties in the future, you can first view the default style and composition structure of the control in generic.xaml, and then modify the property.
For design purposes, generic.xaml is available in the (Program
Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP
\Generic folder from a Windows Software Development Kit
(SDK) installation.
This is for a Windows 10 UWP. I need to allow users to update values on Styles that are associated with elements used throughout the application (i.e allow users to change the font size of various textblocks, background color stackpanels etc.) .
I currently have all my Styles in a separately file.
My App.xaml is as below:
<Application
x:Class="MyTestApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Styles/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
My Styles.xaml (partial) is as below:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="using:MyTestApp.Views"
xmlns:x1="using:System">
<Style x:Key="HeaderTextBlocks" TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
<Setter Property="FontSize" Value="24"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="10,4,0,0"/>
</Style>
<Style x:Key="RegularTextBlocks" TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="0,0,0,0"/>
</Style>
</ResourceDictionary>
I refer to these styles on controls throughout the application using like this:
<TextBlock Style="{StaticResource HeaderTextBlocks}" />
I have created a Settings page (settings.xaml) which has textboxes for the users to update various style settings.
But I am not sure how I could bind these to the settings on the various styles on the styles.xaml file so that the styles are updated and the controls referring to the styles are updated when the user changes the value.
<TextBox Header="Font Size of Header TextBlocks" Text="{x:Bind HeaderTextBlocks.FontSize ???, Mode=TwoWay}" />
<TextBox Header="Font Size of Regular TextBlocks" Text="{x:Bind RegularTextBlocks.FontSize???, Mode=TwoWay}" />
Could someone please point me in the right direction? I am trying to do this with minimal (or no code behind) as possible.
Unfortunately this kind of user-defined styling is not easily available in UWP. You can however implement a kind of styling solution using data binding.
First step is to create a class like CustomUISettings which implements INotifyPropertyChanged and has properties like HeaderFontSize, etc.
Now on app start create an instance of this class and add it as app resource:
Application.Current.Resources["CustomUISettings"] = new CustomUISettings();
Now you can bind to the properties in this class anywhere in your code:
<TextBox FontSize="{Binding HeaderFontSize, Source={StaticResource CustomUISettings}}" />
You must use the classic {Binding} markup extension, because {x:Bind} does not support Source setting.
To modify the UI settings you can just retrieve the instance anywhere and set the properties as you see fit:
var customUISettings = (CustomUISettings)Application.Current.Resources["CustomUISettings"];
customUISettings.HeaderFontSize = 50;
You must make sure that all properties in CustomUISettings class fire the PropertyChanged event. You can see how to implement INotifyPropertyChanged interface for example here.
So I am trying to change the default font family and the font size in my project. I decided to start with buttons.
I do it like this (I am gonna create a separated file for my style, but now I just want to make it work somehow):
<Controls:MetroWindow.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Templates/MyTemplateSelector.xaml"/>
<ResourceDictionary Source="/Templates/FullMenu.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style BasedOn="{StaticResource MetroButton}" TargetType="Button">
<Setter Property="FontFamily" Value="Calibri" />
</Style>
</ResourceDictionary>
</Controls:MetroWindow.Resources>
and nothing changes. What is wrong?
I guess it's because program can't find "{StaticResource MetroButton}".
App.xaml
<Application x:Class="WpfApp2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp2"
xmlns:dialogYesNo="clr-namespace:WpfApp2.DialogYesNo"
StartupUri="Views/MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
<ResourceDictionary Source="ViewModels.xaml" />
<ResourceDictionary Source="Dialogs.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
So, you just need to use it in App.xaml after declaring metro references:
<Style TargetType="Label">
<Setter Property="FontFamily" Value="Segoe UI Light"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI Light"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="FontFamily" Value="Segoe UI "/>
</Style>
Button uses TextBox, so button will be changed automatically.
Instead of define a style just to set fontfamily/weight you can just define in your resource directly the fontfamily and weight with a key(an example with a font that i use)
<Controls:MetroWindow.Resources>
<FontFamily x:Key="FontAwesome">/tuseradm;component/assets/fontawesome-webfont.ttf#FontAwesome</FontFamily>
</Controls:Flyout.Resources>
then in your button just set the font family
<Button FontFamily="{StaticResource FontAwesome}" Content="" />
EDIT adding another answer:
by default mahapps override the default wpf style. If you want to modify a style for let's say buttons in all your view you don't need to use based on
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="FontWeight" Value="ExtraLight"/>
</Style>
EDIT 2
At least for me, even if i see the change at design time using the approach exposed in the first edit, at run time the problem persist. So in my opinion, is much better to stick with my first answer. Maybe it could be annoying to set fontfamily and fontweight for each button, but it is the safest way to deal with mahapps styles. The only way to solve this 100% for sure is to find (no clue where) the template of mahapps buttons and modify it
Here's a simple thing with which I am struggling with :
I have a style specified in my App.Resources
<Application.Resources>
<Style TargetType="{x:Type igDock:PaneToolWindow}">
<Setter Property="Background" Value="Red"/>
</Style>
</Application.Resources>
I would Like to move this into my theme file by trying something like this.
<SolidColorBrush x:Key="{ComponentResourceKey {x:Type DockManager:PaneToolWindow}, defaultBackground}" Color="Red" PresentationOptions:Freeze="true" />
Of course I am doing something terribly wrong here, My intention is to have all floating windows a default style.
Why use a solid color Brush? The way you had it initially would have worked fine if placed in your custom XAML file.
Just put
<Style TargetType="{x:Type igDock:PaneToolWindow}">
<Setter Property="Background" Value="Red"/>
</Style>
...in your style file.