I am using the built in searchbar control in xamarin forms. It works fine for my implementation but I notice there is a small amount of whitespace on each side of the control. I see that i can modify margin to 0 but it does not change the whitespace. Here is what it looks like with a picker above it and a map below it:
Here is my xaml
<Picker x:Name="servicePicker" Title="Test" ios:Picker.UpdateMode="Immediately" HorizontalOptions="FillAndExpand">
</Picker>
<SearchBar Margin="0" Placeholder="Enter a zip code" TextChanged="Handle_TextChanged"></SearchBar>
<maps:Map Margin="0"
x:Name="MyMap"
IsShowingUser="true"
MapType="Hybrid"
/>
</StackLayout>
I dont see any option for padding, how can i get rid of the whitespace?
Maybe try setting your stacklayout spacing to zero?
<StackLayout Spacing="0">
...
</StackLayout>
Related
I need to insert an image inside a label in Xamarin forms.
Sample: "If you find this image <image.png> you win"
I tryied to convert my png to Font and use it as Span inside the label but I failed (I don't know how to use the ttf file in the span). Any other suggestion? I prefer to avoid html view
I would say the easiest solution is a GestureRecognizer
<StackLayout>
<Label Text="Click this image" />
<Image Source="tapped.jpg" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="Image1" />
</StackLayout.GestureRecognizers>
</StackLayout>
more info on https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/tap
I am developing an enterprise application using Xamarin.Forms. I am facing a memory leak issue in iOS specifically (working fine in Android).
Its regarding click over listview item header, I implemented gestures, then a transparent button as well, but it causes a memory leak - even if I comment out its functionality.
If I comment testbutton then its objects are disposing fine. What can I do to fix this issue?
```
<ListView
Style="{DynamicResource BaseListViewStyle}"
IsGroupingEnabled="True"
ItemsSource="{Binding Deliveries.ExpandedDeliveryItemModels}"
IsPullToRefreshEnabled="True"
IsRefreshing="{Binding Deliveries.IsRefreshing}"
RefreshCommand="{Binding RefreshCommand}"
SelectionMode="None">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell AutomationId="headerCell">
<StackLayout AutomationId="headerLayout" Orientation="Horizontal">
<Label Text="{Binding HeaderTitle}"
AutomationId="DeliveriesToday"
HorizontalOptions="StartAndExpand">
</Label>
<Button x:Name="testbutton"
HorizontalOptions="End"
Command="{Binding Source={x:Reference deliveriesPage}, Path=BindingContext.HeaderClickCommand}"
CommandParameter="{Binding .}">
</Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell AutomationId="deliveriesCell">
<Label Text="Testing"></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
```
Welcome to SO !
You can have a try with modifying CachingStrategy of ListView , there are three types of CachingStrategy value.
RecycleElement 1 Indicates that unneeded cells will have their binding contexts updated to that of a cell that is needed.
RecycleElementAndDataTemplate 3 Indicates that, in addition to the behavior specified by RecycleElement, DataTemplate objects that are selected by a DataTemplateSelector are cached by the data template type.
RetainElement 0 Indicates that for every item in the List View's ItemsSource property, a single unique element will be constructed from the DataTemplate.
The deflault value is RetainElement, the behavior is to retain item data in their generated cells when they are not needed.
For performance reasons, it is likely that the default behavior will be changed to RecycleElement in a future release. In the meantime, for memory and performance reasons, app developers should specify RecycleElement when constructing a new List View.
Therefore , you can modify code as follow :
<ListView CachingStrategy="RecycleElement" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- ... -->
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
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
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>