Try the Latest Release of Xamarin.Forms 3.0!

David Ortinau

We are overjoyed to bring you our latest stable release of Xamarin.Forms, version 3.0. This is our fastest, richest release to date coupled with fantastic improvements up and down the Xamarin stack such as the latest XAML IntelliSense experience in Visual Studio 2017.

When you upgrade to 3.0 you’ll discover new layout and styling power that will improve how you build your UI including Visual State Manager, Flex Layout, Style Sheets, and Right-to-Left support just to name a few. In addition to micro-optimizations, XAML compilation has also received specific attention to show build times reduced by as much as 88% in some benchmarks.

Xamarin.Forms 3.0

Xamarin.Forms 3.0 also releases significant community contributions. This post contains a brief introduction to each feature and a list of valuable resources that will get you going quickly.

Visual State Manager

Visual State Manager is known and loved on other XAML platforms, and we’re thrilled to bring it to you in Xamarin.Forms 3.0. You can now define the various states for your layouts and controls declaratively in XAML or C# and easily update your UI. Here is a camera view that handles both portrait and landscape orientations:

To change where the capture button, the close button, and the last image button appear depending on that orientation change, use the Visual State Manager. First, define your states in your page resources:

<ContentPage.Resources>
    <Style TargetType="FlexLayout">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList x:Name="CommonStates">
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.Setters>
                            <Setter Property="Direction" Value="Column"/>
                            <Setter Property="Margin">
                                <OnPlatform x:TypeArguments="Thickness" Default="0">
                                    <On Platform="iOS" Value="0,30"/>
                                </OnPlatform>
                            </Setter>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Horizontal">
                        <VisualState.Setters>
                            <Setter Property="Direction" Value="Row"/>
                            <Setter Property="Margin">
                                <OnPlatform x:TypeArguments="Thickness" Default="0">
                                    <On Platform="iOS" Value="30,0"/>
                                </OnPlatform>
                            </Setter>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
    <Style TargetType="Image">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList x:Name="CommonStates">
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.Setters>
                            <Setter Property="AbsoluteLayout.LayoutBounds" 
                                    Value="30, 0.5, 40, 40"/>
                            <Setter Property="AbsoluteLayout.LayoutFlags" 
                                    Value="YProportional"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Horizontal">
                        <VisualState.Setters>
                            <Setter Property="AbsoluteLayout.LayoutBounds" 
                                    Value="0.5, 0.9, 40, 40"/>
                            <Setter Property="AbsoluteLayout.LayoutFlags" 
                                    Value="PositionProportional"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ContentPage.Resources>

There are two groups; one for each control that needs to be updated, for simplicity they share the same state names. To change the state in the page’s C# file, call using the following:

VisualStateManager.GoToState(Container, (width > height) ? "Horizontal" : "Portrait");
VisualStateManager.GoToState(LastImage, (width > height) ? "Horizontal" : "Portrait");

Some calculation may be required in order to determine the orientation and target that state.

For more information about how you can make the most of Visual State Manager in Xamarin.Forms:

FlexLayout

FlexLayout is a new layout inspired by the web’s Flexbox. Just as browsers can be any size, the variety of screen dimensions that your Xamarin.Forms apps can run on has grown significantly. FlexLayout promotes flat, performant, and flexible UIs. FlexLayout is ideal for handling distribution and spacing of content within your layouts. It also provides you control of the direction of your layout, the justification, and alignment among other properties.

Start using FlexLayout today by exploring these brand new resources:

StyleSheets

Cascading Style Sheets (CSS) is a natural companion to FlexLayout given their shared heritage. Using CSS to style your layouts is an optimal way to express styles in tandem with XAML. We know many of you love CSS from your experience with web technologies and we also recognize XAML developers love to express their styles in XAML. We are so excited to bring both of these productivity options to you! Use what makes you most productive.

StyleSheets can be added as separate CSS files in your project, or inline in your Resources. A variety of common selectors are available to compose your styles.

For more information about styling your FlexLayouts and the rest of your application with CSS:

Right-To-Left Localization

When supporting languages such as Arabic and Hebrew that flow right-to-left, you may now tap into the very easy to use FlowDirection property on any VisualElement instead of using platform-specifics or effects as you may have used previously. Because you already know the direction the device prefers by accessing Device.FlowDirection, updating your UI could be as easy as adding this to the head of your page in XAML:

FlowDirection="{x:Static Device.FlowDirection}"

For more information about updating your applications to support right-to-left layouts:

Community Contributions

Xamarin.Forms 3.0 also boasts some significant contributions from our devoted community, including the “F100” collaboration to fill in the gaps and deserve to be supported in Xamarin.Forms. The code-name stands for a challenge to improve 100 little things in Xamarin.Forms. Follow along and please contribute on the GitHub project board!

Possibly the most celebrated contribution making this preview debut is the WPF backend for Xamarin.Forms. This allows you to bring Xamarin.Forms UI into existing WPF applications via Native Forms, as well as building your Xamarin.Forms applications for older versions of Windows. For additional information about this new backend check out:

Update Today and Start Exploring!

Xamarin.Forms 3.0 is now available on NuGet. Be sure to read the full release notes which includes a ton of bug fixes.

Fork the Conference Camera prototype app that demonstrates all of these amazing features, and includes some nice Custom Vision integration as a bonus from Azure Cognitive Services!

Enjoy this post? Discuss it on the Xamarin Forums!

0 comments

Discussion is closed.

Feedback usabilla icon