change barcolor Flyout xamarin xaml - xaml

somebody knows how to change the bar color, that I point out in the image
bar flyout

If you want to change the background color of Navigation Bar in shell , we could set the style of Shell navigation bar in Resource Dictionary .
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="Red" /> // set navigation bar color here
<Setter Property="Shell.ForegroundColor" Value="Blue" />
<Setter Property="Shell.TitleColor" Value="Blue" />
<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="TabBar" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>

For NavigationPage (I assume your detail page is composed of a NavigationPage and inside your HomePage or CurrentNavigatedPageFromMenu, here is a simple style :
<Style x:Key="NavigationPageStyle" TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="Red" />
<Setter Property="BarTextColor" Value="White" />
</Style>
<Style BasedOn="{StaticResource NavigationPageStyle}" TargetType="NavigationPage" />
I separate them to allow to reuse the style on other Navigation page control I've extended.
In code behind, in the constructor of your page (can be usefull to provide a different color depend on the page you are, exemple : red for error page, green for parameter, blue for others).
((NavigationPage)Application.Current.MainPage).BarBackgroundColor = Color.Red;
((NavigationPage)Application.Current.MainPage).BarTextColor = Color.White;
You can find some usefull tips [Xamarin Forum too][1].

Related

How to change status bar colour while using xamarin shell

I'm using Xamarin Shell to display navigation drawer and some tabs.
I need to change the status bar colour. I searched many solutions but everything works when we don't go for Xamarin shell based navigation drawer.
We could set the style of Shell navigation bar in Resource Dictionary
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="Red" /> // set navigation bar color here
<Setter Property="Shell.ForegroundColor" Value="Blue" />
<Setter Property="Shell.TitleColor" Value="Blue" />
<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="TabBar" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
You can also do it in the Content Page XAML. I prefer it this way when the bar color needs to change for each page, which I do a lot.
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BaseApp.Pages.MainMenuPage"
Shell.BackgroundColor="{DynamicResource GradiantRedToOrange_End}"
Shell.ForegroundColor="White"
Shell.PresentationMode="Animated">
To change the nav bar background color
Shell.BackgroundColor="{DynamicResource GradiantRedToOrange_End}"
To change the title text and nav button color
Shell.ForegroundColor="White"

How to set colors for entire application in on place instead of doing that on every SubPage.xaml in Xamarin.Forms?

Don't ask me why, but I thought only <ContentPage> can have <ContentPage.Resources>.
So I had a bunch of color setters and what not in almost every XAML page like this:
<ContentPage.Resources>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="#000" />
<Setter Property="BarTextColor" Value="#20b8a2" />
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="#231f20" />
</Style>
<Style TargetType="Label">
<Setter Property="TextColor" Value="#f7f7f7" />
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="#f7f7f7" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#0089c1" />
<Setter Property="TextColor" Value="#f7f7f7" />
<Setter Property="CornerRadius" Value="0" />
</Style>
</ContentPage.Resources>
So how to change all main colors in one place?
So instead of having resources in every Solution/App/Views/SubPage.xaml file there is obviously an outermost XAML file in general projects root Solution/App/App.xaml where you can simply set these resources for entire application.
<Application ...>
<Application.Resources>
<Color x:Key="PrimaryColor">#20b8a2</Color> <!-- turqoise -->
<Color x:Key="SecondaryColor">#0089c1</Color> <!-- blue -->
<Color x:Key="TertiaryColor">#ef569f</Color> <!-- pink -->
<Color x:Key="ThemeExtremeColor">#000000</Color>
<Color x:Key="ThemeMainColor">#231f20</Color>
<Color x:Key="ThemeLighterColor">#333333</Color>
<Color x:Key="TextColor">#f7f7f7</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource ThemeExtremeColor}" />
<Setter Property="BarTextColor" Value="{StaticResource PrimaryColor}" />
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>
<Style TargetType="Grid">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>
<!--<Style TargetType="ListView">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>-->
<Style TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource SecondaryColor}" />
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
<Setter Property="CornerRadius" Value="0" />
</Style>
</Application.Resources>
....
</Application>
Now "{StaticResource TextColor}" can be used anywhere in XAML.

