Header Introduction to Xamarin Forms Microsoft Virtual Academy

Header Introduction to Xamarin Forms Microsoft Virtual Academy Jeff Prosise Produced by

What is Xamarin Forms? Xamarin i. OS UI Android UI Xamarin Forms Windows UI Shared Logic (C#) Shared UI (XAML) Shared Logic (C#)

Using XAML to Build Cross-Platform UIs <Content. Page> <Stack. Layout Spacing="20" Padding="50" Vertical. Options="Center"> <Entry Placeholder="User name" /> <Entry Placeholder="Password" Is. Password="True" /> <Button Text="Login" Text. Color="White" Background. Color="##FF 77 D 065" /> </Stack. Layout> </Content. Page> Windows Phone Android i. OS

Xamarin XAML vs. Microsoft XAML Xamarin Microsoft <Content. Page> <Stack. Layout Spacing="20" Padding="50" Vertical. Options="Center"> <Entry Placeholder="User name" /> <Entry Placeholder="Password" Is. Password="True" /> <Button Text="Login" Text. Color="White" Background. Color="##FF 77 D 065" /> </Stack. Layout> </Content. Page> <Stack. Panel Margin="50" Vertical. Align="Center"> <Text. Box Placeholder. Text="User name" /> <Password. Box Placeholder. Text="Password" /> <Button Content="Login" Foreground="White" Background="##FF 77 D 065" /> </Stack. Panel> </Page>

Your First Xamarin Forms App

Views and Cells (Controls) Buttons, Labels, Web. Views, and other control elements Activity. Indicator Box. View Button Date. Picker Editor Entry Image Label List. View Map Open. GLView Picker Progress. Bar Search. Bar Slider Stepper Switch Table. View Time. Picker Web. View Entry. Cell Image. Cell Switch. Cell Text. Cell View. Cell

Web. View <Web. View Source="http: //www. wintellect. com" />

List. View and Image. Cell <List. View Row. Height="80" Items. Source="{Binding Recipes}"> <List. View. Item. Template> <Data. Template> <Image. Cell Image. Source="{Binding Image}" Text="{Binding Title}" /> </Data. Template> </List. View. Item. Template> </List. View>

List. View and View. Cell <List. View Row. Height="80" Items. Source="{Binding Recipes}"> <List. View. Item. Template> <Data. Template> <View. Cell> <Grid Padding="8">. . . <Image Source="{Binding Image}" /> <Grid. Column="1" Padding="8">. . . <Label Text="{Binding Title}" Font. Size="Large" Line. Break. Mode="Word. Wrap" /> </Grid> </View. Cell> </Data. Template> </List. View. Item. Template> </List. View>

Table. View and Switch. Cell <Table. View> <Table. View. Root> <Table. Section Title="Privacy"> <Switch. Cell Text="Allow Spamming" /> <Switch. Cell Text="Track Location" On="True" /> </Table. Section> <Table. Section Title="Performance"> <Switch. Cell Text="Run Super-Fast" On="True" /> <Switch. Cell Text="Cache Data Locally" /> <Switch. Cell Text="Steal Clock Cycles" /> </Table. Section> </Table. View. Root> </Table. View>

Layouts Controls that contain other controls and provide layout and positioning

Using Stack. Layout <Stack. Layout Padding="32" Spacing="32"> <Box. View Color="#FFF 25022" Height. Request="128" <Box. View Color="#FF 7 FBA 00" Height. Request="128" <Box. View Color="#FF 01 A 4 EF" Height. Request="128" <Box. View Color="#FFFFB 901" Height. Request="128" </Stack. Layout> /> />

Using Grid <Grid Padding="32" Row. Spacing="32" Column. Spacing="32"> <Grid. Row. Definitions> <Row. Definition Height="*" /> </Grid. Row. Definitions> <Grid. Column. Definitions> <Column. Definition Width="*" /> </Grid. Column. Definitions> <Box. View Grid. Row="0" Grid. Column="0" Color="#FFF 25022" <Box. View Grid. Row="0" Grid. Column="1" Color="#FF 7 FBA 00" <Box. View Grid. Row="1" Grid. Column="0" Color="#FF 01 A 4 EF" <Box. View Grid. Row="1" Grid. Column="1" Color="#FFFFB 901" </Grid> /> />

Using Absolute. Layout with Device-Independent Units <Absolute. Layout> <Box. View Color="#FFF 25022" Absolute. Layout. Bounds="32, 150, 300" /> <Box. View Color="#FF 7 FBA 00" Absolute. Layout. Bounds="214, 32, 150, 300" /> <Box. View Color="#FF 01 A 4 EF" Absolute. Layout. Bounds="32, 364, 150, 300" /> <Box. View Color="#FFFFB 901" Absolute. Layout. Bounds="214, 364, 150, 300" /> </Absolute. Layout>

Using Absolute. Layout with Proportional Units <Absolute. Layout> <Box. View Color="#FFF 25022" Absolute. Layout. Flags="All" Absolute. Layout. Bounds="0. 15, <Box. View Color="#FF 7 FBA 00" Absolute. Layout. Flags="All" Absolute. Layout. Bounds="0. 85, <Box. View Color="#FF 01 A 4 EF" Absolute. Layout. Flags="All" Absolute. Layout. Bounds="0. 15, <Box. View Color="#FFFFB 901" Absolute. Layout. Flags="All" Absolute. Layout. Bounds="0. 85, </Absolute. Layout> 0. 15, 0. 35, 0. 35" /> 0. 85, 0. 35, 0. 35" />

Grids, Buttons, and Labels…Oh My!

On. Platform Easy-to-use mechanism for specifying property values and executing code on a per -platform basis in shared code Generic class usable in XAML (<On. Platform>) Static method accessible from code (Device. On. Platform) Essential for tweaking UIs to get just the right look on every platform

Using On. Platform in XAML <Box. View Horizontal. Options="Center"> <Box. View. Color> <On. Platform x: Type. Arguments="Color" i. OS="Green" Android="#738182" Win. Phone="Accent" /> </Box. View. Color> <Box. View. Width. Request> <On. Platform x: Type. Arguments="x: Double" i. OS="30" Android="40" Win. Phone="50" /> </Box. View. Width. Request> </Box. View>

Using On. Platform in Code // Assign platform-specific values to cx and cy double cx = Device. On. Platform(i. OS: 24, Android: 30, Win. Phone: 36); double cy = Device. On. Platform(i. OS: 32, Android: 40, Win. Phone: 48); // Execute platform-specific code on i. OS and Android Device. On. Platform(i. OS: () => { this. Background. Color = Color. Red; // Set page background to red }, Android: () => { this. Background. Color = Color. Blue; // Set page background to blue });

Tweaking the UI for Each Platform

Orientation Changes Xamarin Forms don't fire events reporting device-orientation changes Use Page. Size. Changed events or override Page. On. Size. Allocated instead Latter can be called multiple times each time device is rotated

Using On. Size. Allocated public partial class Main. Page : Content. Page { private double _width = 0. 0; private double _height = 0. 0; protected override void On. Size. Allocated(double width, double height) { base. On. Size. Allocated(width, height); // Important! } } if (width != _width || height != _height) { _width = width; _height = height; // TODO: Respond to orientation change }

Using Size. Changed public partial class Main. Page : Content. Page { public Main. Page() { Initialize. Component(); this. Size. Changed += (s, e) => { if (Width != Height) // On Windows Phone, first call has both set to 0. 0 { // TODO: Respond to orientation change } }; } }

Responding to Orientation Changes

Pages Controls that represent pages

Creating a Tabbed Page <Tabbed. Page. . . Title="Tabbed Page"> <Tabbed. Page. Children> <Content. Page Title="Red"> <Box. View Color="Red" Width. Request="280" Height. Request="400" Horizontal. Options="Center" Vertical. Options="Center" /> </Content. Page> <Content. Page Title="Green"> <Box. View Color="Green" Width. Request="280" Height. Request="400" Horizontal. Options="Center" Vertical. Options="Center" /> </Content. Page> <Content. Page Title="Blue"> <Box. View Color="Blue" Width. Request="280" Height. Request="400" Horizontal. Options="Center" Vertical. Options="Center" /> </Content. Page> </Tabbed. Page. Children> </Tabbed. Page>

Creating a Navigation Page // In App. cs this. Main. Page = new Navigation. Page(new Master. Page());

Navigating to Another Page // In the code-behind for the current page this. Navigation. Push. Async(new Detail. Page());

Multipage Apps

Introduction to Xamarin Forms Jeff Prosise jeffpro@wintellect. com