{"id":42627,"date":"2022-10-04T12:15:00","date_gmt":"2022-10-04T19:15:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=42627"},"modified":"2022-10-04T11:47:06","modified_gmt":"2022-10-04T18:47:06","slug":"announcing-the-dotnet-maui-community-toolkit-v13","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/announcing-the-dotnet-maui-community-toolkit-v13\/","title":{"rendered":"Announcing the .NET MAUI Community Toolkit v1.3"},"content":{"rendered":"<p>We are happy to announce the release of the <a href=\"https:\/\/github.com\/CommunityToolkit\/Maui\/releases\/tag\/1.3.0\">.NET MAUI Community Toolkit v1.3<\/a>, which is now live on NuGet! This release includes status bar styling functionality, Gravatar image support, prebuilt fade animations, SourceLink support, and numerous bug fixes.<\/p>\n<p>The .NET MAUI Community Toolkit is a community-created library that contains .NET MAUI Extensions, Advanced UI\/UX Controls, and Behaviors to help make your life as a .NET MAUI developer easier.<\/p>\n<h2>Status Bar Styling<\/h2>\n<p>With this release of the .NET MAUI Community Toolkit you now get <code>StatusBarBehavior<\/code>, which allows you to easily customize the color and style of the status bar on iOS and Android either through code or in XAML. It is implemented as a <code>Behavior<\/code> meaning you can change it per page or even dynamically in response to user actions or application status.<\/p>\n<p>There are two properties which you can use to control the look of the status bar:<\/p>\n<ul>\n<li><code>StatusBarColor<\/code>: allows you to specify the color of the status bar background.<\/li>\n<li><code>StatusBarStyle<\/code>: allows you to control if the content (text and icons) on the status bar are light, dark or the system default.<\/li>\n<\/ul>\n<blockquote>\n<p><strong>Note:<\/strong> These two properties are Bindable, so you can also bind these values from your ViewModels.<\/p>\n<\/blockquote>\n<p>Here is an example of how to use these properties in XAML:<\/p>\n<pre><code class=\"language-xaml\">&lt;Page.Behaviors&gt;\r\n    &lt;toolkit:StatusBarBehavior StatusBarColor=\"HotPink\" StatusBarStyle=\"LightContent\"\/&gt;\r\n&lt;\/Page.Behaviors&gt;<\/code><\/pre>\n<p>Or, if you prefer writing your UI&#8217;s in C# code:<\/p>\n<pre><code class=\"language-csharp\">var statusBehavior = new StatusBarBehavior()\r\n{\r\n    StatusBarColor = Colors.HotPink,\r\n    StatusBarStyle = StatusBarStyle.LightContent\r\n}\r\nthis.Behaviors.Add(statusBehavior);<\/code><\/pre>\n<p>And now, with just a couple of lines of code, you have a beautifully styled status bar that can match the theme of your application.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/10\/statusbarbehavior.png\" alt=\"Status Bar Behavior\" \/><\/p>\n<p>You can read more about the other features of <code>StatusBarBehavior<\/code> and see more examples <a href=\"https:\/\/learn.microsoft.com\/dotnet\/communitytoolkit\/maui\/behaviors\/statusbar-behavior?tabs=ios\">in our docs<\/a>. Gerald Versluis has also put together <a href=\"https:\/\/www.youtube.com\/watch?v=dWj0PdImH10\">a great video<\/a> demonstrating how to get started.<\/p>\n<h2>Gravatar Image Source<\/h2>\n<p>A Gravatar (globally recognized avatar) is an image that can be used as your avatar \u2014 that is, an image that represents you or your users, such as in a forum post or a blog comment. You can learn more about Gravatar or register your own at the <a href=\"https:\/\/www.gravatar.com\/\">Gravatar website.<\/a><\/p>\n<p>With this release of the .NET MAUI Community Toolkit you can easily display Gravatar images next to people&#8217;s names or email addresses via the <code>GravatarImageSource<\/code>.<\/p>\n<p>You can use <code>GravatarImageSource<\/code> anywhere you would normally use an <code>ImageSource<\/code>, for example:<\/p>\n<pre><code class=\"language-xaml\">&lt;Image&gt;\r\n    &lt;Image.Source&gt;\r\n        &lt;toolkit:GravatarImageSource Email=\"youremail@here.com\" \/&gt;\r\n    &lt;\/Image.Source&gt;\r\n&lt;\/Image&gt;<\/code><\/pre>\n<p>The <code>Email<\/code> property specifies the Gravatar account email address. However, there are also properties to determine the default image if the <code>Email<\/code> is not found on Gravatar as well as inbuilt caching capabilities. All these properties are backed by <code>BindableProperty<\/code> which means they can be targets for data binding and styled.<\/p>\n<p>Read more about the other features of <code>GravatarImageSource<\/code> and see more examples <a href=\"https:\/\/learn.microsoft.com\/dotnet\/communitytoolkit\/maui\/imagesources\/gravatarimagesource\">in our docs<\/a>.<\/p>\n<h2>Animations<\/h2>\n<p>This release of the .NET MAUI Community Toolkit enhances the existing <code>AnimationBehavior<\/code> capabilities by introducing the <code>FadeAnimation<\/code> to provide the ability to animate the opacity of a <code>VisualElement<\/code> from its original opacity to a specified new opacity and then back to the original.<\/p>\n<p>This allows you to specify animations in XAML that respond to user interactions.<\/p>\n<pre><code class=\"language-xaml\">&lt;Button Text=\"Click this Button\"&gt;\r\n    &lt;Button.Behaviors&gt;\r\n        &lt;toolkit:AnimationBehavior EventName=\"Clicked\"&gt;\r\n            &lt;toolkit:AnimationBehavior.AnimationType&gt;\r\n                &lt;toolkit:FadeAnimation Opacity=\"0.2\"\/&gt;\r\n            &lt;\/toolkit:AnimationBehavior.AnimationType&gt;\r\n        &lt;\/toolkit:AnimationBehavior&gt;\r\n    &lt;\/Button.Behaviors&gt;\r\n&lt;\/Button&gt;\r\n<\/code><\/pre>\n<p>In future releases, we will be building on the animations to provide Flip, Rotate, Scale and Shake animations. Contributions are always welcome, so if you are keen to help, see the contributing section below to find out how.<\/p>\n<h2>Source Link<\/h2>\n<p>Source Link is a technology that providing first-class source debugging experiences for binaries.  With this release we have configured our builds to use Source Link, which means if you have Source Link enabled in Visual Studio you can expect an even better debugging experience whilst using the .NET MAUI Community Toolkit. You can find more information about Source Link and how to enable it in <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/improving-debug-time-productivity-with-source-link\/\">this blog post.<\/a><\/p>\n<h2>Other Fixes<\/h2>\n<p>This release also includes numerous bug fixes and code quality improvements. Check out the <a href=\"https:\/\/github.com\/CommunityToolkit\/Maui\/releases\/tag\/1.3.0\">release notes<\/a> for a complete list of changes.<\/p>\n<h2>Contributing<\/h2>\n<p>The .NET MAUI Community Toolkit really is a community effort powered by your contributions. If you would like to contribute, feel free to open issues or let us know about your experience! You can also check out our previous post about <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/contributing-to-net-maui-community-toolkit\/\">Contributing to .NET MAUI Community Toolkit.<\/a><\/p>\n<h2>Summary<\/h2>\n<p>We hope you enjoy the latest release of .NET MAUI Community toolkit. You can find all source code and sample app in our <a href=\"https:\/\/github.com\/CommunityToolkit\/Maui\">GitHub repo<\/a> and browse the <a href=\"https:\/\/learn.microsoft.com\/dotnet\/communitytoolkit\/maui\/\">official documentation<\/a>.<\/p>\n<p>A massive thank you to all the contributors and don&#8217;t forget you can join us live on the 1st Thursday of each month @ 1200 PT, where we live-stream our standups on the <a href=\"https:\/\/www.youtube.com\/channel\/UCiaZbznpWV1o-KLxj8zqR6A\">.NET Foundation YouTube Channel<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>.NET MAUI Community Toolkit v1.3 is now available! Check out what&#8217;s new in this update.<\/p>\n","protected":false},"author":101745,"featured_media":42628,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[685,7233],"tags":[7655,7654,7243],"class_list":["post-42627","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","category-maui","tag-net-maui-community-toolkit","tag-community-toolkit","tag-toolkit"],"acf":[],"blog_post_summary":"<p>.NET MAUI Community Toolkit v1.3 is now available! Check out what&#8217;s new in this update.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/42627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/101745"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=42627"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/42627\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/42628"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=42627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=42627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=42627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}