I have a TabbedPage with 3 tabs, where I want to navigate directly to the 2nd content page (TagsListPage), but still keep my Tabbed header.
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="BradyRfidDemo.V1.MobileApp.Views.TabbedInventoryPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:BradyRfidDemo.V1.MobileApp.Views"
Title=" SCAN PAGE"
Shell.NavBarIsVisible="false">
<local:InventoryPage />
<local:TagsListPage />
<local:Transfer />
</TabbedPage>
TagsListPage: (I removed most of the code to make it clean).
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="BradyRfidDemo.V1.MobileApp.Views.TagList"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="TAGLIST"
BackgroundColor="{StaticResource Color1}">
<ContentPage.Content>
<StackLayout >
<Frame >
<StackLayout
HorizontalOptions="Center"
Orientation="Horizontal"
VerticalOptions="Center">
<Label
x:Name="TagList"
Margin="0,10,0,0"
HorizontalTextAlignment="Center"
Text="TAGLIST" />
</StackLayout>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>
So I want to access from another form content page, directly the TagsListPage, and keep my tabbed header.
If I go to the main page, I get my tabbed header, but it goes to the first page (InventoryPage)
Navigation.PushAsync(new TabbedInventoryPage());
If I go directly to the TagListPage, then I get my page, but not the tabbed structure which I need as well.
Navigation.PushAsync(new TagsListPage());
I tried a lot of different things, but nothing worked so far, and this looks like a very simple thing to do. Any help is greatly appreciated.
Related
I have successfully created my app and am finally ready to start testing before continuing with designs, however, while testing I find that after using my toolbar buttons twice it just disappears for no reason.
Here is the Xaml code for the item:
<?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:ODDJOBS.Views"
x:Class="ODDJOBS.Views.TabbedAppPage">
<TabbedPage.ToolbarItems>
<ToolbarItem Text="ODDJOBS" Priority="1"></ToolbarItem>
<ToolbarItem Text="+" Priority="2" Command="{Binding NavigateToAddPageCommand}">
</ToolbarItem>
</TabbedPage.ToolbarItems>
<!--Pages can be added as references or inline-->
<pages:NextPage Title="Jobs"/>
<pages:ServiceView Title="Services"/>
</TabbedPage>
Image:
I would like to add a frame to toolbar in Xamarin forms. But toolbar is not accepting.
You cannot add a frame as a Toolbar Item.
You can use, for example the TitleView and customize the whole NavigationView yourself.
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"
xmlns:local="clr-namespace:TitleViewSample"
x:Class="TitleViewSample.MainPage">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Label Text="Hello World" HorizontalOptions="Center"/>
<Frame BackgroundColor="Yellow" HorizontalOptions="End"/>
</StackLayout>
</NavigationPage.TitleView>
</ContentPage>
I'm beginner in Xamarin Form. This's my xaml code:
<?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:BluePin"
x:Class="BluePin.MainPage"
x:Name="MainContentPage">
<RelativeLayout>
<Image Source="BG.png"
Aspect="AspectFill"></Image>
</RelativeLayout>
</ContentPage>
enter image description here
I tested all xamarin layout and controls. Please see picture, there is red distance between layout and control (Image). how can i remove this distances and set image as full screen?
set image as full screen
there are two methods to implement this:
1.set the image as the ContentPage's background
<?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:BluePin"
x:Class="BluePin.MainPage"
x:Name="MainContentPage"
BackgroundImage="BG.png"
>
</ContentPage>
2.use StackLayout:
<?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:BluePin"
x:Class="BluePin.MainPage"
x:Name="MainContentPage">
<StackLayout>
<Image Source="BG.png"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Aspect="Fill" />
</StackLayout>
</ContentPage>
Try this:
<ContentPage.Content>
<RelativeLayout>
<Image Aspect="AspectFill" Source="BG.png"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"/>
</RelativeLayout>
</ContentPage.Content>
If you want to just show the image on the whole screen there is no need for you to define a parent layout secondly its a BAD performance practice to do so :
What your ContentPage XAML should look like:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Black" x:Name="MainContentPage"
x:Class="BluePin.MainPage">
<ContentPage.Content>
<Image Source="{Binding SelectedImage}" Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Transparent" />
</ContentPage.Content>
</ContentPage>
I would like to add and remove child pages from a tabbed page in certain conditions.
However, it gives me that collection "Children" is read only .
Has anyone succeeded ?
Here is the code for TabbedPage
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:partialViews="clr-namespace:TestTabbed.Views.PartialViews;assembly=TestTabbed"
prism:ViewModelLocator.AutowireViewModel="False"
x:Class="TestTabbed.Views.MainPage"
ItemsSource="{Binding ChannelLists}" Appearing="MainPage_OnAppearing"
Disappearing="MainPage_OnDisappearing">
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" x:Name="mainContentPage">
<ContentPage.Content>
<OnIdiom x:TypeArguments="View">
<OnIdiom.Phone>
<partialViews:MainPhoneView />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<partialViews:MainTabletView />
</OnIdiom.Tablet>
</OnIdiom>
</ContentPage.Content>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
Seeing your code might be helpful in case I am missing the actual issue but the following should work for you (note that you cannot directly assign a collection to the TabbedPage.Children property which is what it sounds like you are running into):
TabbedPage tab = new TabbedPage();
ContentPage page = new ContentPage();
tab.Children.Add(page);
tab.Children.Remove(page);
Where as the following will not work:
TabbedPage tab = new TabbedPage();
tab.Children = new List<Page>();
I have multiple ContentPage xaml files in my Xamarin project. I want to embed a shared piece of xaml into each ContentPage. There is nothing particularly special about the shared piece of xaml (it does't need to do anything platform specific). Shouldn't it be just as easy as embedding a tag in the xaml of the ContentPage to include the shared xaml file? Can someone point me in the right direction?
Thank you very much IdoT, It did work for me, but after adding some lines.
As this will help in making templates/custom controls/sub forms, easily added/shared across Xamarin.Forms.
Here is my full work based on your suggestion, so it can be used as is with others:
HeaderNavigationBar.xaml
<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App9.MVC.Views.HeaderNavigationBar"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Padding="10"
ackgroundColor="White">
<Button Text="Internal 1" />
<Button Text="Internal 2" />
</StackLayout>
As you can see, added:
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
and in the HeaderNavigationBar.cs, it was declared as StackLayout:
HeaderNavigationBar.cs
using Xamarin.Forms;
namespace App9.MVC.Views
{
public partial class HeaderNavigationBar : StackLayout
{
public HeaderNavigationBar()
{
InitializeComponent();
}
}
}
then for the page that will hold it/show it:
MainView.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:common="clr-namespace:App9.MVC.Views;assembly=App9"
x:Class="App9.MVC.Views.MainView">
<StackLayout Padding="0,0,0,20">
<common:HeaderNavigationBar>
<Button Text="External 1" />
</common:HeaderNavigationBar>
<Button Text="Test Button 1
x:Name="btnPage1"
Clicked="btnPage1_clicked" />
</StackLayout>
</ContentPage>
As you can notice, the namespace has the full path, in the MainView:
xmlns:common="clr-namespace:App9.MVC.Views;assembly=App9"
Also, you can notice that there is a button called External 1, this will also show with the
Internal buttons, as the control is a StackLayout, so it can handle adding more controls.
Screenshot:
Also for Page inside another Page:
https://github.com/twintechs/TwinTechsFormsLib
http://blog.twintechs.com/advanced-xamarin-forms-techniques-for-flexible-and-performant-cross-platform-apps-part-5-page-in-page-embedding
Again thanks goes to IdoT.
You can take the parent child of your ContentPage (for example, a StackLayout that wraps all the children), put it in an external xaml file,
and then include that component in each one of your ContentPages.
The external xaml file will be a StackLayout type, rather than a ContentPage.
Edit - added a code sample:
Let's add a header StackLayout: we add a code behind class:
public partial class HeaderNavigationBar
{
public HeaderNavigationBar()
{
InitializeComponent();
}
}
Then add the XAML code:
<StackLayout x:Class="HeaderNavigationBar"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Padding="10"
BackgroundColor="White">
<Image Source="burger_icon"
HorizontalOptions="StartAndExpand"
Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SlideNavigationDrawerCommand}" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
And finally, in the page where you want to reuse your component - add this reference:<HeaderNavigationBar />.