I'm trying to style Navigation page on xamarin forms app with Mvvmcross.
before "adding" mmvcross I've defined style in App.xaml as follows.
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="Black" />
<Setter Property="BarTextColor" Value="White" />
</Style>
and it worked. I got background color and text color as i defined. Then we "moved" to Mvvmcross - we added all needed backend code, changed all pages from ContentPage to MvxContentPage etc and... background color of navigation page stopped working on Android (I haven't tried on iOS). If i change BarTextColor in App.xaml changes apply, color is changed. if i change BackgroundColor it also works - all application background color is changed. but no matter what value i apply to BarBackgroundColor it is still white.
my App.xaml is as follows:
<?xml version="1.0" encoding="utf-8" ?>
<core:MvxFormsApplication xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
xmlns:viewModels="clr-namespace:MvvmCross.ViewModels;assembly=MvvmCross"
xmlns:core="clr-namespace:MvvmCross.Forms.Core;assembly=MvvmCross.Forms"
xmlns:attributes="clr-namespace:MvvmCross.Forms.Presenters.Attributes;assembly=MvvmCross.Forms"
x:Class="ShowMeTheLogs.Core.FormsApp">
<core:MvxFormsApplication.Resources>
<!--Global Styles-->
<Color x:Key="ColorPrimary">#98C340</Color>
<Color x:Key="ColorError">#CF1212</Color>
<Color x:Key="ColorWarning">#E4AD17</Color>
<Color x:Key="ColorInfo">#1283CF</Color>
<Color x:Key="ColorDebug">#989898</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource ColorPrimary}" />
<Setter Property="BarTextColor" Value="White" />
</Style>
<Style x:Key="SubmitButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ColorPrimary}" />
<Setter Property="TextColor" Value="White" />
</Style>
<Style x:Key="circleButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ColorPrimary}" />
<Setter Property="BorderRadius" Value="50" />
<Setter Property="WidthRequest" Value="100" />
<Setter Property="HeightRequest" Value="100" />
<Setter Property="TextColor" Value="White" />
<Setter Property="FontSize" Value="50" />
</Style>
<Style x:Key="smallSquareButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ColorPrimary}" />
<Setter Property="WidthRequest" Value="100" />
<Setter Property="HeightRequest" Value="100" />
<Setter Property="TextColor" Value="White" />
<Setter Property="FontSize" Value="Micro" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
</Style>
</core:MvxFormsApplication.Resources>
</core:MvxFormsApplication>
my App.xalm.cs is the simpliest as it can be:
public partial class FormsApp: MvxFormsApplication
{
public App()
{
InitializeComponent();
}
}
and the simpliest view:
<?xml version="1.0" encoding="utf-8" ?>
<views:MvxContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
x:TypeArguments="viewModels:WebAppListViewModel"
x:Class="ShowMeTheLogs.Core.Views.WebAppListPage"
xmlns:bindings="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms"
xmlns:viewModels="clr-namespace:ShowMeTheLogs.Core.ViewModels;assembly=ShowMeTheLogs.Core"
Title="Sample title"
NavigationPage.HasBackButton="False">
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="AddNewApp" Order="Secondary" Text="Dodaj aplikacjÄ™" Priority="0" Command="{bindings:MvxBind NewWebAppCommand}"/>
</ContentPage.ToolbarItems>
<RelativeLayout Padding="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Non relevant="Code" />
</RelativeLayout>
</views:MvxContentPage>
I have literally no idea why it is not working. the only change in androud code was changing class RootActivity: CompatActivity to class RootActivity: MvxFormsAppCompatActivity
have enyone fought this problem before?
packages were obtained from NuGet
- MvvmCross (and MvvmCross.Forms) ver 6.2.2
- Xamarin ver 28.0.0
- Xamarin.Forms ver 3.4.0
In your MainActivity OnCreate method, make sure the two lines setting the Toolbar resource are before the base.OnCreate() call:
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
}
https://github.com/MvvmCross/MvvmCross/issues/2301
Related
I have declared global styles in .Net Maui and trying to access it from one of the pages but it's throwing exceptions
Microsoft.Maui.Controls.Xaml.XamlParseException: Position 10:37. Type converter failed: Exception has been thrown by the target of an invocation.
Microsoft.Maui.Controls.Xaml.XamlParseException: Position 8:34. StaticResource not found for key Primary.
App.xaml code
<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<Style x:Key="redLabelStyle"
TargetType="Label">
<Setter Property="TextColor"
Value="Red"/>
<Setter Property="FontSize"
Value="Small"/>
<Setter Property="FontAttributes"
Value="Bold"/>
</Style>
<Style TargetType="Label">
<Setter Property="TextColor"
Value="Green"/>
<Setter Property="FontSize"
Value="Small"/>
<Setter Property="FontAttributes"
Value="Bold"/>
</Style>
</Application.Resources>
MainPage.xaml code
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False"
x:Class="MyApp.MainPage">
<VerticalStackLayout HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Label Style="{StaticResource redLabelStyle}"
Text="Global Style Red Label"/>
<Label Text="GLobal Style Green Label"/>
<Label Text="GLobal Style Green Label"/>
</VerticalStackLayout>
</ContentPage>
Note: This is the default app created by .Net Maui.
This is the wrong place i think </ResourceDictionary>
Try this :
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="redLabelStyle"
TargetType="Label">
<Setter Property="TextColor"
Value="Red"/>
<Setter Property="FontSize"
Value="Small"/>
<Setter Property="FontAttributes"
Value="Bold"/>
</Style>
<Style TargetType="Label">
<Setter Property="TextColor"
Value="Green"/>
<Setter Property="FontSize"
Value="Small"/>
<Setter Property="FontAttributes"
Value="Bold"/>
</Style>
</ResourceDictionary>
</Application.Resources>
Also give the second style a name. <Style TargetType="Label"> a name in x:Key=""
Like
x:Key="greenLabelStyle"
You can also add global styles to the Styles.xaml file referenced in your MergedDictionaries
Please note the location of file
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
You can copy your styles directly into there instead, allowing you to keep all of your global styles in one central place. This helps keep your App.xaml nice and tidy.
How to override default blue titlebar color of Xamarin.Forms UWP app through AppShell style or something?
Color Problem
If you want to change the Blue color of the bar of your sceenshot in shell app,you can set the value of property Shell.BackgroundColor:
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<!--change the color here-->
<Setter Property="Shell.BackgroundColor" Value="#96F3" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
I am new to xamarin.forms development and I am using VisualStudio 2019 to achieve the same. I am developing a sample shell application but unable to change the colour of toolbar(blue color in the picture). Could anyone please help me on this issue.
We could set the background color by add BackgroundColor="Green" in the shell.xaml
For example we set it it Green
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:xxx"
Title="xxx"
BackgroundColor="Green"
x:Class="xxx.AppShell">
This will let color of TabBar been changed to green at the same time . So we should create styles for TabBar.
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color> //color of TabBar
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style x:Key="MyBaseStyle" TargetType="Element">
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="TabBar" BasedOn="{StaticResource MyBaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<!-- Your Pages -->
<TabBar >
<Tab Title="xxx" Icon="xxx" >
<ShellContent ContentTemplate="{DataTemplate xxx}" />
</Tab>
<Tab Title="xxx" Icon="xxx">
<ShellContent ContentTemplate="{DataTemplate xxx}" />
</Tab>
</TabBar>
I have this style:
<Style x:Key="pointButton" TargetType="Button">
<Setter Property="BorderColor" Value="#999999"/>
<Setter Property="BorderWidth" Value="1" />
<Setter Property="TextColor" Value="#AAAAAA" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="StartAndExpand" />
<Setter Property="Margin" Value="10,10,10,10" />
<Setter Property="HeightRequest" Value="40" />
</Style>
I would like to include this. Is it possible?
<Button.FontSize>
<OnPlatform x:TypeArguments="x:Double" iOS="25" Android="20" />
</Button.FontSize>
With the new Xamarin OnPlatform specification is possible to define the platform styles directly in the style tag:
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="FontSize">
<OnPlatform x:TypeArguments="x:Double">
<On Platform="Android">40</On>
<On Platform="iOS">10</On>
</OnPlatform>
</Setter>
</Style>
Define every property as OnPlatform
<OnPlatform x:Key="MyFontSize" x:TypeArguments="x:Double" iOS="14" Android="14" WinPhone="14" />
and refer it in yout button style like
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{StaticResource MyFontSize}" />
</Style>
what approach would you use if you have a mobile app build using xamarin and this app is like a vanilla app.
Each client should be able to apply their own style to labels etc.. theme
Basically all the views/pages are the same for all the clients but the style per page will change for each individual client.
If this wasn't a mobile app I would have plugins within a folder and depending on the client i would drop the relative plugin in the pluginFolder eg:pluginClientA etc.. and this would be discovered at runtime usin mef.
Any suggestions
Set you styles up as dynamicresources as seen here https://developer.xamarin.com/guides/xamarin-forms/user-interface/styles/dynamic/
I only have 2 themes so I have them specified in xaml
<ResourceDictionary>
<Color x:Key="Primary">#337ab7</Color>
<Color x:Key="Accent">#96d1ff</Color>
<Color x:Key="BackgroundColor">#C0C0C0</Color>
<Color x:Key="TextColor">White</Color>
<!-- Buttons -->
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="BorderRadius" Value="4" />
<Setter Property="FontSize" Value="48" />
<Setter Property="FontAttributes" Value="Bold" ></Setter>
<Setter Property="HeightRequest">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Double" iOS="80" Android="80" />
</Setter.Value>
</Setter>
<Setter Property="WidthRequest">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Double" iOS="150" Android="150" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="btnPrimary" TargetType="Button" BasedOn="{StaticResource buttonStyle}">
<Setter Property="TextColor" Value="{DynamicResource TextColor}" />
<Setter Property="BackgroundColor" Value="{DynamicResource Primary}" />
</Style>
<!--Light Theme-->
<Color x:Key="Primary-Light">#2196F3</Color>
<Color x:Key="BackgroundColor-Light">#FAFAFA</Color>
<Color x:Key="TextColor-Light">White</Color>
<!--Dark Theme-->
<Color x:Key="Primary-Dark">#1976D2</Color>
<Color x:Key="BackgroundColor-Dark">#C0C0C0</Color>
<Color x:Key="TextColor-Dark">Black</Color>
</ResourceDictionary>
So in the theme change event you can change the assigned colours
Resources ["Primary"] = Resources ["Primary-Dark"];