I’m going to start off where we were at the end of Part 5, but this time instead of creating two labels (for State and Zip) I’m going to create one label with MultiBinding:
<Label VerticalOptions="Center">
<Label.Text>
<MultiBinding StringFormat="{}{0} | {1}">
<Binding Path="state" />
<Binding Path="zip" />
</MultiBinding>
</Label.Text>
</Label>
This is more efficient and also allows me to put VerticalOptions=”Center” into the label tag and have it affect all the contained labels. This is a nice alternative to having to use the HorizontalStackLayout
NB: You can continue to use the Xamarin.Forms <StackLayout> element, but HorizontalStackLayout and VerticalStackLayout have been optimized and thus are preferred.
Note also that ScrollView is built into CollectionView and so there is no need to wrap this in a scroll view. To see this at work, copy the last entry (CT) a few times so that we have a list, and then shrink the CollectionView by setting its HeightRequest to, for example, 50. You’ll see your states in a small, but scrollable window.
Run On Multiple Platforms
Until now we’ve been running in Android, but all I have to do is go to the drop down next to the “Pixel 5” at the top of Visual Studio, drop it down and choose Windows to run it natively on the Windows computer
Live Preview
One terrifically useful feature is Live Preview. You open this screen by clicking Debug=>Windows=>Xamarin Live Preview. When you do a window opens up and displays your page as it will be output. More important, however, is that you can add, for example, ruler lines (vertical and/or horizontal) and set their color and toggle them on and off. This is great for making pixel-perfect alignment.
Note that Live Preview also supports hot reload. There is also a button “Show element during selection” that lights up the Xaml element when you select it on the Live Preview Window. That is super-useful.
Live Visual Tree
Closely related to Live Preview is the Live Visual Tree. This provides an interactive outline of every element in your project. You can collapse and open sections and you can light up the XAML element directly from the tree.
Notice the numbers to the right of each element; that tells you how many sub-elements that element has.
More soon…
The code for this blog post is available here
