Xamarin Style IndicatorView to look like TabbedPage - xaml

I have a problem. I recently had this problem: Xamarin forms Add button in TabbedPage, but that is fixed using the accepted anwser. In short, I am using a CarouselView and an IndicatorView, so I can have an overlay over multiple screens. Both the views replace my TabbedPage, but the IndicatorView needs to look like the TabbedPageBar. The only good page about styling an IndicatorView was this one: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/indicatorview.
Here is the page I have:
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Padding="0"
Spacing="0">
<IndicatorView x:Name="indicatorView">
<IndicatorView.IndicatorTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand">
<Frame Margin="10">
<Label/>
</Frame>
</StackLayout>
</DataTemplate>
</IndicatorView.IndicatorTemplate>
</IndicatorView>
<CarouselView ItemTemplate="{StaticResource templateSelector}"
IndicatorView="indicatorView">
<CarouselView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
</x:Array>
</CarouselView.ItemsSource>
</CarouselView>
</StackLayout>
Now how can I let the IndicatorView look like a TabbedPageBar?

I think the key point here is remove the Shadow and CornerRadius of Frame, then you can customize the layout in the Frame. Here is an example:
<IndicatorView x:Name="indicatorView" >
<IndicatorView.IndicatorTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand" Spacing="0">
<Frame HasShadow="False" CornerRadius="0">
<StackLayout Orientation="Vertical">
<Image Source="Images"/>
<Label Text="123" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</IndicatorView.IndicatorTemplate>
</IndicatorView>

Related

Fit Image inside the frame XAML

I do have the following XAML code. And the output is as shown below in the picture. How can I achieve to fill the image within its grid in the frame? Thank you for your help.
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10,20,10,0">
<Frame
Margin="5"
BackgroundColor="AntiqueWhite"
CornerRadius="20"
HasShadow="True"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
I would make use of StackLayout with something like this
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Frame
Margin="10,20,10,20"
Padding="0"
BackgroundColor="AntiqueWhite"
HasShadow="False"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<Frame
Padding="0"
CornerRadius="20"
HasShadow="True"
IsClippedToBounds="True">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
<StackLayout
Grid.Row="1"
Margin="10"
Orientation="Vertical">
<Label Text="Any label if you want here" />
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>

In UWP show selected item in Flex layout for Xamarin.forms

I am showing a list in FlexLayout by BindableLayout. I want to show some background color when someone selected an item. It seems really difficult in UWP.
<FlexLayout x:Name="FlexTypes" Wrap="Wrap" Margin="0" HorizontalOptions="FillAndExpand" BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HeightRequest="120" WidthRequest="150">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference Page}, Path=BindingContext.AddItemCommand}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Frame Margin="5" Padding="0" CornerRadius="10" BackgroundColor="#f1f5fb" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,20,0,0">
<Label Text="{Binding Name}" FontAttributes="Bold" HorizontalOptions="CenterAndExpand"/>
<Frame BackgroundColor="#ffffff" Padding="0" HeightRequest="30" WidthRequest="50" VerticalOptions="EndAndExpand" Margin="20">
<Label Text="{Binding Price, StringFormat='₹ {0:N}'}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
I am showing a list in FlexLayout by BindableLayout. I want to show some background color when someone selected an item.
For your requirement, we suggest handle it within TapGestureRecognizer Tapped event and make a previous value to record clicked item. Then set it background color as default when next item click. For more please refer the following sample code.
private Layout previous;
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
if (previous != null)
{
previous.BackgroundColor = Color.White;
}
var stacklayout = sender as Layout;
stacklayout.BackgroundColor = Color.Red;
previous = stacklayout;
}
Xaml
<FlexLayout
x:Name="FlexTypes"
Margin="0"
HorizontalOptions="FillAndExpand"
Wrap="Wrap">
<BindableLayout.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
</x:Array>
</BindableLayout.ItemsSource>
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HeightRequest="120" WidthRequest="150">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
<Label Text="{Binding}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>

Button escapes stacklayout on lower resolution

Here is a screenshot of the problem (Left= Xamarin.Forms previewer; Right= ADV 768x1080)
Code:
<Frame BackgroundColor="#292929" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" CornerRadius="4" Padding="0">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="5">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Tomato">
<Label FontSize="Small" Text="ABBONAMENTO 30 giorni" TextColor="White"/>
<Label FontSize="Small" Text="€10,99" HorizontalOptions="EndAndExpand" TextColor="#ff9900"/>
</StackLayout>
<Button HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Text="ISCRIVITI" TextColor="#eeeeee" BackgroundColor="#FF9900" CornerRadius="4"/>
</StackLayout>
</Frame>
The frames are put in a StackLayout, which parent is a Grid.
The problem persists on low resolution devices only.
Can you tell me why is this happening, and how to fix it?
I need this layout to be height-aware and responsive.

Set platform specific control to only one platform in xamarin forms

