By default, it seems that the background is white and the labels are grey. This looks bad. I would change the labels' colour to complete black.
But I do not want to set the TextColor individually. There must be a way to change the default label color at once. I looked into the shared module, but I cannot find anything. The sytles.xml in the Android project does not have the grey colour. Where can I find it?
You can do this many ways but simplest way is using custom control
public class MyLabel : Label
{
public MyLabel ()
{
BackgroundColor = Color.Gray;
}
}
You can use using this :
<MyLabel Text="This is testing" />
Re: https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/introduction/
OR
Set style in App.xaml
<Application.Resources>
<ResourceDictionary>
<Style TargetType="Label">
<Setter Property="TextColor" Value="Gray" />
</Style>
</ResourceDictionary>
</Application.Resources>
If you want to change TextColor of all label then you can do it from implicit style like this:
<Style TargetType="Label">
<Setter Property="TextColor" Value="Black" />
</Style>
And add this to resource dictionary of App.xaml
Related
My theme/color settings...
App.xaml:
<Application.Resources>
<Color x:Key="PageBackgroundColor">#1F1F1F</Color>
<Style TargetType="Entry">
<Setter Property="HorizontalOptions" Value="Fill" />
<Setter Property="TextColor" Value="Whitesmoke" />
<Setter Property="PlaceholderColor" Value="Red" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style TargetType="Label">
<Setter Property="TextColor" Value="WhiteSmoke" />
</Style>
<Style TargetType="TimePicker">
<Setter Property="TextColor" Value="WhiteSmoke" />
</Style>
<Style TargetType="Picker">
<Setter Property="TextColor" Value="WhiteSmoke" />
<Setter Property="TitleColor" Value="Red" />
</Style>
</Application.Resources>
styles.xml:
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
<item name="colorAccent">#ff0000</item>
</style>
<style name="MainTheme.Base" parent="Theme.AppCompat.Light">
<item name="android:timePickerDialogTheme">#style/MyTimePickerDialogStyle</item>
</style>
<style name="MyTimePickerDialogStyle" parent="#style/ThemeOverlay.AppCompat.Dialog.Alert">
<item name="colorControlActivated">#FF0000</item>
<item name="colorAccent">#000000</item>
<item name="android:textColorPrimary">#000000</item>
<item name="android:textColorSecondary">#000000</item>
</style>
</resources>
MainPage.xaml:
<ContentPage ...
BackgroundColor="{DynamicResource PageBackgroundColor}"
...>
...
<Button ... TextColor="#F5F5F5" BackgroundColor="#007F00" ... />
...
<Label ... BackgroundColor="#F5F5F5" ... />
My App is meant to be on a dark background regardless of the selected Dark/Light mode. Dark/Light mode should not affect any colours.
No colour problems with Light mode on Android 10.
With Dark mode:
The button Green (#008000) becomes lime, which renders the white text colour unreadable, so I had to change the Button BackgroundColor property from Green (#008000) to #007F00, which surprisingly works fine although the difference between the two colours is minimal
The label WhiteSmoke (#F5F5F5) becomes dark
If I change the <Setter Property="TextColor" Value="WhiteSmoke" /> to <Setter Property="BackgroundColorColor" Value="WhiteSmoke" />, the change will be applied only for light theme
No problems with buttons that have BackgroundColor set to Red (#FF0000)
Why on Earth the Dark mode is affecting only certain colours? I guess there are some settings that can override the Dark mode. Any suggestions?
EDIT: Is there a way to deactivate Dark mode?
How to set themes, styles, colors etc. so they won't be affected by Dark/Light mode?
EDIT2: Screenshots...
Light mode:
Dark mode:
EDIT3: It affects images, too.
I tried with two almost identical images with the only difference a red & green background. The rest of the background is trasparent. The word 'swipe' and the arrow are of #F5F5F5 colour, while the circle around the 'A' is #FFFFFF. The images are fresh from Photoshop:
Screenshots while on White / Dark mode:
___
As you can see the Dark mode affects only one of the two images similarly to the hex colors I mentioned before.
According to document, you can Set the current user theme:
The theme used by the application can be set with the
Application.UserAppTheme property, which is of type OSAppTheme,
regardless of which system theme is currently operational:
Application.Current.UserAppTheme = OSAppTheme.Dark;
You can also set same color under light/dark mode:
<Label Text="This text is green in light mode, and green in dark mode."
TextColor="{AppThemeBinding Light=Green, Dark=Green}" />
I have a UWP app and try out Embedded Xamarin Forms. The embedding itself works so far. But I noticed that certain TextStyles do no longer work after I initialized Forms.
Without Forms:
After Forms.Init:
The only difference is this Line in the App.xaml.cs:
Xamarin.Forms.Forms.Init(e);
The Code of the TextBlock is:
<TextBlock x:Name="TitlePage"
Text="Hello"
Style="{StaticResource PageTitleStyle}" />
And the style:
<Style x:Key="PageTitleStyle"
TargetType="TextBlock">
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="FontWeight"
Value="SemiLight" />
<Setter Property="FontSize"
Value="{StaticResource LargeFontSize}" />
<Setter Property="TextTrimming"
Value="CharacterEllipsis" />
<Setter Property="TextWrapping"
Value="NoWrap" />
<Setter Property="Margin"
Value="{StaticResource PageTitleMargin}" />
</Style>
I created a minimal example which you can find here: https://github.com/NPadrutt/EmbeddedFormsTest
Versions:
VS 15.5.2
Xamarin.Forms 2.5.0.121934
Microsoft.NETCore.UniversalWindowsPlatform 6.0.5
When you execute Xamarin.Forms.Forms.Init(e);, it will load the ResourceDictionary which defined in Xamarin. So that after this code line invoked, the text may show the style defined in Xamarin Forms, not the style you defined in UWP. Details you can check the code snippet of Init method.
Updated:
The Init method merge the style by this code line
return new Windows.UI.Xaml.ResourceDictionary {
Source = new Uri("ms-appx:///Xamarin.Forms.Platform.UAP/Resources.xbf")
And you will find the following style in Resource.xaml in Xamarin.
<Style x:Key="PageTitleStyle" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold" />
</Style>
Which has same x:key (PageTitleStyle) as you defined so that your style will be override. Just change the x:key of your style it will not be influenced by the Xamarin resources,for example PageTitleStyle2.
If you want to use the style you defined in UWP app for the Xamarin Forms, you could use Custom Renderers. TextBlock is the native control for UWP, the correspondent control in Xamarin Forms is Label. Details please see Renderer Base Classes and Native Controls. You should have a Label control in Xamarin Forms and create a custom renderer for Label and set the style with target type is TextBlock in UWP. For example:
public class MyLabelRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
Control.Style= (Windows.UI.Xaml.Style)App.Current.Resources["PageTitleStyle"];
}
}
For more samples you could reference this.
i'm new Xamarin, can anyone suggest, how to add behaviors to the style of control in Xamarin xaml.
I have some ClickableImageBehavior and some imageBaseStyle, how to associate behavior with setter?
UPD
Details:
So... problem:
public class ClickableImageBehavior : Behavior<Image>
{
// handle user tap on button.
}
And using looks like this:
<Image>
<Image.Behaviors>
<view:ClickableImageBehavior/>
</Image.Behaviors>
</Image>
But i don't want to write this xaml on every button that has ClickableImageBehavior
I want to create some base style with this behavior and base properties and simple inherit it in every image like
<Image style="{StaticResource clickableImageStyle"/>
In WPF i can deal with it like in this article, but how to do it in Xamarin xaml?
I'm not really an expert but when I added a behaviours it was always in a component like
<psc:EnumBindablePicker x:Name="enumpickerSpeechPart">
<psc:EnumBindablePicker.Behaviors>
<pscv:PickerBehavior x:Name="pickerBehaviorSpeechPart" />
</psc:EnumBindablePicker.Behaviors>
</psc:EnumBindablePicker>
In the ResourceDictionary you can add calls to converters.
<local:BooleanToObjectConverter x:Key="boolToStyleImage" x:TypeArguments="Style">
<local:BooleanToObjectConverter.FalseObject>
<Style TargetType="Image">
<Setter Property="HeightRequest" Value="20" />
<Setter Property="Source" Value="{local:ImageResource Images.error.png}" />
</Style>
</local:BooleanToObjectConverter.FalseObject>
<local:BooleanToObjectConverter.TrueObject>
<Style TargetType="Image">
<Setter Property="HeightRequest" Value="20" />
<Setter Property="Source" Value="{local:ImageResource Images.success.png}" />
</Style>
</local:BooleanToObjectConverter.TrueObject>
</local:BooleanToObjectConverter>
I want to apply a style to a control. This is the style
<Application.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="BackgroundColor" Color="Yellow" />
<Style TargetType="Button" x:Name="myNewButtonStyle">
<Setter Property="Background" Value="{StaticResource BackgroundColor}" />
</Style>
</ResourceDictionary>
</Application.Resources>
, which can be found in App.xaml (UWP project). And here is the custom renderer:
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (this.Element != null)
{
var style = Windows.UI.Xaml.Application.Current.Resources["myNewButtonStyle"] as Windows.UI.Xaml.Style;
this.Control.Style = style;
}
}
The idea is based on this answer. But the style isn't applied. Setting the background color in code does work:
this.Control.BackgroundColor = new SolidColorBrush(Windows.UI.Colors.Yellow);
How can I apply a style to a control in a custom renderer?
I've filled a bug report. It should be fixed in one of the upcoming releases (> XF 2.3.3.166-pre4).
My code goes as follows :
<TextBox >
<TextBox.Text>
<Binding Path="SaveAsText" ValidatesOnDataErrors="True" ValidatesOnExceptions="True" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<val:SaveTextValidator></val:SaveTextValidator>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors), Converter={StaticResource errorConverter}}"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Now when a validation error happens, the ToolTip is getting displayed but the default validation template of making a TextBox border red is not firing !!
Where am I going wrong?
You are overwriting the default style of the TextBox (basically saying: do nothing unless I tell you to).
I imagine there is some trigger in the default style that makes the border red. Either implement it your self or base your style on the current default.
<Style BasedOn={x:Type TextBox} ...>