Is there any way to add background Image on navigationbar page by page on xamarin forms?
The would need to write a custom render to change the background of the navigation bar. This is simply because the navigation bar does not have an option to change the background image.
https://books.google.co.uk/books/about/Xamarin_Forms_Solutions.html?id=wvt9DwAAQBAJ&printsec=frontcover&source=kp_read_button&redir_esc=y#v=onepage&q&f=false
There's a good very brief section about how to write custom renders is this ^ book (you can even find it in the preview without purchasing it).
An alternative solution would be to create a custom banner at the top of the page
https://forums.xamarin.com/discussion/126227/customizing-navigation-bar-or-action-bar-in-xamarin-forms[As mentioned in this answer2
<ContentPage NavigationPage.HasNavigationBar="false">
<StackLayout VerticalOptions="Start"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="10,5,10,5>
<Image HorizontalOptions="StartAndExpand" source="yourimage.png"/>
<Label HorizontalOptions="CenterAndExpand" Text="ALL"/>
<Image HorizontalOptions="EndAndExpand" source="yourimage.png"/>
</StackLayout>
<StackLayout>
<!-- Place your code for page body-->
</StackLayout>
</ContentPage>
I've copied the code into here for simplicity and reference. This solution removes the navigation bar and allows you to create a custom banner on each page in XAML. In here you can change the layout as you please.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
i would like to achieve something like this
The YELLOW part should be scrollable up/down and should drag the rest of the page with it. meaning i can hide it if i scroll up and leave the rest of the page displayed
BLUE part should be selectable, and contents of it should be displayed on the RED part (side scrolling)
-Ive looked on the net on the net and considered tabbed pages, but tabbed pages cant have headers
-Im considering carousel view inside a stack layout but im still constructing a POC for it.
maybe somebody here has done it using xamarin.forms.
Can somebody point me out to what controls can i use to achieve this in xamarin.forms? thank you!
I would achieve that with Sharpnado tabs https://github.com/roubachof/Sharpnado.Tabs (for tabs only) or https://github.com/roubachof/Sharpnado.Presentation.Forms (for all Sharpnado goodness).
You could use some third-party Nuget, you can look at TabView.
Install Xam.Plugin.TabView nuget.
Initialize the CarouselView plugin first before using TabView in your iOS and Android projects.
For example in Android(ios is similar to this):
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
CarouselView.FormsPlugin.Android.CarouselViewRenderer.Init();
}
}
use in your page.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:tabview="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
x:Class="xxxx">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<StackLayout HorizontalOptions="FillAndExpand" HeightRequest="200">
<Image Source="bd_logo1.png"></Image>
</StackLayout>
<tabview:TabViewControl
HeaderBackgroundColor="White"
HeaderSelectionUnderlineColor="Transparent"
HeaderTabTextColor="Black"
HeaderTabTextFontAttributes="Bold"
HorizontalOptions="FillAndExpand"
IsSwipeEnabled="True"
TabHeaderSpacing="100"
VerticalOptions="FillAndExpand">
<tabview:TabViewControl.ItemSource>
<tabview:TabItem HeaderText="About">
<Image
Aspect="AspectFit"
HorizontalOptions="CenterAndExpand"
Source="pic.png"
VerticalOptions="CenterAndExpand" />
</tabview:TabItem>
<tabview:TabItem HeaderText="Photos">
<Label
FontSize="Large"
HorizontalOptions="Center"
Text="Hello There!"
VerticalOptions="Center" />
</tabview:TabItem>
<tabview:TabItem HeaderText="Albums">
<ListView>
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
<x:String>monotouch</x:String>
<x:String>monorail</x:String>
<x:String>monodevelop</x:String>
<x:String>monotone</x:String>
<x:String>monopoly</x:String>
<x:String>monomodal</x:String>
<x:String>mononucleosis</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
</tabview:TabItem>
</tabview:TabViewControl.ItemSource>
</tabview:TabViewControl>
</StackLayout>
</ContentPage.Content>
</ContentPage>
If you don't want to use the third-party nuget,you could use a StackLayout with three Label and a CarouselView to achieve it,
Something like:
<ScrollView Orientation="Vertical">
<StackLayout Orientation="Vertical">
<Image ...></Image>
<StackLayout Orientation="Horizontal">
<Label Text="About"></Label>
<Label Text="Photos"></Label>
<Label Text="Albums"></Label>
</StackLayout>
<CarouselView x:Name ="carouseview">
...
</CarouselView>
</StackLayout>
</ScrollView>
then add the click event to the Labels,and call carouseview.ScrollTo(position) to navigate to the relative page.
Note:it's just an idea, and you have to do it yourself.You also could use colletionview instead of the StackLayout above as a tab,then handle its SelectionChanged event and let carouseview scroll to the relative page.
I'm new to Xamarin and would like to know where to start with this.
I have a need to make a Xamarin Forms custom Entry. That Entry needs an Icon and a border with rounded corners and a place holder label. This is a mock up of what is needed:"
The Behavior is that the Text "Input" will show the placeholder text until the user starts typing then the "Label" will appear with the text form the place holder. So the "Label" will be hidden until the user starts typing.
(with placeholder text)
So is it possible to build this Entry without a custom entry renderer? How would would put the label in a custom renderer if needed.
I would apprentice any help in getting started with this.
You could roll this yourself, but someone else has already done all the hard work for you. Take a look at the Xfx.Controls library. The XfxEntry looks to be exactly what you're looking for. All you need to do is:
Grab the nuget package, and install it in your main and platform projects.
Make sure that you initialize the library in your Android and iOS projects.
At the top of the xaml page it's going to be used in, import the library in with something like xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls".
Use the control, with something like:
<xfx:XfxEntry Placeholder="Email"
Text="{Binding Email}" />
After that you would need to create your own custom control and place the control in it. To get the rounded corners, you'll want your control to inherit from frame. This might look something like
<Frame x:Class="App1.MyCustomEntry"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
BorderColor="LightBlue"
CornerRadius="15" HorizontalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="email.png" />
<xfx:XfxEntry Grid.Column="1" Placeholder="Email*" />
</Grid>
Notice the BorderColor and CornerRadius properties. Also, if you just add a new content view, you'll need to change the code behind file to inheriate from Frame: public partial class MyCustomEntry : Frame.
From there, it's a simple matter of inserting the control into your page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1"
x:Class="App1.MainPage">
<local:MyCustomEntry VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>
This should give you something like:
You can tweak the layout options as needed.
in a UWP application I have a button its Background property is set to "DeepPink", but whenever I hover my mouse over it, it changes to gray (the default color),
here is my code:
<Button Content="Hello World" Margin="100,0,0,0" Background="DeepPink"/>
Am I missing something??
That only defines the default state of the button, not the hover state.
You can either create a custom control template (you can see an example here), or go the easy way of changing colors with Lightweight styling - I'd recommend the second!
The best alternative would be to create Buttons like UI using Frame and Label. In this case, the background color will remain the same.
Example:
<Frame Padding="8" WidthRequest="100" HasShadow="False" BorderColor="Gray"
HorizontalOptions="Center">
<Label Text="Button" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
I am trying to display data using carousel view in my forms application. I am not sure what am I missing but data is not getting populated, I have followed almost all available samples but still I have not found any success. Please help me get out of this problem:
I am using the following code in my xaml file:
<forms:CarouselView x:Name="listview" ItemsSource="postIdList" HeightRequest="200" Margin="5">
<forms:CarouselView.ItemTemplate>
<DataTemplate>
<ContentPage >
<StackLayout >
<Label Text="{Binding .}" FontSize="20" TextColor="Black" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</DataTemplate>
</forms:CarouselView.ItemTemplate>
</forms:CarouselView>
And I am trying to populate the data in the following manner in .cs file:
List<string> postIdList = new List<string>
{
"Carousel", "Carousel", "carousel"
};
listview.ItemsSource = postIdList;
If I give a background colour for carousal view I am able to see that colour, but text is not getting displayed.
Please let me know my mistake.
In case of a ListView, you need an ObservableCollection instead of a List. Switch it around and see if it works?
On your XAML you are defining a <ContentPage> inside the <Datatemplate>. Replace the <ContentPage> with a <ViewCell> or a <Grid>
Here is a great example on how to use it, you need to keep in mind that CarouselView work like a ListView, it need to have a Datatemplate.
I'm experiencing a strange behaviour of ActivityIndicator in my XamarinForms project. The indicator loads up perfectly in WinPhone81 but not in the middle of the layout for the first time, but it works perfectly from the second time to infinity. Below is the code I used:
In XAML:
<StackLayout x:Name="blueBar" Padding ="0,0,0,0" Orientation ="Vertical"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
</StackLayout>
In CS:
ActivityIndicator loading = new ActivityIndicator();
blueBar.Children.Add(loading);
loading.IsRunning = true;
//some functions
blueBar.Children.Remove(loading);
Does any knows why its behaving like this ?!
Any suggestions/guide/help will be appreciated..!!
Thanks in advance.
Note: The ActivityIndicator works well and fine in Droid & iOS projects.
Output: as I'm experiencing
1.First time execution of the page:
2.Second time execution of the same page:
Output: as per -Chandresh Khambhayata
Thanks for helping me out guys...
I Finally figured out an answer for my question...
Here is the working code of mine (on all the three platforms).
XAML :
<StackLayout x:Name="blueBar" Padding="0,0,0,0" Orientation="Vertical" VerticalOptions="FillAndExpand" >
<ActivityIndicator x:Name="loading" IsRunning="true"></ActivityIndicator>
</StackLayout>
CS :
somebtn.Clicked += async(sender,e) => {
loading.IsVisible = true;
//some await functions like api call or something
loading.IsVisible = false;
}
The actual problem is., the Indicator is not allocated by InitializeComponent() before., so when I click any of the button for the first time., Indicator displays to the left of the layout.
But., now the Indicator is initialized by InitializeComponent()., and so the indicator is displaying in the middle for the first click itself...
Note : This problem only occured on windowsphone only not on ios and android projects.
Now the updated code works well and good on all the three platforms.
if you want to display ActivityIndicator in center of the screen then you most have to apply HorizontalOptions="Center" and VerticalOptions="Center"
I am using the below XML code and it's working perfect for me.
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ActivityIndicator Color="White" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Grid.Row="1" x:Name="LabelLoading" HorizontalOptions="Center" TextColor="White" Text="Loading..." FontFamily="Droid Sans Mono" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</StackLayout>
Here is programmatically setting activity indicator.
ActivityIndicator activityIndecator = new ActivityIndicator();
activityIndecator.Color = Color.White;
activityIndecator.HorizontalOptions = LayoutOptions.Center;
activityIndecator.VerticalOptions = LayoutOptions.Center;
blueBar.Children.Remove(activityIndecator);
Thank You.
it seems like you need to put your StackLayout inside a AbsoluteLayout first in order for you to adjust the ActivityIndicator to the middle.
This should link help you.
Haven't tried this yet, but it looks like you need to do a lot of stuff to achieve it.
Hope it helps!