We Keep Coding

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.

Setter.Target give me an error with "RelativePanel.AlignHorizontalCenterWithPanel"

I am develop an UWP app, and I am using Template10.
I have an TextBlock, that in VisualStateNarrow I want it RelativePanel.AlignVerticalCenterWithPanel="True" and in NormalMinWidth I want RelativePanel.AlignHorizontalCenterWithPanel="True" but I can not do this!
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveVisualStateGroup">
<VisualState x:Name="VisualStateNarrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TextBlock.RelativePanel.AlignVerticalCenterWithPanel="True"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateNormal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TextBlock.RelativePanel.AlignHorizontalCenterWithPanel="True"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateWide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
In XAML editor give me this error: "An Exception was thrown." - "Cannot resolve TargetProperty RelativePanel.AlignHorizontalCenterWithPanel on specified object."
I have many Setter.Target and they all work!
Example of my Setter.Target:
<Setter Target="TextBlock.Margin" Value="8"/>
<Setter Target="TextBlock.Width" Value="200"/>
<Setter Target="TextBlock.Height" Value="200"/>

Here is a way to create setters for adaptive triggers without writing a single line of code. Since VS provides neither IntelliSense nor error warning for writting them, this helps prevent bugs that are hard to diagnose.
Go to the States panel, click to activate the visual state that you want to add setters to. A red dot will apear next to the name of this visual state.
Once it's activated, go to the Objects and Timeline panel and select the element that you want to interact within this state. In your case, select the TextBlock element.
Go to the Properties panel, either expand the RelativePanel section or search for "relative" in the search box, once the properties come up, simply select the ones you want to change.
That's all! Feel free to check out the gif demo below too.

For attached properties you have to add brackets to in setters as follows:
Element.(Grid.Row)
Element.(ToolTipService.ToolTip)
So your code will look like this:
<Setter Target="TextBlock.(RelativePanel.AlignVerticalCenterWithPane‌​l)" Value="True" />

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

Long List Selector with item tap animation

I am working on Windows Phone 8, i have long list selector with few items in it.When i tap on the items i need to add some animation to it like, move the text in and come back.How to achieve this? i am trying to apply the same to list box as well.
I have tried this :
<Style x:Key="LongListSelectorStyle1" TargetType="phone:LongListSelector">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<UserControl>
<Border x:Name="MyBorder" Background="Transparent">
<VisualStateManager.VisualStateGroups >
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="#000000"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</UserControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
But its not working.
Below is the sample screenshot
How can i achieve this ?

I would try using the WPToolkit, in which there is the option where you can apply a 'tilt' animation when an item in your ListBox or LongListSelector is pressed. Very cool. First you need to get the toolkit via NuGet in Visual Studio https://www.nuget.org/packages/WPtoolkit/4.2013.8.16 (a link to the site but you add it using the Package Manager Console within Visual Studio itself and it sets everything up automatically). Check this link http://www.davidsalter.com/2013/09/using-windows-phone-toolkit-in-wp8.html and once you have it, Within the tag wher eyou declared the ListBox or LongListSelector itself, insert the following
`<ListBox ... toolkit:TiltEffect.IsTiltEnabled="True" ../>
This should work.

Set the color of a BorderBrush with a trigger

I am having some difficulty getting the syntax worked out correctly in a ControlTemplate. Here's is the basics of it:
<ControlTemplate TargetType="{x:Type foo:bar">
<Border Name="Bd">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource DefaultBorderBrushLightBrush}" />
</Border.BorderBrush>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="(Border.BorderBrush).(SolidColorBrush.Color)"
TargetName="Bd"
Value="{DynamicResource PressedBorderDarkColor}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate
This yields the error msg
Cannot resolve the Template Property 'Color)'. Verify that the owning type is the Style's TargetType, or use Class.Property syntax to specify the property.
That seems clear enough - I'm not correctly specifying the target property. I've tried it a couple of different ways. Specifically, I've tried
<Setter Property="BorderBrush" TargetName="Bd">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource PressedBorderDarkColor}" />
</Setter.Value>
</Setter>
... and this does build and, I suppose, gives me what I was looking for.
Still, why can't I set the brush color? How would I specify it?
More broadly, where can I learn more about this "Class.Property syntax"? I read through MSDN's XAML Syntax In Detail but if it's covered there I fear I overlooked it.

You can't set the brush color simply because it's not a property of the target Border object Bd, that target object has the property BorderBrush instead, the color however is a property of the object SolidColorBrush which is affected to the BorderBrush property. the syntax (Border.BorderBrush).(SolidColorBrush.Color) is used for example when you have to specify the attached property TargetProperty of a StoryBoard for example in animations :
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

This means that when the Style/ControlTemplate set TargetType, for example - Border, is a property that is indicated in:
<Style x:Key="TestStyle" TargetType="{x:Type Border}>
<Setter Property="BorderBrush" Value="Green" />
automatically converted to:
<Setter Property="Border.BorderBrush" Value="Green" />
Class.Property syntax used when clearly in the Style is not specified TargetType:
<Style x:Key="TestStyle">
<Setter Property="Border.BorderBrush" Value="Red" />
In styles can be followed both ways, design type like:
(Border.BorderBrush).(SolidColorBrush.Color)
commonly used in Storyboard's.