Style Control States with Visual State Manager in Xamarin.Forms

With the Visual State Manager in Xamarin.Forms you can very easily style your controls depending on the state they are in. In this video we will learn what the Visual State Manager is, how to use it and more importantly; how to implement it. We will see a sample implementation on an Entry, but also a bit more advanced scenario with CollectionView and Styles. A lot to take in here, so take your time...

💝 Join this channel to get access to perks:

🔗 Links

⏱ Timestamps
0:00 Intro
1:00 Sample App Outline
2:16 Implement Sample UI (Simple Entry Example)
2:49 Implement Visual State Manager
6:18 See Working Sample
7:16 Visual State Manager and CollectionView
11:40 Declare Styles in Your Resources
13:22 Pitfall! Learn From My Mistake
14:18 Working Sample CollectionView SelectedItem Color
14:27 Using TargetName with VisualStateManager to Update Multiple Controls
16:28 Working Sample of TargetName
17:33 Outro

🙋‍♂️ Also find my...

[aboubacar.traore]

Great video as always, more details on visual state would be very appreciated.

[Orgbrat]

I would like to see you do a video on using Control Templates in Xamarin.Forms 5.0. Maybe with a RadioButton control by adding an image with a label under it.

[Shahan]

I have a question: target type stacklayout effect only on collectionview or effect to all wherever have stacklayout in the contentpage?

[jamalfazeli]

How can I eliminate background (use transparent) when I press the element in collection view?

[LobsterHarry]

@Gerald: I kind of outsourced my ItemTemplates for my CollectionsView with an ItemTemplateSelector and store each Template in an own XAML-File. With this approach the "Selected"-State seems not to be working ! When I put the Template back in my "Main"-XAML-File it works fine. (I put the Style in my App.XAML). Is there a Solution for it ? I need plenty of Templates to fit all the different requirements of my Clients due to Device and Age of the Users (everybody seems to be nearly blind...) and to hold them all in one File is a little bit confusing.

[jamalfazeli]

Is it possible to use shimmer package in collection view?

[kevinhermawan]

how i do render an icon inside collection view? im using font awesome 5, i dont knot where to set OnPlatform or something

[LobsterHarry]

Another question on that matter: Is it possible to have Styles for CustomControls ?

I tried in the App.XAML-Header:

and then

<Style TargetType="{x:Type
<Setter Property="CaptionTextColor" Value="Red"/>
</Style>

But that must be wrong because now my Page ist not opening anymore... Any thoughts ?

[treasurenkonyana]

Hi Gerald, thanks for the video man. I'm trying to implement this with a button. I have a collection view with buttons. Is there something else I need to add to get it to work?

[marlonmartina]

Hi Gerald, nice video! I'm using a collectionview with a Frame inside. I've followed each step in this tutorial and everything works as fine. But when i add a TapGestureRecognizer to the frame in my collectionview, then the visual state stops working. Are you familiar with this? i've checked the open issues on the Git repository, but couldn't find an issue relative to this one.

[maxchu]

I am having a problem right now.
I have a CollectionView that have Items with different kinds of status, Example: Active/Suspended/Deleted. Each with different background color White/Red/Gray respectively.
I would like to change the background color of each item when selected to a darker color but similar with its status color. If i uses VisualStateManager, It will only change to 1 specific color. How do i set multiple color based on the status of each item?

[solvedplus]

many thanks
This was very cool,
but how can we animate these visual state as we do in WPF?

[Asteria]

Wow, thank you for this video.
Saved me more than once. :)

[hgfdjwkuhx]

How can I know all the states for an element ?
and how can do new state for specific element?

[argonjs]

That is a really great tutorial as always. I have one question regarding the collection view. Collectioview initially gets a height more than its items list length. I have done a search for a fix but none of them actually not a good solution. What we can do about that length issue

[_samirdahal]

HI Gerald! Can you make a video on How to properly terminate the application programmatically? If possible both android and ios app

[maxchu]

Hi. Can you do a video about State Triggers in VisualStateManager?

[LobsterHarry]

Thank you very much, that was exactly what I was looking for ! I learned something new today. The thing with the "TargetName" is maybe not so practical, because I have to name all my Labels individually. A "TargetType" = "Label" to hit all the Labels inside my StackLayout would be nicer. But you can have it all, right (or can you ?). Btw: the Link to the Github-Repository is not working !

[AMIRKHAN-dmfm]

Please make tutorial for PDF download its urgent.