We Keep Coding

Xamarin Forms Shell flyoutitem tittle color

I want to change the color of option titles and selected option how can i do that?

The default Xamarin.Forms Project template is going to put styles like FlyoutItemLabelStyle, FlyoutItemLayoutStyle and MenuItemLayoutStyle in the Shell.Resources element of AppShell.xaml. These styles, in turn, will have many references to {StaticResource Primary} which is a color defined in the Application.Resources element of App.xaml. I would start by assessing what's happening in those places. Even if you're not using the template you can study it as an example of how to achieve your outcome.
Device Themes can adversely affect these settings
What I've noticed is that Xamarin UI elements with default transparent background color may not respond dynamically if the device is, for example, changed to dark mode. (I've definitely seen white text on an effectively-white background in dark mode). So one must pay attention to what the consequences will be when the device's visual themes change. There is an especially good training on this topic by Xamarin guru James Montemagno. I would highly recommend his YouTube video on Dynamic App Themes in Xamarin.Forms - Light, Dark, & Custom Modes
For the purpose of a basic demonstration of how to modify these themes, I have hardcoded "Magenta", "Blue" and "Green" in the default xaml which produces the colors shown in the image that follows.
<Shell.Resources>
<ResourceDictionary>
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Magenta"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>

How to change color on switch?

