I have the following two pieces of XAML code in a Xamarin.Forms Portable Library XAML project:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestApp.Views.TestView">
<ContentPage.ToolbarItems>
<ToolbarItem Text="{Binding ToolbarItemText}" Command="{Binding ToolbarItemCommand}" Order="Default" Priority="0"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
</ContentPage.Content>
</ContentPage>
and
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestApp.Views.Test2View">
<MasterDetailPage.Master>
<ContentPage Title="Currencies">
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<ContentPage>
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
When running the Windows Phone 8.1 project (WinRT, not Silverlight), I have the following exception:
E_UNKNOWN_ERROR
Error HRESULT E_FAIL has been returned from a call to a COM component.
The problem is that, you HAVE TO specify the icon paths for the MasterDetailPage.Master page and for the ToolbarIcon. Additionally for the MasterDetailPage.Master page, you have to specify the Title property.
Here are the corrected code samples:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestApp.Views.TestView">
<ContentPage.ToolbarItems>
<ToolbarItem Text="{Binding ToolbarItemText}" Command="{Binding ToolbarItemCommand}" Order="Default" Priority="0">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="my-icon"
WinPhone="Assets/my-icon.png" />
</ToolbarItem.Icon>
</ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
</ContentPage.Content>
</ContentPage>
and
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestApp.Views.Test2View">
<MasterDetailPage.Master>
<ContentPage Title="Currencies">
<ContentPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="my-icon"
WinPhone="Assets/my-icon.png" />
</ContentPage.Icon>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<ContentPage>
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Related
Is there any way to set the width of MasterDetailPage.Master in Xamarin? I want to decrease the width of the Menu Drawer. Hope you can help me with this code:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoApp.MenuPage"
xmlns:local="clr-namespace:DemoApp.Views"
MasterBehavior="Popover"
NavigationPage.HasNavigationBar="False"
NavigationPage.HasBackButton="False">
<MasterDetailPage.Master>
<ContentPage Title="MenuPage">
<ContentPage.Content>
<StackLayout VerticalOptions="Start">
<Button Text="Home"/>
<Button Text="Login" Clicked="Login_Clicked"/>
<Button Text="Logout"/>
<Button Text="Exit"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:Login/>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Use custom renderer.
https://forums.xamarin.com/discussion/comment/62894/#Comment_62894
Or use this solution
How to set width for MasterDetailPage in xamarin forms
I encountered this issue tonight and after hours of brainstorming I thought i'd ask. Please refer to the code below:
App.xaml.cs
MainPage = new NavigationPage(new MainPage());
// MainPage = new NavigationPage(new ActivitiesPage());
The above code does not run for some reason. I have done a test with the commented code below and everything functions just how it should. Does anyone know the reason for this? The code for both xaml classes (MainPage and ActivitiesPage) are below.
MainPage
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Instagram_App.View.MainPage"
xmlns:view="clr-namespace:Instagram_App.View;assembly=Instagram_App">
<view:ActivitiesPage Title="Activities" Icon="heart.png"/>
<view:ProfilePage Title="Profile" Icon="user.png"/>
</TabbedPage>
ActivitiesPage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Instagram_App.View.ActivitiesPage">
<ContentPage.Content>
<ListView x:Name="listView" ItemSelected="ListView_OnItemSelected" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<Image Source="{Binding ImageUrl}" />
<Label Text="{Binding Description}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
I have stepped through the code to see what happens and it seems that when the compiler gets to OnStart() it crashes. Please help and thanks!
A TabbedPage should be the root (MainPage) of your App, not contained within a NavigationPage. However, each tab within a TabbedPage can contain a NavigationPage
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
x:Class="TabbedPageWithNavigationPage.MainPage">
<local:TodayPage />
<NavigationPage Title="Schedule" Icon="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
According to your code，
your MainPage should be setted as TabbedPage and Root of Your App.
So you could modify App.xaml.cs as follows:
MainPage = new MainPage();
If you want tab Contain NavigationPage to TabbedPage, you can use the Last responder's answer:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
x:Class="TabbedPageWithNavigationPage.MainPage">
<local:TodayPage />
<NavigationPage Title="Schedule" Icon="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
And,if have Doubt，you can refer to the official documentation：
[TabbedPage use and demo][1]
[1]: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
I'm trying to learn Xamarin and I was doing a simple MasterDetailPage to run on iOS. After running the code I got this error:
Can not set the content of MasterDetailPage as it doesn't have a ContentPropertyAttribute
Below is my XAML file code snippet:
<?xml version="1.0" encoding="utf-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MasterDetailLearing" x:Class="MasterDetailLearing.MainPage">
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<MasterDetailPage.Master>
<ContentPage Padding="10" BackgroundColor="Gray" Title="Master">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Master Page"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="10">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Detail Page"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
a MasterDetail page only has Master and Detail children. You cannot include any other content as a direct child. So your Label needs to be in either the Master or the Detail, it cannot be a direct child of the page.
I'm experiencing a weird bug when I try to add Navigation to my CropsListPage
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-Balloney.Views"
x:Class="Balloney.Views.MainPage">
<NavigationPage Icon="carrot.png">
<x:Arguments>
<local:CropListPage/>
</x:Arguments>
</NavigationPage>
<ContentPage Icon="search.png"></ContentPage>
</TabbedPage>
And then it results in..
If I don't try to envelop it in a NavigationPage, it stays normal
Any idea what's causing this behaviour ? Before trying to hammer my way outta this and hardcoding the size of the status bar in Android, I'm looking for a way to understand the problem and prevent it. Thanks
MainPage.xaml working now
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Balloney.Views"
x:Class="Balloney.Views.MainPage">
<local:CropListPage Icon="carrot.png"/>
<ContentPage Icon="search.png"></ContentPage>
</TabbedPage>
And the CropList xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Balloney.Views.CropListPage">
<ListView ItemsSource="{Binding CropsList}" ItemTapped="OnCropTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding ImageUrl}" VerticalOptions="Fill" WidthRequest="50"/>
<StackLayout HorizontalOptions="StartAndExpand">
<Label Text="{Binding Specie.Name}"/>
<Label Text="{Binding HarvestDate}" FontSize="Micro" TextColor="Black"/>
</StackLayout>
<Label Text="{Binding Location}" FontSize="Micro" TextColor="Chocolate" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
EDIT: The error seems to be related to the ListView I have inside CropListPage because there's no bug when I switch to the Search icon Page.
The extra space in your first image is the result of the NavigationPage by default showing the Navigation bar, which can be hidden.
Here's an example of how to hide it.
Is may be because you have wrapped crop list page in a navigation page so when that is selected you get the nav bar space above.
If you select the second tab, does the space disappear?
If you add a title to crop page does it appear in the large green space?
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Chronocrops.Views"
x:Class="Chronocrops.Views.MainPage">
<NavigationPage Icon="carrot.png" Title="Crop List">
<x:Arguments>
<local:CropListPage/>
</x:Arguments>
</NavigationPage>
<ContentPage Icon="search.png"></ContentPage>
</TabbedPage>
I am creating an app in which i want the footer which will be common for all xaml pages.I tried solution given on this link xamarin forum
but it is showing error for partial class bcoz I'm using xamarin xaml form page while inheriting the class PageToInherit.If I just use page (only .cs file) then there is no error.
public partial class TodoList : PageToInherit
{
public TodoList()
{
InitializeComponent();
this.Title = "TodoList page";
Button button = new Button();
button.Text = "BUTTON 1";
MainStackLayout.Children.Add(button);
Content = MainStackLayout;
}
}
I think you can take a look to TemplatedPage
Create a ControlTemplate
<?xml version="1.0" encoding="utf-8" ?>
<Application
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Mobile.App">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="MainPageTemplate">
<StackLayout>
<Label Text="Header Content" FontSize="24" />
<ContentPresenter />
</StackLayout>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
Apply the ControlTemplate
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Mobile.MainPage"
ControlTemplate="{StaticResource MainPageTemplate}">
<Label Text="Main Page Content" FontSize="18" />
</ContentPage>
Use TemplateBinding
<ControlTemplate x:Key="MainPageTemplate">
<StackLayout>
<Label Text="{TemplateBinding BindingContext.HeadingText}" FontSize="24" />
<ContentPresenter />
</StackLayout>
</ControlTemplate>
Here the Blog
For those who are still looking for this.
Use ContentView for creating reusable xaml views.
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xxx.FooterView">
<ContentView.Content>
<RelativeLayout VerticalOptions="End" HorizontalOptions="Fill" HeightRequest="42" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}">
<Label HeightRequest="42" VerticalTextAlignment="Center" Text="Copyright © 2017. All rights reserved." HorizontalTextAlignment="Center" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" />
</RelativeLayout>
</ContentView.Content>
</ContentView>
and use it in your page like any control
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xxx.Page1" xmlns:local="clr-namespace:xxx;assembly=xxx" >
<local:FooterView VerticalOptions="End" HeightRequest="45"/>
//other views and layouts
</ContentPage>
Hope it helps.