ControlTemplate Trigger

<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="6" Padding="2" BorderBrush="Black" BorderThickness="2,1">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code above is currently what I have for my text box. What do I put in the ControlTemplate.Trigger in order for my border to change from its color black to Blue or increase the Border size when it is clicked on. I have tried a few things without any luck. This includes style.Triggers and events. Please post the code that goes between the ControlTemplate.Trigger.
This assumes you want to border to be changed when you have it focused, since clicking a textbox focuses it. There is no OnClick property available, this changes the border of a textbox once you have it focused.
<Trigger Property="IsKeyboardFocusWithin"
Value="True">
<Setter Property="BorderBrush"
TargetName="Border"
Value="Blue"/>
</Trigger>
Edit:
To simply remove focus, add the following MouseDown event handler to your Window or Page:
MouseDown="Window_MouseDown"
And in your code behind:
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
Keyboard.ClearFocus();
}
This will correctly remove focus from your TextBox and thus unset the trigger to have a black bar again.

Windows Store app failed to create style BasedOn shared style

I have a windows 8.1 app.
In Project.Shared there is ResourceDictionary SharedResources.xaml with base style,
<Style x:Key="CommonLayerListItemStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP" />
<Setter Property="Foreground" Value="{StaticResource UnselectBrush}" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
in Windows Phone app is StyleResources.xaml wiht style based on this
<Style x:Key="LayerListItemStyle"
BasedOn="{StaticResource CommonLayerListItemStyle}"
TargetType="TextBlock">
<Setter Property="FontSize" Value="20" />
</Style>
same in Windows app StyleResources.xaml:
<Style x:Key="LayerListItemStyle"
BasedOn="{StaticResource CommonLayerListItemStyle}"
TargetType="TextBlock">
<Setter Property="FontSize" Value="28" />
<Setter Property="Margin" Value="42,0,0,0" />
</Style>
All styles are used in UserControl created in Shared project.
I do this to override FontSize on diffrent platforms.
I merged all dictionaries in App.xaml
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/SharedResources.xaml" />
<ResourceDictionary Source="Styles/StyleResources.xaml" />
</ResourceDictionary.MergedDictionaries>
But my app does not start with Unhandled exception
Cannot find a Resource with the Name/Key CommonLayerListItemStyle [Line: 10 Position: 37]
Why does this happens?
I had the same issue. You need to merge the SharedResources.xaml directly into StyleResources.xaml, and only reference StyleResources.xaml from App.xaml.
Here is a complete example:
http://blog.craftingbytes.com/2015/05/resource-sharing-in-windows-universal.html

Change the disabled color of a button in XAML Windows 8

I want to be able to change the background color of a button in XAML when it's disabled but I don't know what to override.
Anybody know what I need to do?
I'm create a Windows 8 store app using XAML and C# 4.5.
My current button style is as follows:
<Style x:Key="MySaveButtonStyle"
TargetType="ButtonBase">
<Setter Property="FontFamily"
Value="Segoe UI Symbol" />
<Setter Property="FontSize"
Value="36" />
<Setter Property="Content"
Value="" />
<Setter Property="Height"
Value="70" />
<Setter Property="Width"
Value="80" />
<Setter Property="BorderBrush"
Value="White" />
<Setter Property="Foreground"
Value="{StaticResource ButtonForegroudBrush}" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="Background"
Value="White" />
</Style>
Thanks is advance.
You have to override the Default ControlTemplate of the Button.
To do this: Right Click the button in Designer View - Edit Template - Edit a Copy
then Visual Studio creates the default Template for you.
In the Template Code there is a VisualStateManager Section with groups and states.
And one of them is
<VisualState x:Name="Disabled">
//Change to your demands
</VisualState>
Here you can change it to anything what you want to do when a control is Disabled.