{"id":45918,"date":"2020-01-13T09:32:10","date_gmt":"2020-01-13T17:32:10","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=45918"},"modified":"2020-01-13T09:16:28","modified_gmt":"2020-01-13T17:16:28","slug":"visual-state-manager","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/visual-state-manager\/","title":{"rendered":"Simplifying Visual State Manager with TargetName"},"content":{"rendered":"

The Visual State Manager<\/a> (VSM) has been around since Xamarin.Forms 3.0, but we’re not done developing it. One of the things we really wanted to add is the ability to change a property on any<\/em> child element within scope. Up until now, you could only set values of properties of the element you applied the VSM to. Recently a PR was merged that changes that for our new Xamarin.Forms 4.5 pre-release version. This functionality will add a lot of extra flexibility to the VSM. In this post I will tell you all about it and show you how to use it yourself.<\/p>\n

What is the Visual State Manager?<\/h2>\n

If you are not familiar with the VSM at all, let us fill you in on that a little bit first. What you can do with the help of the VSM is define certain states for your element and together with that state you can determine how that element should look. For example, think of a button that has a different color when it’s disabled or when it’s focused.<\/p>\n

The button in this example can be any Xamarin.Forms VisualElement<\/a> and the color can be any bindable property<\/a>. While Xamarin.Forms has defined a couple of states for you, you are also able to define your own custom states. Below you can see a piece of XAML that defines the look of a StackLayout<\/a> when it is in a Normal or Invalid state. When we switch to the Invalid state the background color of the StackLayout<\/code> where the VSM resides will become Azure. When we then switch back to Normal, no explicit values are defined and thus the background color will go back to its default value.<\/p>\n

<StackLayout x:Name=\"MyStackLayout\" HorizontalOptions=\"Center\" VerticalOptions=\"CenterAndExpand\">\r\n        <VisualStateManager.VisualStateGroups>\r\n                <VisualStateGroup x:Name=\"ColorStates\">\r\n                    <VisualState x:Name=\"Normal\" \/>\r\n                    <VisualState x:Name=\"Invalid\">\r\n                        <VisualState.Setters>\r\n                            <Setter Property=\"BackgroundColor\" Value=\"Azure\"\/>\r\n                        <\/VisualState.Setters>\r\n                    <\/VisualState>\r\n                <\/VisualStateGroup>\r\n            <\/VisualStateManager.VisualStateGroups>\r\n\r\n            <Label x:Name=\"WelcomeLabel\" Text=\"Welcome to Xamarin.Forms!\" HorizontalTextAlignment=\"Start\" HorizontalOptions=\"Start\" \/>\r\n\r\n            <Label x:Name=\"CurrentState\"><\/Label>\r\n\r\n            <Button x:Name=\"ToggleValidButton\" Text=\"Toggle State\" Clicked=\"ToggleValid_OnClicked\"><\/Button>\r\n    <\/StackLayout><\/pre>\n
In the case of the above example we have a simple button that toggles the state. In a more real-life example the trigger might be an invalid data entry of sorts.<\/p>\n
Setting State on Multiple Controls<\/h2>\n
If we continue on this path, you can imagine that the XAML will get very bloated, fast. If we also wanted to give the label and the button a specific style when the state becomes invalid, the XAML would start looking like below.<\/p>\n
<StackLayout x:Name=\"MyStackLayout\" HorizontalOptions=\"Center\" VerticalOptions=\"CenterAndExpand\">\r\n        <VisualStateManager.VisualStateGroups>\r\n            <VisualStateGroup x:Name=\"ColorStates\">\r\n                <VisualState x:Name=\"Normal\" \/>\r\n                <VisualState x:Name=\"Invalid\">\r\n                    <VisualState.Setters>\r\n                        <Setter Property=\"BackgroundColor\" Value=\"Azure\"\/>\r\n                    <\/VisualState.Setters>\r\n                <\/VisualState>\r\n            <\/VisualStateGroup>\r\n        <\/VisualStateManager.VisualStateGroups>\r\n\r\n        <Label x:Name=\"WelcomeLabel\" Text=\"Welcome to Xamarin.Forms!\" HorizontalTextAlignment=\"Start\" HorizontalOptions=\"Start\">\r\n            <VisualStateManager.VisualStateGroups>\r\n                <VisualStateGroup x:Name=\"ColorStates\">\r\n                    <VisualState x:Name=\"Normal\" \/>\r\n                    <VisualState x:Name=\"Invalid\">\r\n                        <VisualState.Setters>\r\n                            <Setter Property=\"TextColor\" Value=\"Red\"\/>\r\n                        <\/VisualState.Setters>\r\n                    <\/VisualState>\r\n                <\/VisualStateGroup>\r\n            <\/VisualStateManager.VisualStateGroups>\r\n        <\/Label>\r\n\r\n        <Label x:Name=\"CurrentState\"><\/Label>\r\n\r\n        <Button x:Name=\"ToggleValidButton\" Text=\"Toggle State\" Clicked=\"ToggleValid_OnClicked\">\r\n            <VisualStateManager.VisualStateGroups>\r\n                <VisualStateGroup x:Name=\"ColorStates\">\r\n                    <VisualState x:Name=\"Normal\" \/>\r\n                    <VisualState x:Name=\"Invalid\">\r\n                        <VisualState.Setters>\r\n                            <Setter Property=\"TextColor\" Value=\"Red\"\/>\r\n                        <\/VisualState.Setters>\r\n                    <\/VisualState>\r\n                <\/VisualStateGroup>\r\n            <\/VisualStateManager.VisualStateGroups>\r\n        <\/Button>\r\n    <\/StackLayout><\/pre>\n
Can you spot the problem? We will have to repeat the whole VSM part for each control that we want to have these states on. Wouldn’t it be much easier if we could just reach into child elements within the same scope and set the properties directly from one central Visual State definition?<\/p>\n
While the visual representation is in this case not particularly important, or pretty, let us show you the app when the code is running.<\/p>\n
\"Visual
Visual State Manager in Action<\/figcaption><\/figure><\/p>\n
Using TargetName with Visual State Manager<\/h2>\n
With the new functionality that is added, we can solve the above problem with significantly less XAML. And if there is one thing I love more than XAML, it’s less XAML.<\/p>\n
Let’s have another look at the above situation, but now with the help of the TargetName<\/code> we introduced on the Setter<\/code> object.<\/p>\n
<StackLayout x:Name=\"MyStackLayout\" HorizontalOptions=\"Center\" VerticalOptions=\"CenterAndExpand\">\r\n        <VisualStateManager.VisualStateGroups>\r\n            <VisualStateGroup x:Name=\"ColorStates\">\r\n                <VisualState x:Name=\"Normal\" \/>\r\n                <VisualState x:Name=\"Invalid\">\r\n                    <VisualState.Setters>\r\n                        <Setter Property=\"BackgroundColor\" Value=\"Azure\"\/>\r\n\r\n                        <!-- Added the two lines below -->\r\n                        <Setter TargetName=\"WelcomeLabel\" Property=\"Label.TextColor\" Value=\"Red\"\/>\r\n                        <Setter TargetName=\"ToggleValidButton\" Property=\"Button.TextColor\" Value=\"Red\"\/>\r\n                        <!-- Look here! Added the two lines above -->\r\n\r\n                    <\/VisualState.Setters>\r\n                <\/VisualState>\r\n            <\/VisualStateGroup>\r\n        <\/VisualStateManager.VisualStateGroups>\r\n\r\n        <Label x:Name=\"WelcomeLabel\" Text=\"Welcome to Xamarin.Forms!\" HorizontalTextAlignment=\"Start\" HorizontalOptions=\"Start\" \/>\r\n\r\n        <Label x:Name=\"CurrentState\"><\/Label>\r\n\r\n        <Button x:Name=\"ToggleValidButton\" Text=\"Toggle State\" Clicked=\"ToggleValid_OnClicked\"><\/Button>\r\n    <\/StackLayout><\/pre>\n
Notice how I have now just added two lines in the VisualState.Setters<\/code> collection. With the new TargetName<\/code> property I am able to reference other elements by its name. Instead of having to repeat the whole visual state XAML, I can now just add these two lines to directly. That way, I can access the elements I want to change some properties on. Note that when you use it like this, you will have to specify the full path to the property in the Property<\/code> attribute. For example, if you want to set the TextColor<\/code> on a Label<\/code>, you will have to specify it as Label.TextColor<\/code>. The implementation at this time only works for bindable properties.<\/p>\n
Learn More<\/h2>\n
When you want to read more on the Visual State Manager, head over to the documentation pages<\/a>. Code from this post can be found at this sample repository<\/a>, use it to give it a try yourself. If you are interested in the actual PR, you can have a look here<\/a>. And of course, a big thank you to the original author that did most of the work for this.<\/p>\n
Besides this change there is a lot of other (upcoming) awesome stuff in the 4.5 release of Xamarin.Forms. Do you have more ideas on how to improve the VSM itself? Please don’t hesitate to open an issue<\/a> and let us know!<\/p>\n","protected":false},"excerpt":{"rendered":"
The Visual State Manager (VSM) can now change a property on any child element within scope for our new Xamarin.Forms 4.5 pre-release version.<\/p>\n","protected":false},"author":13350,"featured_media":45913,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[313,2,303,6602,367],"tags":[5,6,7553,7552,7551,16,5841],"class_list":["post-45918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-developers","category-ios","category-visual-studio","category-xamarin-forms","tag-android","tag-ios","tag-targetname","tag-visual-state-manager","tag-vsm","tag-xamarin-forms","tag-xaml"],"acf":[],"blog_post_summary":"
The Visual State Manager (VSM) can now change a property on any child element within scope for our new Xamarin.Forms 4.5 pre-release version.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/13350"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=45918"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45918\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/45913"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=45918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=45918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=45918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}