i am new to xamarian app development. now this is my markup code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SmartEntry.DashBoard"
BackgroundColor="White"
Title="DASHBOARD"
NavigationPage.HasBackButton="False"
NavigationPage.HasNavigationBar="True">
<ContentPage.ToolbarItems>
<ToolbarItem Icon="logout_icon.png" Order="Primary" Priority="1" Clicked="ToolbarItem_Clicked"/>
</ContentPage.ToolbarItems>
and this is my view on android emulator :
---------------------------updated-----------------------------
How to remove upper header content with xamarian forms
If you want to remove the upper header content(the back button),you can set
NavigationPage.HasBackButton="False"
In this condition, the Title(DASHBOARD) will move to the left.
If you want to remove the back button and make the Title(DASHBOARD) display in the middle , then you can use Title View to achieve this.
Please refer to the following 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"
x:Class="FormApp118.TestPage2"
Title="DASHBOARD"
NavigationPage.HasBackButton="False"
NavigationPage.HasNavigationBar="True"
>
<NavigationPage.TitleView>
<StackLayout>
<Label Text="DASHBOARD" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" TextColor="White" FontSize="20" />
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.ToolbarItems >
<ToolbarItem Icon="cherry.png" Order="Primary" Priority="1" Clicked="ToolbarItem_Clicked"/>
</ContentPage.ToolbarItems>
<!-- other code-->
</ContentPage>
Related
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 need to create a standard layout which I can use on a number of pages, but pass in content which is shown inside... I'm having limited success...
Here's how I'm calling the custom control...
<?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:control="clr-namespace:myApp"
x:Class="myApp.MainPage">
<StackLayout>
<control:CustomPopupLayoutControl
BackgroundColor="LightGreen">
<control:CustomPopupLayoutControl.Content>
<Button Text="Hello" />
<!-- lots of other controls, buttons, labels etc, layout -->
</control:CustomPopupLayoutControl.Content>
</control:CustomPopupLayoutControl>
</StackLayout>
</ContentPage>
So you can see here I wan't to display some content..
Here's my custom control...
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myApp.CustomPopupLayoutControl"
x:Name="CustomPopupLayouts">
<ContentView.Content>
<StackLayout BackgroundColor="LightBlue" Margin="30">
<Button Text="Close" /><!-- important-->
<!-- lots of other layout -->
<StackLayout BackgroundColor="Red" x:Name="Inner">
</StackLayout>
</StackLayout>
</ContentView.Content>
</ContentView>
So I'd like to show my hello button inside the Inner stack layout, I'll also need binding to work...
So the final page should look like...
<page>
<StackLayout BackgroundColor="LightBlue" Margin="30">
<Button Text="Close" /><!-- important-->
<StackLayout BackgroundColor="Red">
<button text="Hello">
</StackLayout>
<StackLayout>
</page>
Since you had defined a Button in Custom Control , You just need to pass the Title that you want to display on the Button from ContentPage to Custom Control.
in CustomPopupLayoutControl.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myApp.CustomPopupLayoutControl"
x:Name="CustomPopupLayouts">
<ContentView.Content>
<StackLayout BackgroundColor="LightBlue" HeightRequest="450" Margin="30">
<Button HeightRequest="150" WidthRequest="80" Text="{Binding Source={x:Reference CustomPopupLayouts}, Path=ButtonTitle}" /><!-- important-->
<StackLayout BackgroundColor="Red" HeightRequest="300" x:Name="Inner">
</StackLayout>
</StackLayout>
</ContentView.Content>
</ContentView>
in CustomPopupLayoutControl.xaml.cs
Define a bindable property
public static BindableProperty ButtonTitleProperty =
BindableProperty.Create(nameof(ButtonTitle), typeof(string), typeof(CustomPopupLayoutControl),string.Empty);
public string ButtonTitle
{
get => (string)GetValue(ButtonTitleProperty);
set => SetValue(ButtonTitleProperty, value);
}
in ContentPage
You could set the title of button directly or use data binding .
<control:CustomPopupLayoutControl ButtonTitle = "Hello World!" BackgroundColor="LightGreen" / >
I've found a solution :)
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myapp.CustomPopupLayoutControl"
x:Name="CustomPopupLayouts">
<ContentView.ControlTemplate>
<ControlTemplate>
<StackLayout BackgroundColor="LightBlue" Margin="30">
<Frame CornerRadius="5" Margin="20" HasShadow="False"
BackgroundColor="Red">
<StackLayout>
<Button Text="Close"
Command="{TemplateBinding
Parent.BindingContext.NavigateCommand}" />
<!-- important-->
<ContentPresenter />
</StackLayout>
</Frame>
</StackLayout>
</ControlTemplate>
</ContentView.ControlTemplate>
</ContentView>
.
<?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:control="clr-namespace:myapp"
x:Class="myapp.MainPage">
<StackLayout>
<control:CustomPopupLayoutControl BackgroundColor="LightGreen">
<StackLayout>
<Button Text="Hello" Command="{Binding NavigateCommand}" />
<Button Text="Goodbye" />
</StackLayout>
</control:CustomPopupLayoutControl>
</StackLayout>
</ContentPage>
My xamarin android project does not have Drawawble folders under Resources, I haveI'm trying to set icon for a toolbar item in shared project. If I set an image as embedded resource I should be able to access it from the shared project, am I wrong
<?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="BoringAppUi.MainPage" Title="Main Page">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Logout" Clicked="OnLogoutButtonClicked" Order="Primary" Priority="0"/>
<ToolbarItem Text="Home" Icon="#mipmap/baseline_home_blue_48.png" Clicked="OnHomeIconClicked" Order="Primary" Priority="1"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout>
<Label Text="Main app content goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
You also need to create the Folder Resources and Drawable to add Images.
Link
<ContentPage.ToolbarItems>
<ToolbarItem Text="Logout" Clicked="OnLogoutButtonClicked" Order="Primary" Priority="0"/>
<ToolbarItem Text="Home" Icon="baselinehomeblue48.png" Clicked="OnHomeIconClicked" Order="Primary" Priority="1"/>
</ContentPage.ToolbarItems>
Here is xaml based code *<ToolbarItem Name="iconexample" Icon="icon.png" Priority="0" Order="Primary" Activated="Onclick" />*
and C# based code
new ToolbarItem () { Icon = "icon.png"}
I have a very simple xaml code but attribute local:Page simply doesn't work, when I type "local" it gets underlined as if there is an error.
MainPage.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:local="clr-namespace:Solution;assembly=Solution"
x:Class="Solution.MainPage">
<local:Listar Title="XXXX" />
</TabbedPage>
Listar.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:Solution;assembly=Solution"
x:Class="Solution.Listar">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
TabbedPage must contain child pages.
<TabbedPage.Children>
<local:Listar Title="XXX"/>
</TabbedPage.Children>
Try to use the following code
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Solution"
x:Class="Solution.MainPage">
<ContentPage Title="Main">
<ContentPage.ToolbarItems>
<ToolbarItem Text="xxx" Order="Primary"/>
</ContentPage.ToolbarItems>
<StackLayout>
//. . .
</StackLayout>
</ContentPage>
<local:Listar Title="XXXX" >
</TabbedPage>
I have a MasterDetailPage and I put a ToolbarItem in the parent controller, but it appears in the Detail as well. Any ideas why?
<MasterDetailPage.ToolbarItems>
<ToolbarItem Name="addMeterReading" Order="Primary" Icon="add.png" Text="Add Reading" Priority="0" Clicked="NewMeterReading_Clicked" />
</MasterDetailPage.ToolbarItems>
In you detail page, not in your master page. Add the following:
<?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.MyPage">
<ContentPage.ToolbarItems>
<ToolbarItem
Name="addMeterReading"
Order="Primary"
Icon="add.png"
Text="Add Reading"
Priority="0"
Clicked="NewMeterReading_Clicked" />
</ContentPage.ToolbarItems>
</ContentPage>