{"id":47099,"date":"2020-04-29T12:29:41","date_gmt":"2020-04-29T19:29:41","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=47099"},"modified":"2020-04-29T12:34:11","modified_gmt":"2020-04-29T19:34:11","slug":"xamarin-forms-4-6","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-4-6\/","title":{"rendered":"Xamarin.Forms 4.6: Material Components, Shell, and the Future"},"content":{"rendered":"

Today, we are shipping Xamarin.Forms 4.6 with a host of quality improvements, including several new feature previews. With more controls available \u201cin the box\u201d than ever before, it has never been easier to quickly build quality mobile apps.<\/p>\n

Visual and Material Design<\/h2>\n

In 3.6, we introduced Visual<\/a>. A simple API for quickly swapping out the default control renderers. To help you achieve a consistent look-and-feel between iOS, we also shipped the Material Design controls<\/a> from Google to match the default Android experience.<\/p>\n

\"Image<\/p>\n

Now in 4.6, we are updating the bindings to Google\u2019s library. We have improved the styling support for things like, setting a button\u2019s ‘Disabled’ text color. The latest library also removes the reference to Apple\u2019s deprecated UIWebView<\/a>.<\/p>\n

Shell Fly-out Styling<\/h2>\n

Shell<\/a> vastly simplifies standing up your application menu structure. Whether using tabbed navigation<\/a> or a Fly-out menu<\/a>. To make styling easier, the fly-out item templates<\/a> have exposed both style classes. As well as element names to implement your designs on the icon, text, and container.<\/p>\n\n\n\n\n\n\n
Flyout Item Part<\/strong><\/td>\nStyle Class Name<\/strong><\/td>\nElement Name<\/strong><\/td>\n<\/tr>\n
Text<\/strong><\/td>\nFlyoutItemLabelStyle<\/td>\nFlyoutItemLabel<\/td>\n<\/tr>\n
Icon<\/strong><\/td>\nFlyoutItemIconStyle<\/td>\nFlyoutItemIcon<\/td>\n<\/tr>\n
Container<\/strong><\/td>\nFlyoutItemLayoutStyle<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\"Image<\/p>\n

Take advantage of the VisualStateManager<\/a> to style each state of the fly-out item template.<\/p>\n

<Style\r\n            TargetType=\"Layout\"\r\n            ApplyToDerivedTypes=\"True\"\r\n            Class=\"FlyoutItemLayoutStyle\">\r\n            <Setter\r\n                Property=\"HeightRequest\"\r\n                Value=\"44\" \/>\r\n            <Setter\r\n                TargetName=\"FlyoutItemLabel\"\r\n                Property=\"Label.FontSize\"\r\n                Value=\"16\" \/>\r\n            <Setter\r\n                TargetName=\"FlyoutItemLabel\"\r\n                Property=\"Label.TextColor\"\r\n                Value=\"{StaticResource TextOnLightColor}\" \/>\r\n            <Setter\r\n                TargetName=\"FlyoutItemLabel\"\r\n                Property=\"Label.HeightRequest\"\r\n                Value=\"44\" \/>\r\n            <Setter\r\n                Property=\"VisualStateManager.VisualStateGroups\">\r\n                <VisualStateGroupList>\r\n                    <VisualStateGroup\r\n                        x:Name=\"CommonStates\">\r\n                        <VisualState\r\n                            x:Name=\"Normal\">\r\n                            <VisualState.Setters>\r\n                            <\/VisualState.Setters>\r\n                        <\/VisualState>\r\n                        <VisualState\r\n                            x:Name=\"Selected\">\r\n                            <VisualState.Setters>\r\n                                <Setter\r\n                                    Property=\"BackgroundColor\"\r\n                                    Value=\"#FF3300\" \/>\r\n                                <Setter\r\n                                    TargetName=\"FlyoutItemLabel\"\r\n                                    Property=\"Label.TextColor\"\r\n                                    Value=\"White\" \/>\r\n                            <\/VisualState.Setters>\r\n                        <\/VisualState>\r\n                    <\/VisualStateGroup>\r\n                <\/VisualStateGroupList>\r\n            <\/Setter>\r\n        <\/Style><\/pre>\n
 <\/p>\n
Provide your own template design. Then combine that with these new capabilities for even more customization.<\/p>\n
Navigating Back<\/h2>\n
Often the native platform provides a back button to return to the previous page. However, in some cases (such as modal navigation), it is not clear what the previous route was. In Xamarin.Forms 4.6, use a simple shortcut to jump back to the last navigation state of your application. Do this by using the URI \u201c..\u201d. Consider the below flight results page that is opened from several places within the app:<\/p>\n\n\n\n
\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
public class TodayViewModel : BaseViewModel\r\n{\r\n    public Command FindLocationsCommand { get; set; }\r\n\r\n    public DateTime HomeUntilDate { get; set; } = DateTime.Today;\r\n\r\n    public TodayViewModel()\r\n    {\r\n        FindLocationsCommand = new Command(FindLocations);\r\n    }\r\n\r\n    private async void FindLocations()\r\n    {\r\n        await Shell.Current.GoToAsync($\"results?start={HomeUntilDate.ToString(\"yyyyMMddHHmmss\")}\");\r\n    }\r\n}<\/pre>\n
In order to go back, provide your own close or cancel button that calls this navigation:<\/p>\n
await Shell.Current.GoToAsync(\"..\");<\/pre>\n
Just like that! The navigation rewinds a step to where you just were. All still using the same convenient URI navigation provided by Shell.<\/p>\n
The Future: Preview Features<\/h2>\n
We are shipping fast and often to tighten the feedback loop with you. Also to make sure we are delivering the most impactful features. One way we do this is by shipping new features under an Experimental Flag. All while we are finalizing the API. This helps us to merge valuable community contributions faster, and then polish them within the product. To get started with these features, add the following flag(s) to your App.xaml.cs constructor:<\/p>\n
Device.SetFlags(new[] {\r\n    \"RadioButton_Experimental\",\r\n    \"AppTheme_Experimental\",\r\n    \"Markup_Experimental\",\r\n    \"Expander_Experimental\"\r\n} );<\/pre>\n
RadioButton<\/h3>\n
Thanks to the original work from Andrei Nitescu<\/a> later completed by Gerald Versluis<\/a>, we are introducing the new RadioButton control. As an experimental control, the work to finalize the API is ongoing. Although, you can start taking advantage of it today! To group radios together, just add a GroupName:<\/p>\n
<StackLayout>\r\n    <RadioButton GroupName=\"Size\" Text=\"Small\" \/>\r\n    <RadioButton GroupName=\"Size\" Text=\"Medium\"\/>\r\n    <RadioButton GroupName=\"Size\" Text=\"Large\"\/>\r\n<\/StackLayout><\/pre>\n
To retrieve the selected value, subscribe to the CheckedChanged<\/strong> event:<\/p>\n
void RadioButton_CheckedChanged(object sender, EventArgs e)\r\n{\r\n    RadioButton rb = sender as RadioButton;\r\n    if(rb.IsChecked)\r\n        Debug.WriteLine($\"You chose: {rb.GroupName} : {rb.Text}\");\r\n}<\/pre>\n
Expander<\/h3>\n
Andrei Misiukevich<\/a> has contributed a container control that hides\/reveals content, aptly named Expander. The API for this control follows the WPF predecessor and is easy to use:<\/p>\n
<Expander FlexLayout.Basis=\"100%\" Margin=\"0,0,0,10\">\r\n    <Expander.Header>\r\n        <StackLayout Orientation=\"Horizontal\" Margin=\"0,0,0,6\">\r\n        <Image Source=\"{StaticResource IconTodaySm}\">\r\n\r\n        <\/Image>\r\n        <Label Text=\"Next Flight: STL to MAUI (5\/19\/2020)\"\r\n                TextColor=\"White\"\r\n                FontSize=\"14\"\/>\r\n            <\/StackLayout>\r\n    <\/Expander.Header>\r\n                        \r\n    <Grid>\r\n        <Grid.ColumnDefinitions>\r\n            <ColumnDefinition Width=\"14\"\/>\r\n            <ColumnDefinition Width=\"*\"\/>\r\n        <\/Grid.ColumnDefinitions>\r\n\r\n        <BoxView\r\n            Grid.RowSpan=\"6\"\r\n            WidthRequest=\"4\" BackgroundColor=\"White\"\r\n                    VerticalOptions=\"Fill\"\r\n                    HorizontalOptions=\"Center\"\/>\r\n        <Label\r\n            Grid.Row=\"0\"\r\n            Grid.Column=\"1\"\r\n            Text=\"11:20 AM - Depart STL\"\/>\r\n        <Label\r\n            Grid.Row=\"1\"\r\n            Grid.Column=\"1\"\r\n            Text=\"4:05 PM - Arrive SFO\"\/>\r\n        <Label\r\n            Grid.Row=\"2\"\r\n            Grid.Column=\"1\"\r\n            Text=\"4:45 PM - Depart SFO\"\/>\r\n        <Label\r\n            Grid.Row=\"3\"\r\n            Grid.Column=\"1\"\r\n            Text=\"10:30 PM - Arrive HNL\"\/>\r\n        <Label\r\n            Grid.Row=\"4\"\r\n            Grid.Column=\"1\"\r\n            Text=\"11:00 PM - Depart HNL\"\/>\r\n        <Label\r\n            Grid.Row=\"5\"\r\n            Grid.Column=\"1\"\r\n            Text=\"11:45 PM - Arrive OGG\"\/>\r\n    <\/Grid>\r\n\r\n<\/Expander><\/pre>\n
 <\/p>\n
\"Image<\/p>\n
C# UI Extensions<\/h3>\n
The popular CSharpForMarkup<\/a> method extensions from Vincent Hoogendoorn<\/a> are also now part of Xamarin.Forms 4.6. While XAML is much beloved, it is not for everyone. Certainly not the only way to write your UI. C# UI extensions enable you to write your UI using a fluent syntax. Couple this with a C# hot reload, such as LiveSharp<\/a>, or Andrei Misiukevich\u2019s Hot Reload<\/a>, to have a very productive experience. Below is an example layout using a few of these new extensions, such as Rows.Define(), Row(), Center(), Margins(), and Bind():<\/p>\n
public class BagTrackerPage : ContentPage\r\n{\r\n    Color BgClr = Color.FromHex(\"#FFFFFF\");\r\n\r\n    Style<Label> LabelStyle = new Style<Label>(\r\n        (Label.TextColorProperty, Color.White)\r\n    );\r\n    private BagTrackerViewModel _vm;\r\n\r\n    public BagTrackerPage() => Build();\r\n\r\n    void Build()\r\n    {\r\n        BindingContext = _vm = new BagTrackerViewModel();\r\n\r\n        Style<Frame> FrameStyle = new Style<Frame>(\r\n            (Frame.HasShadowProperty, true),\r\n            (Frame.BorderColorProperty, Color.FromHex(\"#333333\"))\r\n                \r\n        );\r\n\r\n        Style<Entry> EntryStyle = new Style<Entry>(\r\n            (Entry.BackgroundColorProperty, Color.Transparent)\r\n        );\r\n\r\n        Resources = new ResourceDictionary();\r\n        Resources.Add(LabelStyle);\r\n        Resources.Add(FrameStyle);\r\n        Resources.Add(EntryStyle);\r\n\r\n        Title = \"Track Your Bags\";\r\n\r\n        Content = new Grid()\r\n        {\r\n            RowDefinitions = Rows.Define(\r\n                            (Row.Title, 44),\r\n                            (Row.Content, Star),\r\n                            (Row.Push, Star)\r\n                        ),\r\n            RowSpacing = 0,\r\n            Padding = new Thickness(30),\r\n            BackgroundColor = Color.White,\r\n            Children = {\r\n                new Label\r\n                            {\r\n                                Text = \"Search by\",\r\n                                FontSize = 24,\r\n                                TextColor = Color.FromHex(\"#333333\")\r\n                            }\r\n                .Row(Row.Title),\r\n                    \r\n                                \r\n                            new Frame\r\n                            {\r\n                                CornerRadius = 0,\r\n                                Padding = 12,\r\n                                Content = new StackLayout\r\n                                {\r\n                                    Spacing = 12,\r\n                                    Children =\r\n                                    {\r\n                                        new Entry\r\n                                        {\r\n                                            Placeholder = \"Bag Tag #\"\r\n                                        },\r\n                                        new Entry\r\n                                        {\r\n                                            Placeholder = \"File Reference #\"\r\n                                        },\r\n                                        new Entry\r\n                                        {\r\n                                            Placeholder = \"Last Name\"\r\n                                        },\r\n                                        new Button\r\n                                        {\r\n                                            Text = \"SEARCH\",\r\n                                            HeightRequest = 66,\r\n                                            StyleClass = new string[] {\"actionButton\" },\r\n                                            CornerRadius = 0,\r\n                                            FontSize = 18\r\n                                        }\r\n                                        .Margins(top: 20)\r\n                                        .Bind(nameof(_vm.SearchCommand))\r\n\r\n                                    }\r\n                                }\r\n                            }.Row(Row.Content), \/\/ Frame\r\n                            new Image\r\n                            {\r\n                                Source = new FontImageSource\r\n                                {\r\n                                    FontFamily = (OnPlatform<string>)Application.Current.Resources[\"FontAwesome\"],\r\n                                    Glyph = IconFont.Suitcase,\r\n                                    Size = 88,\r\n                                    Color = Color.LightGray\r\n                                }\r\n                            }\r\n                            .Center()\r\n                            .Row(Row.Push)\r\n                            \r\n                        \r\n                }\r\n        };\r\n    } \/\/ Build\r\n\r\n    enum Row { Title, Content, Push }\r\n}<\/pre>\n
\"Image<\/p>\n
For more information, check out the complete documentation by Vincent<\/a>.<\/p>\n
Font Embedding<\/h3>\n
In 4.5, we introduced font embedding<\/a>, adding fonts to your cross-platform applications. Now in 4.6, we have improved the implementation to handle fonts more consistently. Including added FontImageSource support. To get started, add a font to your library project as an embedded resource. Then, add an assembly tag reference (like below) to inform the compiler about the font. This can be done in the AssemblyInfo.cs, or in any used *.cs file.<\/p>\n
[assembly: ExportFont(\"fa-solid-900.ttf\")]<\/pre>\n
Reference the font by file name or static resource:<\/p>\n
<OnPlatform x:Key=\"FontAwesome\"\r\n            Default=\"fa-solid-900.ttf\"\r\n            x:TypeArguments=\"x:String\"\/>\r\n\r\n<FontImageSource x:Key=\"IconTabBook\" \r\n                FontFamily=\"{StaticResource FontAwesome}\"\r\n                Glyph=\"{x:Static local:IconFont.TicketAlt}\"\r\n                Size=\"{StaticResource SizeTabIcon}\"\r\n                Color=\"{StaticResource ColorTabIcon}\" \/><\/pre>\n
 <\/p>\n
See It In Action<\/h2>\n
Watch James Montemagno<\/a> on The Xamarin Show<\/a> to see it in action!\n