I'm trying to make a design like in the picture
But I don't know how to make tab buttons and tab process. I read microsoft's articles and watched a few videos.but none of them were as I wanted.I would be glad if you help
Yes, you can try to use Xamarin Community Toolkit TabView to achieve this just as Jason mentioned.
You can customize your tab to your needs.
Please refer to the following code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="MyLittleApp.MainPage">
<Grid>
<xct:TabView
TabStripPlacement="Bottom"
TabStripBackgroundColor="Blue"
TabStripHeight="60"
TabIndicatorColor="Yellow"
TabContentBackgroundColor="Yellow">
<xct:TabViewItem
Icon="triangle.png"
Text="Tab 1"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<Grid
BackgroundColor="Gray">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Icon="circle.png"
Text="Tab 2"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
</ContentPage>
Note:You can also check thread: Custom TabbedPage with buttons .
Related
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 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
Is there a way to achieve this entry plus an icon at xamarin forms, without going through platform specific effects/renders, cause right now in order to achieve this, I have implemented a platform effect for this. Please check the image link below:
EntryImage
EDIT1: Changed link
For anyone who is wondering how I used #Alessandro 's answer, here's how it is.
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Entry Placeholder="Test"
Text="Test"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
/>
<Image Source="test_image.png"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="1"
HorizontalOptions="End">
</StackLayout>
I think the best solution is to create a Grid with 1 rows and 2 columns.
In column 0 you add your Entry and in column 1 you add your icon. If you want you can set your Entry to occupy column 1 and 2
Entry with Icon at the right side
<StackLayout Orientation="Horizontal" Spacing="0">
<Entry IsPassword="True" HorizontalOptions="FillAndExpand"/>
<Image Source="icon.png" WidthRequest="50" HeightRequest="50"/>
</StackLayout>
I have a list of two ContentViews that have the PullToRefreshLayout plugin within them surrounding ScrollViews. I'm not sure what's going on, but when you pull to refresh, the refresh circle appears but the Refresh Command never gets hit nor does the refresh circle ever finish.
Here is my CarouselView
<cv:CarouselView
Margin="0, 0, 0, 0"
ItemsSource="{Binding ContentViews}"
Position="{Binding CarouselPosition}"
x:Name="ContentCarousel">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<ContentView Content="{Binding Content}"/>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
And here is an example of one of my ContentViews.
<ContentView.Content>
<controls:PullToRefreshLayout
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding BindingContext.RefreshReceivingCommand, Source={x:Reference Name=ReceivingContentView}}"
IsRefreshing="{Binding IsBusy}"
RefreshColor="#4ABDAC">
<ScrollView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Style="{StaticResource cardScrollViewBackgroundColor}">
<StackLayout
Padding="0,0,0,0"
VerticalOptions="StartAndExpand"
x:Name="MainStackLayout">
</StackLayout>
</ScrollView>
</controls:PullToRefreshLayout>
</ContentView.Content>
I'm honestly not sure what's going on. I have tried different binding contexts on the refresh command but the command is never hit. Any ideas is greatly appreciated!
EDIT: I sorta found a solution but not a huge fan.
I created an empty Constructor in my ViewModel that sets my Refreshing Commands. Then in the ContentView, I sent the BindingContext to the ViewModel. Seems redundant, but eh, works for now until I figure out the xaml binding.
I´m facing a bad performance using all sort of layouts (e.g. StackLayout, Grid) inside a ScrollView specifically on the WP SL platform. On the other platforms (Android and iOS) the performance is way better using the same layout. I´m using the latest stable version of Xamarin.Forms (2.3.1.114) at the moment. Has anyone faced this issue too?
Thanks.
UPDATE: Code sample added to better understanding. The layout itself is not complex.
<ScrollView>
<StackLayout BackgroundColor="Black" Padding="5" Spacing="20" >
<StackLayout>
<Label Text="User name:" />
<Label Text="{Binding LoggedInUser}" />
</StackLayout>
<StackLayout>
<Label FontSize="Medium" FontAttributes="Bold" TextColor="Gray" Text="Help" />
<BoxView HeightRequest="1" BackgroundColor="Gray" HorizontalOptions="Fill" />
<Label FontSize="Small" FontAttributes="Bold" TextColor="Gray" Text="Please, send an email to xxx#example.com" />
</StackLayout>
</StackLayout>
</ScrollView>