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
Related
Usually in Xamarin forms, only active elements like Button, ImageButton receives the focus but not the passive elements like layouts and label elements. However in case of ListView or CollectionView, the templated items gets focused during key navigation. Any idea how this is feasible? Could someone navigate to the source code usage regarding this implementation?
How does a ListView item gets focused in Xamarin forms UWP?
The UWP native ListView is allowed XYFocusKeyboardNavigation by default, so you could navigation with the keyboard arrow keys. And here is document that you could refer.
And if you want enable for the control that in the specific panel container, you could enable XYFocusKeyboardNavigation like the following in uwp
<StackPanel Name="ContainerSecondary"
XYFocusKeyboardNavigation="Enabled"
TabFocusNavigation ="Cycle"
Orientation="Horizontal"
VerticalAlignment="Center"
BorderBrush="Red"
BorderThickness="2"
Padding="5" Margin="5">
<Button Name="B2"
Content="B2"
GettingFocus="Btn_GettingFocus"
Margin="5"/>
<Button Name="B3"
Content="B3"
GettingFocus="Btn_GettingFocus"
Margin="5"/>
<Button Name="B4"
Content="B4"
GettingFocus="Btn_GettingFocus"
Margin="5"/>
<Button Name="B5"
Content="B5"
GettingFocus="Btn_GettingFocus"
Margin="5"/>
<Button Name="B6"
Content="B6"
GettingFocus="Btn_GettingFocus"
Margin="5"/>
</StackPanel>
Unfortunately, Xamarin StackLayout does not contain such property, I have to say you may not implement in forms.
Im working with Xamarin for the first time, and I dont have any clue why this appears:
I have a ListView inside a RefreshView (which is new in Xamarin.Forms 3.2) and I want to specify a Footer for this ListView. This footer needs some margin, but the top and right margin arent applied on iOS, regardless of the Version or the (virtual) device model.
<RefreshView>
<ListView>
<ViewCell>
<local:Content_Card/>
</ViewCell>
<ListView.Footer>
<Frame
BorderColor="Green"
Margin="10,10,10,10"
CornerRadius="5">
<Label
Text="FooBar"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Frame>
</ListView.Footer>
</ListView>
</RefreshView>
The code above produces the following:
How can I get the footer aligned with the "cards" above, and also for them to have some spacing between the second card and the footer?
Thanks in advance!
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
In Xamarin Forms i want show multiple image (2) in a row: this is an example of what i'd like to do:
In many Q&A i've seen the use of XLabs gridview but the project is no longer maintained.
I think that i can create a custom cell with a stacklayout inside a row but the recycle policy work? And how can i handle the item tapped if i have two column per row?
Thanks
Alessandros answer should work, but if you want to roll something yourself without any third party controls, keep reading:
Recycling will still work if you use a Custom ViewCell. So I would suggest doing that and adding two items in a custom model and render them in one cell at a time.
Now for handling taps: Override the ItemSelected event on your ListView and set the ListView.SelectedItem to null. Then inside your custom ViewCell, add a TapGestureRecognizer to each of the separate models. One thing to note, is that the Command on your TapGestureRecognizer will bind to your individual list item, so you need to set it relative to the BindingContext of the ListView:
<ListView x:Name="MyListView" ...>
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal>
<Image ...>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference MyListView}, Path=BindingContext.Item1Command}"/>
</Image.GestureRecognizers>
</Image>
<Image ...>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference MyListView}, Path=BindingContext.Item2Command}"/>
</Image.GestureRecognizers
</Image>
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can take a look to this FlowListView.
I have never used it but sounds good.
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<Label HorizontalOptions="Fill" VerticalOptions="Fill"
XAlign="Center" YAlign="Center" Text="{Binding Title}"/>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
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