how can I create a "base" ContentPage that contains, for sample, a busy indicator, and make this Page the base for each other pages inside my application?
I have tried to do in this way, but the busy indicator isn't showed.
Base Page:
<?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:core="clr-namespace:SgatMobileV3.Core;assembly=SgatMobileV3"
x:Class="SgatMobileV3.Core.BasePage">
<ContentPage.Content>
<Grid>
<core:VolosLoadingView />
</Grid>
</ContentPage.Content>
</ContentPage>
Busy indicator view:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:core="clr-namespace:SgatMobileV3.Core;assembly=SgatMobileV3"
core:LocatorViewModel.AutoWireViewModel="true"
x:Class="SgatMobileV3.Core.VolosLoadingView"
xmlns:busyindicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms">
<Grid>
<Grid BackgroundColor="LightGray" Opacity="0.6" IsVisible="True" />
<busyindicator:SfBusyIndicator
IsBusy="True"
IsVisible="True"
x:Name="loading" AnimationType="DoubleCircle"
ViewBoxWidth="150" ViewBoxHeight="150"
TextColor="Green" BackgroundColor="Transparent"
HorizontalOptions="Center" VerticalOptions="Center"/>
</Grid>
</ContentView>
A page:
<core:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:core="clr-namespace:SgatMobileV3.Core;assembly=SgatMobileV3"
core:LocatorViewModel.AutoWireViewModel="true"
x:Class="SgatMobileV3.Views.MockPage">
<ContentPage.Content>
<Grid>
<Button Text="Welcome to Xamarin.Forms! 1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Command="{Binding Test_ClickCommand}" />
</Grid>
</ContentPage.Content>
</core:BasePage>
I have tried to include a sample label inside the base page but nothing appears.
how can I create a "base" ContentPage that contains, for sample, a busy indicator, and make this Page the base for each other pages
If want Creating a ControlTemplate at Page Level,creating ControlTemplate instances at the application level, they can also be created at the page level, as shown in the following code example:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.HomePage">
<ContentPage.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="TealTemplate">
...
</ControlTemplate>
<ControlTemplate x:Key="AquaTemplate">
...
</ControlTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentView ... ControlTemplate="{StaticResource TealTemplate}">
...
</ContentView>
</ContentPage>
When adding a ControlTemplate at the page level, a ResourceDictionary is added to the ContentPage, and then theControlTemplate` instances are included in the ResourceDictionary.
And also can use code , from doc has a sample for example.
You can do that adding the control in the code (in BasePage.cs file), I don't think there is XAML solution for that.
Related
I'm trying to write a page that must show some content based on a variable in the binded class.
For example:
<?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="MyProject.MyClass"
Title="Beautiful Title">
<ContentPage.Content>
//If something true in the MyClass.cs
<StackLayout>
<Label Text="Yeeee" />
<ListView>
...
</ListView>
</StackLayout>
//Else
<AbsoluteLayout>
<Label Text="Noooo" />
<Button>
...
</Button>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
There is a way to do that? My goal is to write a single page instead of two page that differs for few lines of code.
I have a main Navigation Page that is a Tabbed Page, linking different views.
I've set the in the main Tabbed Page and it works, but I would like to set it different for each page.
This is the Tabbed Page:
<TabbedPage
NavigationPage.HasBackButton="False"
BackgroundColor="Black"
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestProiectLicenta.Views.UserPageForm" xmlns:local="clr-namespace:TestProiectLicenta.Views"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:refresh="clr-namespace:Refractored.XamForms.PullToRefresh;assembly=Refractored.XamForms.PullToRefresh">
<TabbedPage.Children>
<local:CarsListPage Title="Cars" Icon="new_car_icon"/>
<local:NewCarsListPage Title="New Cars" Icon="new_car_icon"/>
<local:ChooseMethodFormPage Title="Add Car" Icon="new_add_icon" />
<local:UserViewPage Title="New Page Test" Icon="new_user_icon" />
<ContentPage Title="Settings" Icon="new_settings_icon.png">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Horizontal">
<Image Source="face_id" />
<Label Text="FaceID Login?" />
</StackLayout>
<Switch IsToggled="false" Toggled="Handle_Toggled" x:Name="Fid" />
</StackLayout>
<Button Text="Sign Out" Clicked="SignOutButton" />
</StackLayout>
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
The views are Content Pages.
I would like to have a Title View for the first page with some controls, like search, delete etc. (it's a list of cars) and the user's picture, and the others with the title and maybe other controls.
Usually what I do is I set the Title property in every ContentPage and it reflects on to the page when I flip through tabs
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.BackButtonTitle=""
Title="My Demo Title">...
Update:
In your TabbedPage, you can add the NavigationPage's TitleView something like below
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.BackButtonTitle=""
Title="My Demo Title">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Image x:Name="TitleImage"/>
<Label x:Name="TitleLabel"/>
</StackLayout>
</NavigationPage.TitleView>
Hope you can take care of the alignment and everything else.
So Now using the above names you will be able to access the title image and label whenever you please!!
I have found a solution to my problem. Inside the TabbedPage, for each page that you need to have a special Navigation Bar you declare it like this:
<NavigationPage Title="Schedule" IconImageSource="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
Then you edit the new page and add the
<NavigationPage.TitleView/>
I Am trying to create a dummy app that has multiple "Branding Packages".
I have read that using a control template is the easiest way to apply a global styling to the app. most controls in the app will be added dynamically via the code behind.
However whenever I set the content view to use the control template none of the controls I have added via code will display
Here is the App.xaml
<?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="TestWebApp.App">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="Template">
<Grid>
<Label Text="Control Template Demo App"
TextColor="White">
</Label>
<ContentPresenter/>
<BoxView Color="Teal" />
<Label Text="(c) WTF 2018"
TextColor="White"
VerticalOptions="Center"/>
</Grid>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
Here is the MainPage.xaml
<?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:local="clr-namespace:TestWebApp"
x:Class="TestWebApp.MainPage">
<ContentView ControlTemplate="{StaticResource Template}">
<ScrollView>
<StackLayout Orientation="Vertical" x:Name="MenuLayout">
</StackLayout>
</ScrollView>
</ContentView>
</ContentPage>
And here is the MainPage.xaml.cs
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace TestWebApp
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
List<Object> testList = TestMethod();
foreach(Object testObject in testList)
{
MenuLayout.Children.Add((View)testObject);
}
}
public List<Object> TestMethod()
{
Button newButton = new Button {Text = "This is a Test Button", BackgroundColor = Color.White};
List<Object> returnList = new List<object>();
returnList.Add(newButton);
return returnList;
}
}
}
Is there a way to dynamically create a page from the code behind while still implementing the control template
Try to add some RowDefinitions to the Grid in the template:
<ControlTemplate x:Key="Template">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Text="Control Template Demo App" TextColor="White" />
<ContentPresenter Grid.Row="1" />
<BoxView Color="Teal" Grid.Row="2" />
<Label Text="(c) WTF 2018" TextColor="White" VerticalOptions="Center" Grid.Row="3"/>
</Grid>
</ControlTemplate>
I am not sure why I am getting this error I have read alot about this error and sounds like it is related to the title in the xaml file not being set. All my pages have the title set. The error is coming from the app.xaml.cs MainPage= new MainPage();
is there something else that can trigger this exeception?
System.InvalidOperationException: Master and Detail must be set before adding MasterDetailPage to a container
MainPage.xaml
<?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:pages="clr-namespace:ReimbursementApp.Pages"
x:Class="ReimbursementApp.Pages.MainPage"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
Title="Main">
<MasterDetailPage.Master>
<pages:MenuPage />
</MasterDetailPage.Master>
</MasterDetailPage>
MenuPage.xaml
<?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="ReimbursementApp.Pages.MenuPage"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerik="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
Title="Menu">
<!--<ContentPage.ToolbarItems>
<ToolbarItem Activated="OnToolbarButtonClick" Order="Primary" Priority="0" Icon="hamburgerButtonIcon"/>
</ContentPage.ToolbarItems>
<Grid>
<telerikPrimitives:RadSideDrawer x:Name="drawer" DrawerLength="250">
</telerikPrimitives:RadSideDrawer>
</Grid>-->
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="ListViewMenu"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10">
<Label Text="{Binding Title}" FontSize="20"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
The error message is literally saying what's wrong:
Master and Detail must be set before adding MasterDetailPage to a container
You already have set something in the Master property, like this:
<MasterDetailPage.Master>
<pages:MenuPage />
</MasterDetailPage.Master>
But you should also set the Detail property, something like this:
<MasterDetailPage.Detail>
<pages:MyMainPage />
</MasterDetailPage.Detail>
The MasterDetailPage is only a container and must have both a master (usually a menu) and a detail (something picked from the menu) to show something useful.
I have also seen this error occur if the page designated as the MasterDetailPage does not load correctly i.e. there may be errors in your xaml on that page or even errors found loading a static resource specified in your App.xaml. This was the case for me and fixing the errors resolved my problem.
I'm new to Xamarin and XAML so i downloaded a sample solution which has 3 tabbed pages and each of them contains a child page. Each child page has a label with different text on it. I managed to write a program that is supposed to do the same thing, but the label doesn't show on any of the child pages. I can change the background color and title on the child pages.
Here's the code for the MainPage (TabPage):
<?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:pages="clr-namespace:MozaikMuzeum_Xamarin.View;assembly=MozaikMuzeum_Xamarin"
x:Class="MozaikMuzeum_Xamarin.View.TabPage">
<TabbedPage.Children>
<pages:ActualPage />
<pages:CatalogPage />
<pages:BadgesPage />
</TabbedPage.Children>
</TabbedPage>
And here's the code for one of the child pages:
<?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="MozaikMuzeum_Xamarin.View.ActualPage" Title="Aktuális" BackgroundColor="Green">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<ContentPage.Content>
<Label Text="Hi there from Page 1" TextColor="White" Font="20"
VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage.Content>
</ContentPage>
As you can see the label doesn't show between the ContantPage.Content tags.