I have a page that contains a listview and Search bar control. There is a custom listview for android. My code as following:
<ContentPage.Content>
<ContentView>
<OnPlatform x:TypeArguments="View">
<OnPlatform.iOS>
<StackLayout Spacing="0">
<SearchBar x:Name="IosSearch"
Placeholder="Search"
TextChanged="IosSearchBar_OnTextChanged"
SearchButtonPressed="OnSearch" BackgroundColor="#19588F">
</SearchBar>
<ListView x:Name="EmpListViewIos"
ItemsSource="{Binding EmpModel.GroupedItems}"
ItemSelected="OnItemSelected"
SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="8">
<StackLayout Spacing="4" Orientation="Horizontal">
<Label Text="{Binding FullName}" FontSize="15" TextColor="Gray" LineBreakMode="NoWrap"/>
</StackLayout>
<StackLayout Spacing="4" Orientation="Horizontal">
<Label Text="{Binding Department}" FontSize="Small" TextColor="#F68933" LineBreakMode="WordWrap"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</OnPlatform.iOS>
<OnPlatform.Android>
<StackLayout x:Name="androidListView">
<SearchBar x:Name="DroidSearch"
Placeholder="Search"
TextChanged="DroidSearchBar_OnTextChanged"
SearchButtonPressed="OnSearch" BackgroundColor="#19588F">
</SearchBar>
<local:CustomListView x:Name="customListView"
Items="{Binding EmpModel.Items}"
VerticalOptions="FillAndExpand" MyListItemSelected="nativeListView_ItemSelected"
SeparatorColor="Black">
</local:MyListView>
</StackLayout>
</OnPlatform.Android>
<OnPlatform.WinPhone>
<StackLayout Spacing="0">
<SearchBar x:Name="WinSearch"
Placeholder="Search"
TextChanged="WinSearchBar_OnTextChanged"
SearchButtonPressed="OnSearch" BackgroundColor="#19588F">
</SearchBar>
<ListView x:Name="EmpListViewWin"
ItemsSource="{Binding EmpModel.GroupedItems}"
ItemSelected="OnItemSelected"
SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="8">
<StackLayout Spacing="4" Orientation="Horizontal">
<Label Text="{Binding FullName}" FontSize="15" TextColor="Gray" LineBreakMode="NoWrap"/>
</StackLayout>
<StackLayout Spacing="4" Orientation="Horizontal">
<Label Text="{Binding Department}" FontSize="Small" TextColor="#F68933" LineBreakMode="WordWrap"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</OnPlatform.WinPhone>
</OnPlatform>
</ContentView>
</ContentPage.Content>
</ContentPage>
As the representation of data is different due to that I am required custom listview for android according to it's layout defined. The above code works fine. The only problem is the redundancy, the search bar control is common for all platform but when I put the search bar control above the <ContentView> it doesn't work throws exception. Similarly the ListView is common for ios and windows only there is custom listview for android but I am forced to repeat the code for windows also same as android.
Can anyone suggest a more efficient way to achieve this. How can I apply platform specific condition only for android and common for windows and ios.
You could share the iOS and WinPhone views using a static resource:
<ContentPage>
<ContentPage.ResourceDictionary>
<StackLayout x:Key="iosOrWpView">
...
</StackLayout>
</ContentPage.ResourceDictionary>
<ContentView>
<OnPlatform x:TypeArguments="View" iOS="{StaticResource iosOrWpView}"
WinPhone="{StaticResource iosOrWpView}">
<OnPlatform.Android>
<StackLayout x:Name="androidListView">
...
</StackLayout>
</OnPlatform.Android>
</OnPlatform>
</ContentView>
<ContentPage>

Xamarin Forms stacklayout fill screen on landscape

How can I do stacklayout take all screen width when device is in Landscape?
in Landscape mode stacklayout does not fill parent
here is my 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:local="clr-namespace:ListView"
x:Class="ListView.MainPage">
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="Silver" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" BackgroundColor="Maroon" VerticalOptions="StartAndExpand">
<Button Text="Reload data" Clicked="reloadData" x:Name="btnReload"/>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee" Orientation="Vertical">
<StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand">
<Image Source="{Binding Imagen}" HeightRequest="100" WidthRequest="120"/>
<Label Text="{Binding Titulo}" TextColor="Gray"/>
<Label Text="{Binding Fecha}" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<ActivityIndicator BackgroundColor="Green" AbsoluteLayout.LayoutBounds=".5,.5,.2,.2" AbsoluteLayout.LayoutFlags="All" Color="Blue"
IsRunning="True" IsVisible="False" x:Name="overlay"/>
</AbsoluteLayout>
</ContentPage.Content>
I want stacklayout take screen width on landscape; but only on portrait is work.
When controls are direct children of an AbsoluteLayout setting HorizontalOptions and VerticalOptions has no effect. All of the sizing must come from setting AbsoluteLayout.LayoutBounds and AbsoluteLayout.LayoutFlags. So try changing your StackLayout to this:
<AbsoluteLayout BackgroundColor="Silver"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="Maroon"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
...
Then you also may need to set your ListView.HorizontalOptions to FillAndExpand but try without that first.