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>
Related
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
By default a MasterDetailPage adds the Title of the NavigationPage to the top of the view. I tried a simple experiment but it didn't work. It still renders the title instead of replacing it with an image. Is there a simple way to override the title area?
<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"
xmlns:views="clr-namespace:MyApp.Views"
x:Class="MyApp.Views.MainPage">
<MasterDetailPage.Master>
<views:MenuPage />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<NavigationPage.TitleView>
<StackLayout>
<Image Source="MyAppLogo.png" HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50" Aspect="AspectFill" />
</StackLayout>
</NavigationPage.TitleView>
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:JobsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Update
So I discovered that each content page has to individually override the NavigationPage.TitleView. But the goal is to have the same title bar across all content pages. So I followed the recomendation here: https://forums.xamarin.com/discussion/167655/it-is-possible-to-creatre-a-navigationpage-titleview-for-all-contentpage. I've implemented this however I'm not seeing anything in the title bar at all. What am I doing wrong now?
App.xaml
<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"
xmlns:local="clr-namespace:MyApp.Views"
mc:Ignorable="d"
x:Class="MyApp.App">
<Application.Resources>
<ResourceDictionary>
<!--Global Styles-->
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Color x:Key="NavbarBackground">Black</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource NavbarBackground}" />
<Setter Property="BarTextColor" Value="White" />
</Style>
<local:CustomTitleView x:Key="CustomTitleView"/>
<Style TargetType="ContentPage" x:Key="CustomTitle">
<Setter Property="NavigationPage.TitleView" Value="{StaticResource CustomTitleView}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
CustomTitleView.xaml
<ContentPage 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="BuildPro.Views.CustomTitleView">
<ContentPage.Content>
<StackLayout>
<Label Text="Hello world!" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
MyContentPage.xaml
<ContentPage 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="MyApp.Views.MyPage"
xmlns:vm="clr-namespace:MyApp.ViewModels"
Style="{StaticResource CustomTitle}" >
<ContentPage.BindingContext>
<vm:MyViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to the Xamarin-Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Update 2
I goofed up on the template for the title bar. Should have been a ContentView instead of ContentPage. Totally different class. Now this works:
CustomTitleView
<ContentView 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="MyApp.Views.CustomTitleView">
<ContentView.Content>
<StackLayout>
<Label Text="Hello world!" TextColor="AliceBlue" />
</StackLayout>
</ContentView.Content>
</ContentView>
You should add NavigationPage.TitleView in Xaml of each Detail Page (Usually Content Page), not in Xaml of MasterDetailPage.
Such as the Xaml of views:JobsPage can be modified as follow :
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="AppFormsMaster.Views.ItemsPage"
Title="{Binding Title}"
x:Name="BrowseItemsPage">
<NavigationPage.TitleView>
<StackLayout>
<Image Source="MyAppLogo.png" HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50" Aspect="AspectFill" />
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
//...
//Content of Content Page
//...
</ContentPage.Content>
</ContentPage>
Then it will show the NavigationPage.TitleView .
For xamarin shell it should be Shell.TitleView
<Shell.TitleView>
<StackLayout Margin="10,10,0,10" Orientation="Horizontal">
<Image
BackgroundColor="LightBlue"
HeightRequest="25"
WidthRequest="25" />
<SearchBar HorizontalOptions="FillAndExpand" />
<Image
BackgroundColor="LightYellow"
HeightRequest="25"
WidthRequest="25" />
</StackLayout>
</Shell.TitleView>
I am using Xamarin.Forms.Maps as a ContentPresenter of ControlTemplate.
When the control template is changed and move map to some area, the map has been reloaded with own initial position.
The buttons below my example code can change the control template.
Can it be resolved?
What do I do? please figure out.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
ControlTemplate = (ControlTemplate)Resources["main"];
}
void OpenSubTemplate_Clicked(object sender, EventArgs e)
{
ControlTemplate = (ControlTemplate)Resources["sub"];
}
void OpenMainTemplate_Clicked(object sender, EventArgs e)
{
ControlTemplate = (ControlTemplate)Resources["main"];
}
}
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
mc:Ignorable="d"
x:Class="MapTest.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="main">
<Grid>
<BoxView HeightRequest="50" Color="Blue" VerticalOptions="Start" />
<ContentPresenter />
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="sub">
<Grid>
<BoxView HeightRequest="50" Color="Red" VerticalOptions="Start" />
<ContentPresenter />
</Grid>
</ControlTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<maps:Map x:Name="myMap">
<x:Arguments>
<maps:MapSpan>
<x:Arguments>
<maps:Position>
<x:Arguments>
<x:Double>36.9628066</x:Double>
<x:Double>-122.0194722</x:Double>
</x:Arguments>
</maps:Position>
<x:Double>0.01</x:Double>
<x:Double>0.01</x:Double>
</x:Arguments>
</maps:MapSpan>
</x:Arguments>
</maps:Map>
<StackLayout Orientation="Horizontal" VerticalOptions="End">
<Button Text="Sub" BackgroundColor="Red" Clicked="OpenSubTemplate_Clicked" HorizontalOptions="FillAndExpand" />
<Button Text="Main" BackgroundColor="Blue" Clicked="OpenMainTemplate_Clicked" HorizontalOptions="FillAndExpand" />
</StackLayout>
</Grid>
</ContentPage>
I test it. I found this issue just happened in the Map controls. If we used Button Entry or Image, all of them will not reload, when change the control template. Here are two running GIF.
used Button Entry or Image
used map
If you still want to achieve this result, my workaround is not use this ControlTemplate. Just use Gird to put control. Updating the location by map API.
Here is running gif.
Here is my layout.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*" />
<RowDefinition Height="0.8*" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<BoxView x:Name="MyBoxView" HeightRequest="50" Color="Red" VerticalOptions="Start" Grid.Row="0"/>
<!--<ContentPresenter Grid.Row="1" />-->
<maps:Map x:Name="myMap" Grid.Row="1" >
<x:Arguments>
<maps:MapSpan>
<x:Arguments>
<maps:Position>
<x:Arguments>
<x:Double>36.9628066</x:Double>
<x:Double>-122.0194722</x:Double>
</x:Arguments>
</maps:Position>
<x:Double>0.01</x:Double>
<x:Double>0.01</x:Double>
</x:Arguments>
</maps:MapSpan>
</x:Arguments>
</maps:Map>
<StackLayout Orientation="Horizontal" VerticalOptions="End" Grid.Row="2">
<Button Text="Sub" BackgroundColor="Red" Clicked="OpenSubTemplate_Clicked" HorizontalOptions="FillAndExpand" />
<Button Text="Main" BackgroundColor="Blue" Clicked="OpenMainTemplate_Clicked" HorizontalOptions="FillAndExpand" />
</StackLayout>
</Grid>
Here is my background code.
void OpenSubTemplate_Clicked(object sender, System.EventArgs e)
{
MyBoxView.Color=Color.Red;
myMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(47.6368678, -122.137305), Distance.FromMiles(1.0)));
}
void OpenMainTemplate_Clicked(object sender, System.EventArgs e)
{
MyBoxView.Color = Color.Blue;
myMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(36.9628066, -122.0194722), Distance.FromMiles(1.0)));
}
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
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.