I have 2 projects. In both I style switch. After updating VS I have problems in my new project when I add
<Switch>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="On">
<VisualState.Setters>
<Setter Property="ThumbColor"
Value="#2D78FD" />
<Setter Property="OnColor"
Value="#2D78FD" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Off">
<VisualState.Setters>
<Setter Property="ThumbColor"
Value="LightGray" />
<Setter Property="OnColor"
Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Switch>
I understand that I have problems with themes
On my phone I have Dark theme so I write
BackgroundColor="{AppThemeBinding Light=White, Dark=White}"
And then I have white BackgroundColor and have problems with the switch
enter image description here
If I don`t write
BackgroundColor="{AppThemeBinding Light=White, Dark=White}"
enter image description here
Why my OnColor does not work at white BackgroundColor when it turns off(I tried other colors and only ThumbColor change color)

Please update your Xamarin.forms version to the latest 4.8.0.1364, I test your code and it works well.

Window UWP best practice to show desired content on app start

I am currently teaching myself how to build a Windows UWP app.
My question is:
If I have an app which requires a login, how do I handle the decision if a login-form should be shown, or the actual start page of the app if the PasswordVault already has stored credentials?
Do I leave the MainPage blank and just write the logic (in the .cs-file) which decides if I navigate to the LoginPage or to the ContentPage (or whatever I will call it)?
Or is it the intention to put this logic into the App.xaml.cs?
Or is my approach totally wrong and this should be handled in a complete different way?

If you want to show hide content based on a ViewModel you could add a property to your ViewModel say IsLoggedIn
private bool isLoggedIn;
public bool IsLoggedIn
{
get { return isLoggedIn; }
set
{
isLoggedIn = value;
OnPropertyChanged("IsLoggedIn");
}
}
You could then install the WindowsStateTriggers from nuget
Once you have that installed add a reference at the top of your xaml page
xmlns:triggers="using:WindowsStateTriggers"
next using VisualStateManager you can simply show/hide content based on the IsLoggedIn property on your viewmodel. Here we target the Visibility property of the Grids
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LoginGroup">
<VisualState x:Name="LoggedIn">
<VisualState.StateTriggers>
<triggers:EqualsStateTrigger EqualTo="True" Value="{Binding Path=IsLoggedIn}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LoggedInGrid.Visibility" Value="Visible"/>
<Setter Target="LoggedOutGrid.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="LoggedOut">
<VisualState.StateTriggers>
<triggers:EqualsStateTrigger EqualTo="False" Value="{Binding Path=IsLoggedIn}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LoggedInGrid.Visibility" Value="Collapsed"/>
<Setter Target="LoggedOutGrid.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot">
<Grid x:Name="LoggedInGrid">
</Grid>
<Grid x:Name="LoggedOutGrid">
</Grid>
</Grid>
</Grid>nter code here

You could check that the credentials are stored/valid when you're loading the application and make a decision whether to navigate to your main app page or a login page from the OnLaunched event in your App.xaml.cs

You could check out the extended splashscreen sample from the sdk: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/SplashScreen

How to do different Animations on the same page but on different screen sizes?

I am making a UWP app in which in which I need to different animations for different screen sizes on the same page. I want if screen width is less than 400 this animation should play, If screen with is less than 720 other animation should play. How can I write the code for this in C#.

You can get what you want by using the StateTriggers property with an AdaptiveTrigger to create a declarative rule in XAML markup based on window size. For example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when window width is <400. -->
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Storyboard>
<Storyboard>
<!-- The animation you want to play. -->
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when window width is >=400 and <720. -->
<AdaptiveTrigger MinWindowWidth="400" />
</VisualState.StateTriggers>
<VisualState.Storyboard>
<Storyboard>
<!-- The animation you want to play. -->
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when window width is >=720. -->
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Grid>

I think you can use either the SystemParameters.Workarea or the System.Windows.Forms.WorkingArea. From either you can access the width property.
https://msdn.microsoft.com/en-us/library/system.windows.systemparameters.workarea.aspx
https://msdn.microsoft.com/en-us/library/system.windows.forms.screen.workingarea(v=vs.110).aspx

Can static resources be modified in a VisualStateManager?

I have a number of global constants for font sizes, brushes, etc. Examples:
<x:Double x:Key="SmallWindowWidth">0</x:Double>
<x:Double x:Key="CompactWindowWidth">600</x:Double>
<x:Double x:Key="MediumWindowWidth">720</x:Double>
<x:Double x:Key="WideWindowWidth">1024</x:Double>
<x:Double x:Key="SmallTitleFontSize">22</x:Double>
<x:Double x:Key="NormalFontSize">16</x:Double>
When the Window Width becomes small I would like to reduce the FontSize of some texts. Of course I could target each and every single one of them individually, but what I would rather do is globally change the {StaticResource NormalFontSize}, like this:
<VisualState x:Name="Small">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource SmallWindowWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="{StaticResource NormalFontSize}" Value="12"/>
</VisualState.Setters>
</VisualState>
...which doesn't seem to work as it is no property. So, is there any way to change static resources in XAML (!)?

Well, You can do it with some tweaks.
Note, I have locally tested it in UWP to answer your question but I didn't use it in any of my published projects yet.
First Step,
If you need to change a resource that has dependency property, like color of solid brush.[No Wrapper needed]
If you need to change a resource that doesn't have dependency property like double value [Wrapper Needed]
public class DoubleWrapper : DependencyObject
{
public double Value
{
get { return (double)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
// Using a DependencyProperty as the backing store for Value. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(double), typeof(DoubleWrapper), new PropertyMetadata(0.0));
}
Second Step,
You need to define x:Name besides the mandatory x:Key To be able to target a static resource in visual state setter. (you can use different name for x:Name, if you want)
<Page.Resources>
<local:DoubleWrapper x:Name="FontSizeWrapper" x:Key="FontSizeWrapper" Value="12"/>
<SolidColorBrush x:Name="MainBrush" x:Key="MainBrush" Color="Red"/>
</Page.Resources>
Finally, when you change Value property of FontSizeWrapper or MainBrush in Visual state setter, it will update all bindings.
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LayoutStates">
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideState">
<VisualState.Setters>
<Setter Target="FontSizeWrapper.(DoubleWrapper.Value)" >
<Setter.Value>
<x:Double>25</x:Double>
</Setter.Value>
</Setter>
<Setter Target="MainBrush.(SolidColorBrush.Color)" Value="Aqua" />
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800"/>
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock Text="This is test" Foreground="{StaticResource MainBrush}"
VerticalAlignment="Center"
FontSize="{Binding Value, Source={StaticResource FontSizeWrapper}}"/>
</Grid>