przemoinho
przemoinho

Reputation: 201

Xamarin - creating UI using ContentPage

I am working in VisualStudio 2015 and there I created Xamarin project. I want to rewrite my old project to Xamarin.Forms I have a problem with creating BottomAppBar. If Xamarin.Forms have something similar to BottomAppBar? My code in XAML was like this:

<Page
    x:Class="App.View.StartView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App.View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
>

    <Grid>
        <Grid.Background>
            <ImageBrush
                Stretch="UniformToFill"
                ImageSource="{ThemeResource BackgroundPath}"/>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <TextBlock
            x:Uid="heading"
            VerticalAlignment="Center"
            HorizontalAlignment="Right"
            Grid.Column="1"
            Grid.Row="0"
            TextAlignment="Right"
            FontFamily="{ThemeResource FontFamily}"
            FontWeight="{ThemeResource FontWeightHeader}"
            FontSize="{ThemeResource FontSizeHeader}"/>

    </Grid>
    <Page.BottomAppBar>
        <CommandBar
            Background="{ThemeResource CommandBarBackgroundBrush}">
            <CommandBar.PrimaryCommands>
                <AppBarButton
                    x:Uid="startAppBarButton"
                    Icon="Play"
                    Command="{ Binding StartCommand}"/>
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton
                    x:Uid="settingsButton"
                    Command="{Binding SettingsCommand}"/>
                <AppBarButton
                    x:Uid="aboutButton"
                    Command="{Binding InfoCommand}"/>
                <AppBarButton
                    x:Uid="helpButton"
                    Command="{Binding HelpCommand}"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>

For now I have not so much, but I am trying to make view as much similar as my previous view and so far I have:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
        xmlns:androidWidget="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
        xmlns:formsAndroid="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.Platform.Android;targetPlatform=Android"
        xmlns:winControls="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
        xmlns:local="clr-namespace:NativeViewInsideContentView" 
        x:Class="NativeViewInsideContentView.NativeViewInsideContentViewPage"
        BackgroundImage="Background.png"  
        >


  <StackLayout Margin="20">
      <Button Text="Click Me!"
            HorizontalOptions="Center"
            VerticalOptions="CenterAndExpand" 
                />
  </StackLayout>


</ContentPage>

Upvotes: 0

Views: 135

Answers (1)

Stephane Delcroix
Stephane Delcroix

Reputation: 16232

Here's to get you started. From there you'll be able to Google or Bing your way out:

Page => ContentPage
Grid => Grid
StackPanel => StackLayout
TextBlock => Label
Page.BottomAppBar => ContentPage.ToolbarItems

Upvotes: 1

Related Questions