I have been working on a project where I have included Bottom tabbed bar for android. The spacing between Icon and Title have some issue as they overlap each other.
<local:EntryPage Title="Home" Icon="home.png"/>
<NavigationPage Title="Maps" Icon="placeholder.png">
<x:Arguments>
<local:MapPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Order" Icon="list.png">
<x:Arguments>
<local:ListPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Settings" Icon="settings.png">
<x:Arguments>
<local:SettingsPage />`enter code here`
</x:Arguments>
</NavigationPage>
Tabbed Bar Image
Related
I am using Xamarin forms maps and the xaml below works for a hardcode couple of polygons and positions within the polygons. Now I have proven this works I want to make the maps:Polygon entries be data bound to observable collection of polygons I have in a list and then within that I want to have the positions as an collection inside the polygon bound objects (I know how to do this in the ViewModel) but I can't work out how to setup the XAML to configure the binding to the ViewModel - how do I do this?
<maps:Map MapType="{Binding CurrentMapType, Mode=TwoWay}" ItemsSource="{Binding MyPins}" HasZoomEnabled="True" x:Name="map" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<x:Arguments>
<maps:MapSpan>
<x:Arguments>
<maps:Position>
<x:Arguments>
<x:Double>-41.6</x:Double>
<x:Double>173.0</x:Double>
</x:Arguments>
</maps:Position>
<x:Double>13</x:Double>
<x:Double>13</x:Double>
</x:Arguments>
</maps:MapSpan>
</x:Arguments>
<maps:Map.ItemTemplate>
<DataTemplate>
<maps:Pin Position="{Binding Position}"
Address="{Binding Address}"
Label="{Binding Description}" />
</DataTemplate>
</maps:Map.ItemTemplate>
maps:Map.MapElements
<maps:Polygon StrokeColor="#1BA1E2"
StrokeWidth="8"
FillColor="#881BA1E2" >
<maps:Polygon.Geopath>
<maps:Position>
<x:Arguments>
<x:Double>47.6368894</x:Double>
<x:Double>-122.134655</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6359424</x:Double>
<x:Double>-122.134655</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6359496</x:Double>
<x:Double>-122.1325521</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6424124</x:Double>
<x:Double>-122.1325199</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.642463</x:Double>
<x:Double>-122.1338932</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6406414</x:Double>
<x:Double>-122.1344833</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6384943</x:Double>
<x:Double>-122.1361248</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6372943</x:Double>
<x:Double>-122.1376912</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6368678</x:Double>
<x:Double>-122.137305</x:Double>
</x:Arguments>
</maps:Position>
</maps:Polygon.Geopath>
</maps:Polygon>
<maps:Polyline StrokeColor="Black"
StrokeWidth="12">
<maps:Polyline.Geopath>
<maps:Position>
<x:Arguments>
<x:Double>47.6381401</x:Double>
<x:Double>-122.1317367</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6381473</x:Double>
<x:Double>-122.1350841</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6382847</x:Double>
<x:Double>-122.1353094</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6384582</x:Double>
<x:Double>-122.1354703</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6401136</x:Double>
<x:Double>-122.1360819</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6403883</x:Double>
<x:Double>-122.1364681</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6407426</x:Double>
<x:Double>-122.1377019</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6412558</x:Double>
<x:Double>-122.1404056</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6414148</x:Double>
<x:Double>-122.1418647</x:Double>
</x:Arguments>
</maps:Position>
<maps:Position>
<x:Arguments>
<x:Double>47.6414654</x:Double>
<x:Double>-122.1432702</x:Double>
</x:Arguments>
</maps:Position>
</maps:Polyline.Geopath>
</maps:Polyline>
</maps:Map.MapElements>
</maps:Map>
</StackLayout>
Could anyone advice how to add the image in ContentPage IconImageSource?
Trying to display "icon.png" in Title bar.
The image from the ToolbarItem, "toolbar_icon.png", is able to display.
Both icons are place together in Android Resources drawable folder.
Haven't tried for iOS platform yet.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HelloWorld.Views.AboutPage"
Title="{Binding Title}"
IconImageSource="icon.png">
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="toolbar_icon.png"></ToolbarItem>
</ContentPage.ToolbarItems>
</ContentPage>
App.xml file is default and doesn't update it.
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloWorld.Views"
Title="HelloWorldApp"
x:Class="HelloWorldApp.AppShell">
<TabBar>
<ShellContent Title="About" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</TabBar>
</Shell>
Thanks.
We can use Shell.TitleView as the workaround .
<Shell.TitleView>
<Image Source="icon_feed.png"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Shell.TitleView>
Refer to
https://stackoverflow.com/a/58969359/8187800 .
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Notes.Views.ConnectionPage"
Title="Connection">
<!-- Add an item to the toolbar -->
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="/Images/Satellite.ico" />
</ContentPage.ToolbarItems>
</ContentPage>
I am new to Xamarin.Forms and met an issue. Here is a similar demo for my question.
I followed some resources to set the theme and style in the App.xaml, source code as follow:
For theme.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="QuickDemo.Theme">
<!--Orange-->
<Color x:Key="NavigationBarColor">#fb8c00</Color>
<!--Gray-->
<Color x:Key="PageBackgroundColor">#f5f5f5</Color>
<Color x:Key="PrimaryColor">#fb8c00</Color>
<Color x:Key="SecondaryColor">White</Color>
<Color x:Key="PrimaryTextColor">Black</Color>
<Color x:Key="SecondaryTextColor">Black</Color>
<!--Dark Gray-->
<Color x:Key="TertiaryTextColor">#383838</Color>
<Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>
For 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="QuickDemo.App">
<Application.Resources>
<ResourceDictionary Source="Theme.xaml">
<!--Page Style-->
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor"
Value="{DynamicResource NavigationBarColor}"/>
<Setter Property="BarTextColor"
Value="{DynamicResource SecondaryColor}"/>
<Setter Property="BackgroundColor"
Value="{DynamicResource PageBackgroundColor}"/>
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor"
Value="{DynamicResource PageBackgroundColor}"/>
</Style>
<Style TargetType="TabbedPage">
<Setter Property="BarBackgroundColor"
Value="{DynamicResource NavigationBarColor}"/>
<Setter Property="BarTextColor"
Value="{DynamicResource SecondaryColor}"/>
<Setter Property="BackgroundColor"
Value="{DynamicResource PageBackgroundColor}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
For MasterDetailPage.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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="QuickDemo.MasterDetailPageDemo"
xmlns:pages="clr-namespace:QuickDemo">
<MasterDetailPage.Master>
<pages:MasterDetailPageMaster x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MasterDetailPageDetail />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
And I changed the detail page to a tabbedpage, MasterDetailPageDetail.xaml:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:QuickDemo"
x:Class="QuickDemo.MasterDetailPageDetail"
Title="Detail">
<TabbedPage.Children>
<NavigationPage Title="Tab One">
<x:Arguments>
<local:FirstPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Tab Two">
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
When I run the emulator, I got this result:
It seems the theme for navigation page is working, but why it doesn't work for the tabbed page then? I found it work if I set the color on page level:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:QuickDemo"
x:Class="QuickDemo.MasterDetailPageDetail"
Title="Detail"
BarBackgroundColor="{StaticResource PrimaryColor}">
I really appreciate any help or hints. I would like all the tabbed pages in my app can take advantage of the theme. Thanks in advance.
You should add ApplyToDerivedTypes = "True" in the style as your MasterDetailPageDetail is Derived from TabbedPage.
For example:
<Style TargetType="TabbedPage"
ApplyToDerivedTypes="True">
<Setter Property="BarBackgroundColor"
Value="Green"/>
<Setter Property="BarTextColor"
Value="Pink"/>
</Style>
Refer : style.applytoderivedtypes
create-resources-in-xaml
Could someone help me with a bit of Xamarin.
How do we add Navigation Bar and Page Buttons in a Master Detail Page in Xamarin ?
I added a MasterDetail page, and defined the xaml as follows.
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:local="clr-namespace:MyNameSpace.Views;assembly=MyNameSpace"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="MyNameSpace.Views.MainMenu">
<MasterDetailPage.Master BackgroundColor ="White">
<ContentPage Title="Master Page" BackgroundColor = "#2c3e50" >
<Grid BackgroundColor ="#354b60">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="3*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="1" Grid.Column="0">
<Button BackgroundColor="#2c3e50" TextColor="White" Text="Menu 1" ></Button>
<Button BackgroundColor="#2c3e50" TextColor="White" Text="Menu 2" ></Button>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<local:MainPage/>
</MasterDetailPage.Detail>
</MasterDetailPage>
Am I missing out something ?
Thanks in advance
Try wrapping your Detail page in a NavigationPage:
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:MainPage/>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
That should give you a navigation bar at the top.
I am trying to add a simple Master Detail page to an already existing Xamarin application. Here is the MasterDetailPage declaration
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:MyCareManager.XamForms.Pages;assembly=MyCareManager.XamForms"
x:Class="MyCareManager.XamForms.Pages.SettingsPage">
<MasterDetailPage.Master>
<ContentPage Title="This is the test master page"></ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<ContentPage Title="This is a view"></ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
However, when I run the application I get the following error when navigation through to the page :
Master and Detail must be set before adding MasterDetailPage to a
container
I am assuming that it is to do with autofac that is being used in the application as an IOC container but havent been able to put a finger to it. Has anyone else experienced this?
Here is my running code if some one need it :
<?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="CrossApp1.MenuPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Orientation="Vertical">
<Button Text="Sports"/>
<Button Text="Economy"/>
<Button Text="Education"/>
<Button Text="Science"/>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<ContentPage Title="This is a view"></ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I solved this issue by adding Detail section of MasterDetailPage
Like this
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Padding="20">
<Button Text="ViewA"/>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<!--Add below code too-->
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<ContentPage Title="This is a view"></ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
I forgot to use InitializeComponent(); on my MasterDetailPage code behind file. In your case that must be SettingsPage. I had commented it out, because he showed me an error one time.
You can try this: Open a simple class for Master Detail Page. Set the name MyMasterPage (set the name what you desire).
public class MyMasterPage : MasterDetailPage
{
public MyMasterPage()
{
this.Master = new MenuPage();//name of your menupage
this.Detail = new DetailPage();//name of your detailpage
}
}
Now you have your Master Detail Page. Last thing you should add 2 ContentPage one is for Menu Page, other for DetailPage.