The toolbar color is by default white and I would like to change it to blue. I was able to change almost everything but not that.
Toolbar.axml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
styles.xml
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColorPrimary">#1b2b32</item>
<item name="android:textColorSecondary">#1c4d9e</item>
I found an approach. it is mixed with all the answers I read out there.
I used this answer from
Change color of ToolBarItem in XAML #Guillermo Daniel Arias.
on styles.XML
<item name="android:actionMenuTextColor">#1c4d9e</item>
on App.xml (On xamarin forms share project)
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="White"/>
<Setter Property="BarTextColor" Value="#004895"/>
</Style>
There are two possible approaches:
You change the BarBackgroundColor and BarTextColor of your NavigationPage. In your case, it would be something like that:
MainPage = new NavigationPage(new YourPage())
{
BarBackgroundColor = Color.White,
BarTextColor = Color.Blue
};
The other approach is to set your Android styles. You're already doing that, but I think that's wrong. Instead of android:textColorPrimaryandroid:textColorSecondary`, try something like that:
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#FFFFFF</item>
<item name="colorSecondary">#0000FF</item>
<item name="colorAccent">#0000FF</item>
</style>
I think that android: may be the problem, because I'm doing exactly like I said and it's working.
in App.xml add this :
<Application.Resources>
<ResourceDictionary>
<Color x:Key="mRed">#65508F</Color>
<Color x:Key="mWhite">#FFFFFF</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource mRed}" />
<Setter Property="BarTextColor" Value="{StaticResource mWhite}" />
</Style>
</ResourceDictionary>
</Application.Resources>
Related
In XAML i write color is #252834, and on app a get #272735.
In XAML i write color is #AC8FFF, and on app a get #AC8FFF.The light shades are displayed as it should be
What could be the problem?
Example here
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.TabBarBackgroundColor" Value="#252834"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
I have a Xamarin Forms TabbedPage which contains a NavigationPage and I'm setting a ToolbarItem with two white icons. For some reason they appear black when my icons are white:
Here is my Xaml code:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Pick.Views"
x:Class="Pick.Views.MainView"
xmlns:utility="clr-namespace:Pick.Utility"
utility:ViewModelLocator.AutoWireViewModel="False">
<NavigationPage Title="{Binding Strings[Menu_MyPools]}">
<x:Arguments>
<views:PoolsView BindingContext="{Binding PoolsViewModel}"/>
</x:Arguments>
<NavigationPage.ToolbarItems>
<ToolbarItem Command="{Binding CreatePoolCommand}" Order="Primary" IconImageSource="ic_add_white_36dp.png">
</ToolbarItem>
<ToolbarItem Command="{Binding JoinPoolCommand}" Order="Primary" IconImageSource="ic_login_white_36dp.png">
</ToolbarItem>
</NavigationPage.ToolbarItems>
</NavigationPage>
I have tried setting AppThemeBinding and changing Styles.xml but nothing seems to work:
<ToolbarItem Command="{Binding CreatePoolCommand}" Order="Primary">
<ToolbarItem.IconImageSource>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="Android" Value="{AppThemeBinding Light=ic_add_white_36dp,Dark=ic_add_white_36dp}"/>
<On Platform="iOS" Value="{AppThemeBinding Light=ic_add_white_36pt,Dark=ic_add_white_36dp}"/>
</OnPlatform>
</ToolbarItem.IconImageSource>
</ToolbarItem>
Any ideas?
Here my styles.xml:
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#188223</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>
</resources>
Tabbar.axml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#android:color/white"
app:tabGravity="fill"
app:tabMode="fixed" />
Toolbar.axml:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
I just figured out my issue. Turns out that I had XML files corresponding to my images which had a vector definition inside. Not sure if those were automatically created by one of my material design icons VS extension. Once I remove, I see my icons in the right color.
In UWP, if I want to specify a default style for a custom control, I'd code it up like this:
public PriceControl()
{
// This allows the control to pick up a template.
this.DefaultStyleKey = typeof(PriceControl);
}
I can't find the equivalent in Xamarin.Forms. How do you tell a custom control that it should use a style by default?
Just define a style in App.Xaml of the typeof your control and don't give it a key just a target type and that should do the trick:
<Application.Resources>
<ResourceDictionary>
<Style TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</Application.Resources>
Just replace button with your control and it's properties Into the setter's and this will be your global default style for this control!
I#m a beginner with WPF. I want to make the same like css/sass. I want to reuse some definitions.
Here I want to reuse a color definition in an element (e.g. button). If I use binding with "staticresource", I get the following exception when running:
"An unhandled exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll
Additional information: "#FF8FA2AC" ist kein gültiger Wert für die Eigenschaft "Background"."
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Color x:Key="cyan3">#007ca9</Color>
<Color x:Key="mangenta2">#a8005c</Color>
<Color x:Key="wintergrey1">#e6ecf0</Color>
<Color x:Key="wintergrey2">#c3ced5</Color>
<Color x:Key="wintergrey3">#8fa2ac</Color>
<Color x:Key="wintergrey4">#506671</Color>
<Color x:Key="white">#FFFFFF</Color>
<Color x:Key="antrazit">#333333</Color>
<!-- Base style for button -->
<Style TargetType="Button" x:Key="btnStandard">
<!--Setter Property="Background" Value="#8fa2ac"/-->
<Setter Property="Background" Value="{StaticResource wintergrey3}"/>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="30"/>
</Style>
</ResourceDictionary>
How can I use predefined definitions in other elements? Or what is wrong. I want do define 4 different button styles "Standard", "IsFocused", "IsDisabled" and "IsHero (background=mangenta2".
You should set the Background property to a Brush. If you set it to a SolidColorBrush you can then set the Color property of this one to your Color resource like this:
<Style TargetType="Button" x:Key="btnStandard">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource wintergrey3}" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="30"/>
</Style>
I have created a Xamarin.Forms application and it has quite a long name.
When I start it on my 4.5" Windows 10 phone, it looks very strange.
The main page consists of a TabbedPage and it has the Title property, however it has no FontSizeproperty.
I use the following Style in my PCL project:
<Style TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BaseColor}" />
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="18"
Tablet="28" />
</Setter.Value>
</Setter>
</Style>
However, if I remove it, the title is still very large.
Where can I modify the title font size to make the title smaller?
UPDATE:
I checked with the Live Property Editor, and it shows that the Title is inside the CommandBar and the FontSize is set to 24.
I tried to override its style (both in XAML and in code), but it doesn't work:
<forms:WindowsPage.BottomAppBar>
<CommandBar>
<CommandBar.Style>
<Style TargetType="CommandBar">
<Setter Property="FontSize" Value="4" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Text="Whatever" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CommandBar.Style>
<CommandBar.Content>
<TextBlock Text="Whatever" />
</CommandBar.Content>
</CommandBar>
</forms:WindowsPage.BottomAppBar>
public MainPage()
{
this.InitializeComponent();
var bapp = BottomAppBar;
LoadApplication(new MyXamarinApp.App(IoC.Get<SimpleContainer>()));
BottomAppBar = bapp;
BottomAppBar.FontSize = 4;
}
Any idea?
UPDATE 2:
You can download a sample project from here.
You have to override one of the built-in styles:
<!-- Tab title -->
<Style x:Key="TitleTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="18" />
<Setter Property="TextWrapping" Value="NoWrap" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
</Style>