I want to bring a search tab on top of a tabbed page in Xamarin Forms. This is the UI I want to implement.
As you can see a search bar on top of tab vendor name and product/service. I don't know how to implement it. I have tried this code
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:RestaurantApp"
x:Class="RestaurantApp.SearchTabbedPage"
NavigationPage.HasNavigationBar="False">
<ContentPage>
<StackLayout>
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Padding="5">
<Label TextColor="#606060" FontSize="Large" Text="EXPLORE"
HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<BoxView Color="#E0E0E0" WidthRequest ="80" HeightRequest="1"/>
<Frame CornerRadius="10" Padding="0" OutlineColor="DarkGray" HasShadow="True" HorizontalOptions="Fill" Margin="10,0,10,0" VerticalOptions="Center">
<pages:searchTab x:Name="searchBar" Placeholder="Search" PlaceholderColor="Black" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Center" />
</Frame>
</StackLayout>
</ContentPage>
<TabbedPage.Children>
<NavigationPage Title="VENDOR NAME">
<x:Arguments>
<pages:TabbedPageExampleTab1 />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="PRODUCT/SERVICE">
<x:Arguments>
<pages:TabbedPageExampleTab2 />
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
But it created one more tab. I don't know how to implement this. And I'm not getting any solution for this. Any suggestions?
Note:
I have the code for navigation tab title and bottom navigation bar. And I want to keep them common for both the tabbed page. So it has to be implemented in the same way as the search tab.
You can't add a (Content)Page inside a (Tabbed)Page. You have to change your layout, so you have a ContentPage and inside of it, you add a Label (Header "Explore"), SearchBar, Custom Tabs (not TabbedPage) with Lists...
For Tabs you can use either your custom layout build with buttons which change visibility of the Lists, or you can use some fancier existing solutions like TabView from Telerik, or Segmented Bar Control by Rendy.
UI Tips: From UI perspective your mockup could be a little better if you have one TabbedPage with 4 Children:
Near Me
Search - if the user clicks on Add, you can dynamically change the Cart
Cart
Account
If you have the newest Xamarin Forms nuget package (from 3.1), you can add tabs on the bottom.
TabbedPage can accept content page as only children.
If you want to add search view on top of navigation bar this article can help you https://www.linkedin.com/pulse/xamarin-forms-contentpage-searchbar-navigation-bar-vipin-mathews
Related
I'm working on Xamarin Project and I don't need navigation bur, I switched it off but now I cant move app content of page
<?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:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:imgExt="clr-namespace:GulfStar.Xamarin.Extensions"
x:Class="GulfStar.Xamarin.Views.StatusPickerPage"
NavigationPage.HasNavigationBar="False">
<StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Start" >
<Image Source="{imgExt:ImageResource GulfStar.Xamarin.Images.Icon.png}" WidthRequest="70" HeightRequest="70"/>
<Label HorizontalOptions="Center" Margin="0,17,0,0" FontSize="Title">GSI Accountability</Label>
</StackLayout>
</StackLayout>
</ContentPage>
I figured out who it happen
How to remove blue section
Use NavigationPage.SetHasNavigationBar(this, false); to hide the navigation bar.
I figured out how to make that thing disappears
when you navigation to some page does not use Navigation page NavigationService.NavigateAsync("NavigationPage/StatusPickerPage");
Use
NavigationService.NavigateAsync("StatusPickerPage");
And it would not track navigation and its not needed if you have only two pages
I am trying to implement Flyout in Xamarin forms. All the references that I have got are of shell.Flyout but none of them are fulfilling my requirements.
I am showing some data in a ListView and on the click of any perticular item I want the Flyout to open as shown in the mockup.
Please suggest any supporting library or control in Xamarin.
You can try and add it for each item then control the IsVisible attribute
something like this in your Listview item template
<FlexLayout Direction="Row" HorizontalOptions="CenterAndExpand">
<StackLayout FlexLayout.Basis="40%">
<Label Text="Item"
HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout FlexLayout.Grow="1" Padding="5">
<Frame IsVisible="True">
<!--Your Flyout here-->
</Frame>
</StackLayout>
</FlexLayout>
But that means you have to manage them in the back code your self
changing the IsVisible attribute on the Flyout when an item of the list is clicked
I created a page in Xamarin.Forms that should display some items, coming from an IList data source, and a video after them.
List of items will be displayed using ListView. The video is displayed using VideoView.
This is the actual page 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:mm="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"
x:Class="MyApp.Views.ItemDetailPage"
Title="{Binding Title}">
<ScrollView>
<StackLayout Orientation="Vertical" Padding="15">
<ListView
ItemsSource="{Binding Item.Properties}"
HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Label Text="{Binding .}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<mm:VideoView x:Name="MyVideo" WidthRequest="320" HeightRequest="190" HorizontalOptions="FillAndExpand" />
<Button x:Name="BtnPlayStop" Text="Iniciar" Clicked="PlayStop_Clicked" BackgroundColor="Silver" TextColor="White"/>
</StackLayout>
</ScrollView>
</ContentPage>
The problems I have when I run the app are:
The page initially appears scrolled down so that the video is initially seen.
The space between the last element of the list view and the video is very big
It´s difficult to do the scroll up or down by using the finger.
Is my XAML code correct? what changes can I apply to fix this weird behaviour?
EDIT: I have found that between the listview and video is nothing. That is why it is difficult to scroll. If I place the finger inside the list view, I can scroll, the same if I place the finger inside the video or button. But if I place the finger between the list view and the video no scroll is performed. Weird, isn't it?
Thanks
Jaime
Finally, I have used solution in this page: https://xamarinsharp.com/2017/05/16/listview-height-issue-in-xamarin-forms-how-to-solve-it/
Basicly, it is to set the HeightRequest of the ListView in code behind according to the number of bound elements.
Regards
Jaime
I've inherited a Xamarin project and am not sure why I'm seeing this behavior when trying to work with a CarouselPage.
Using the Prism NavigationService, if I navigate to the carousel page as the "base page", it shows fine, but if I navigate to it as a "sub page" (to push it on the navigation stack?) it doesn't show, though I get no errors.
The problem is that using the navigation method that works doesn't provide me with a back button.
Example:
// this works, but no back button
await _navigationService.NavigateAsync("file:///MenuMasterDetailPage/MenuNavigationPage/MyCarouselPage");
// this doesn't, have back button but no content is shown
await _navigationService.NavigateAsync("MyCarouselPage");
I'm unsure how the master/detail/navigation stuff really works: not sure if my issue is there or if there's something special about a CarouselPage that prevents it from being rendered in the second case.
The MyCarouselPage is as simple as can be while I try to get this to work:
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage 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"
x:Class="Views.ImageCarouselPage"
effects:BackgroundImageEffect.BackgroundImage="Resources.SignInBackground.png">
<ContentPage>
<StackLayout VerticalOptions="FillAndExpand">
<Image Source="https://s3.amazonaws.com/blah.jpg" Aspect="AspectFit" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout VerticalOptions="FillAndExpand">
<Image Source="https://s3.amazonaws.com/blah.jpg" Aspect="AspectFit" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
</CarouselPage>
(I should note that the background image does display, but the contents of the carousel does not).
Any ideas? Thanks.
I want to design a UI for tablets (Android & iOS) with Xamarin.Forms where I want to have multiple ContentPages on one screen. I know how to achieve this for Android by using Fragments (afaik for iOS it's UISplitViewController).
How can I achieve this with Xamarin.Forms?
P.s. I definitely don't want a TabbedPage!
As far as I know you can't put multiple ContentPage items on the screen, at least not within the out-of-the-box Xamarin.Forms.
You can, however, put multiple ContentView items on the screen and you can reuse the ContentView items in stand-alone pages as well.
Essentially you can describe what you'd want to see on a single page as a ContentView and then make a page that just includes that
PhotoItem.xaml:
<ContentView>
<Grid>
<Image Source="{Binding MyImageSource}"/>
</Grid>
</ContentView>
PhotoBucket.xaml:
<ContentPage xmlns:local="namespace;assembly">
<ContentPage.Content>
<OnIdiom x:TypeArguments="View">
<OnIdiom.Phone>
<ListView>
... on list item tap do Navigation.PushAsync(new PhotoItemPage{BindingContext = itemTapped} );
</ListView>
</OnIdiom.Phone>
<OnIdiom.Tablet>
<Grid> // Add two columns
<ListView Grid.Column="0">
... on list item tap do PhotoItem.BindingContext = itemTapped
</ListView>
<local:PhotoItem Grid.Column="1"/>
</OnIdiom.Tablet>
</OnIdiom>
</ContentPage.Content>
</ContentPage>
PhotoItemPage.xaml:
<ContentPage xmlns:local="namespace;assembly">
<local:PhotoItem>
</ContentPage>
You can't have multiple pages, use content views for it. Or custom renderers