Add shadow to a Label - Xamarin.Forms - xaml

I would like to add drop shadow to a Label. This label is overlapped in the Page, like an always visible control that opens a filtering page.
Please find a gif attached with my screen:
Here's my XAML:
<!-- **** Filter button **** -->
<Label
Margin="0,0,10,10"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="End"
VerticalOptions="End"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontSize="30"
Style="{DynamicResource FilterAction}"
Text=""
BackgroundColor="{StaticResource ComplementColor}"
FontFamily="{x:Static artina:FontAwesome.FontName}"
TextColor="White">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding btn_open_filter_businesses_click}" />
</Label.GestureRecognizers>
</Label>
<templates:Badge
BadgeText="{Binding number_of_filters_selected}"
BadgeTextColor="White"
BadgeBackgroundColor="#1DBDFF"
HorizontalOptions="End"
VerticalOptions="End"
TranslationX="-4"
TranslationY="-4"
IsVisible="{Binding number_of_filters_selected, Converter={StaticResource filterVis}"
x:Name="filtersCountBagde">
<templates:Badge.GestureRecognizers>
<TapGestureRecognizer Command="{Binding btn_open_filter_businesses_click}" />
</templates:Badge.GestureRecognizers>
</templates:Badge>
I would like something like Gmail, find the example below:
Any help would be appreciated.

You can use Xamarin Effects to achieve a shadow on your button. There is a code sample that you can download here which should get you started:
Shadow Effect
It will involve creating platform-specific implementations for your shadow.
You could also try the idea put forward in this similar question.

Related

Stretch BindableLayout.ItemTemplate in Maui horizontally

I have a HorizontalStackLayout with elements in it added via the BindableLayout.Itemsource.
This is an example of what I mean:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackLayoutStretchTest.MainPage">
<VerticalStackLayout>
<HorizontalStackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Green">
<BindableLayout.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</BindableLayout.ItemsSource>
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
TextColor="White"
BackgroundColor="DarkBlue"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</HorizontalStackLayout>
<VerticalStackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Label Text="Text"
HorizontalTextAlignment="Center"
TextColor="Black"
BackgroundColor="White"/>
</VerticalStackLayout>
</VerticalStackLayout>
</ContentPage>
How can I make the Labels(Blue) FillAndExpand into the free space(Green)?
The Maui learn page says:
A HorizontalStackLayout only respects the alignment preferences on
child views that are in the opposite direction to the orientation of
the layout.
Is there a way to stretch the children, or what is the appropriate "container" for this use case?
Please be noted that it's a known issue that being tracked in [Bug] LayoutOptions Expand not work in HorizontalStackLayout and VerticalStackLayout . To be clear, the AndExpand options are deprecated, and are not supported in the new HorizontalStackLayout and VerticalStackLayout. As an alternative solution, you can achieve the same layout with a Grid. Or you can continue to use StackLayout for another choice.

Not able to close the popup on click event in Xamarin Forms

I have used Rg.Plugins.Popup.
I have aligned close button which is aligned at top right corner 50% outside the window from right and top side as shown in below image.
Now it is showing as per expected design but issue is when I tap on it, only inward part of close button get clicked and outward part is not clickable. So not able to close popup till the time we click that inward part of Close button.
I am sharing my code for more idea.
<ScrollView Orientation="Horizontal">
<AbsoluteLayout HorizontalOptions="Center"
VerticalOptions="Center"
Padding="0,0,0,0"
Margin="0,0,0,0"
Opacity="1">
<Frame AbsoluteLayout.LayoutBounds="0,0,1,1"
IsClippedToBounds="True"
AbsoluteLayout.LayoutFlags="All"
HasShadow="False"
x:Name="outframe"
Margin="0"
CornerRadius="15"
Padding="0"
OutlineColor="#ffffff"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal"
x:Name="stkVideo"
Padding="0">
<Image x:Name="ximage"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="#4A4541" />
<video:VideoPlayer x:Name="trainingPlayer"
DisplayControls="True"
FillMode="ResizeAspectFill"
FlowDirection="LeftToRight"
Volume="100"
Grid.Row="0"
IsVisible="false">
</video:VideoPlayer>
</StackLayout>
</Frame>
<ContentView AbsoluteLayout.LayoutBounds="0.50, 0.50, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional">
<Image Source="Play.png"
HeightRequest="{OnIdiom Phone=70,Tablet=85}"
WidthRequest="{OnIdiom Phone=70,Tablet=85}"
Aspect="AspectFit"
VerticalOptions="Center"
HorizontalOptions="Center"
x:Name="icnplay" />
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" />
</ContentView.GestureRecognizers>
</ContentView>
<ContentView AbsoluteLayout.LayoutBounds="1.04, -0.09, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional" >
<Image Source="close.png"
HeightRequest="{OnIdiom Phone=35,Tablet=45}"
WidthRequest="{OnIdiom Phone=35,Tablet=45}"
Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</ContentView.GestureRecognizers>
</ContentView>
</AbsoluteLayout>
</ScrollView>
What code changes do I need to do so that popup get close when user will click on Close button part which is outside the window as well?
The issue is the close button lies outside the bounds of the <AbsoluteLayout>. One solution involves a few steps:
Make the AbsoluteLayout larger by some amount
Add a margin to the video player Frame equal to how much larger the AbsoluteLayout was made
Update the position of the close button to remain in the top right corner of the video player Frame
Now the close button is contained within the AbsoluteLayout and the entire close button area will receive and raise events for taps/clicks.
I guess that you want to achieve this:
Clicking outside the yellow frame will close the everything.
The red part has a GestureRecognizer
You can achieve this by using a Grid or a Absolute layout, these views allow you to "stack" or add layers to the UI.
Code example:
<AbsoluteLayout
BackgroundColor="Green"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
<Button Clicked="Button_Clicked" Text="Coso" />
<Button Clicked="Button_Clicked_1" Text="Show popup" />
</StackLayout>
<Frame
x:Name="closeFrame"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Red"
IsVisible="false">
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
</Frame.GestureRecognizers>
</Grid>
<Frame
x:Name="popupGrid"
AbsoluteLayout.LayoutBounds="0.5,0.5,0.5,0.5"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Yellow"
IsVisible="false">
<Label Text="Close ouside this" TextColor="Black" />
</Frame>
</AbsoluteLayout>
In code behind you turn the visibile on/off of the element

Tabview is not displayed at the bottom

I am trying to create a TabView but although I try to insert it at the bottom, it continues to be displayed at the top
<xct:TabView TabStripPlacement="Bottom" IsSwipeEnabled="False" BackgroundColor="White">
<xct:TabViewItem
x:Name="Home"
Text="Home"
TextColorSelected="Black"
TextColor="Gray"
Icon="IC003.png">
</xct:TabViewItem>
<xct:TabViewItem
x:Name="Diario"
Text="Diario"
TextColorSelected="Black"
TextColor="Gray"
Icon="Smile.png">
</xct:TabViewItem>
</xct:TabView>
Try to wrap it inside a Grid like this:
<Grid RowDefinitions="*, Auto">
<!-- insert stuff here -->
<xct:TabView Grid.Row="2" TabStripPlacement="Bottom" IsSwipeEnabled="False" BackgroundColor="White">
</Grid>
I think that the TabStripPlacement does not mean that it will be placed on the bottom of the outer element.
TabStripPlacement is used to set the tab at bottom or top. https://learn.microsoft.com/zh-cn/xamarin/community-toolkit/views/tabview
We could put the tabview inside the layout like StackLayout, Grid and so on. But without layous, it still works. We just need to give some contents of the items.
<xct:TabView
BackgroundColor="White"
IsSwipeEnabled="False"
TabStripHeight="60"
TabStripPlacement="Bottom">
<xct:TabViewItem
x:Name="Home"
Icon="IC003.png"
Text="Home"
TextColor="Gray"
TextColorSelected="Black">
<StackLayout BackgroundColor="Gray">
<Label
HorizontalOptions="Center"
Text="TabContent1"
VerticalOptions="Center" />
</StackLayout>
</xct:TabViewItem>
<xct:TabViewItem
x:Name="Diario"
Icon="Smile.png"
Text="Diario"
TextColor="Gray"
TextColorSelected="Black">
<StackLayout>
<Label
HorizontalOptions="Center"
Text="TabContent2"
VerticalOptions="Center" />
</StackLayout>
</xct:TabViewItem>
</xct:TabView>

Show Password icon shortens entry field in xaml form

I've added a show password icon to my entry field to allow for password peaks. I have included the entry field and the image in the same StackLayout. It works exactly as it should except the entry field line is shortened to accommodate the image on the same horizontal plane. I want the entry line to extend to the edge of the screen and the password image to appear above it.
This is how it displays currently:
Here is the xaml snippet for the password entry field and image contained in a StackLayout
<StackLayout x:Name="passwordStack" Orientation="Horizontal">
<Entry
x:Name="passwordEntry"
HorizontalOptions="FillAndExpand"
IsPassword="True"
VerticalOptions="Center">
</Entry>
<Image
x:Name="passwordEye"
Source="show_password_icon"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="30"
HeightRequest="30">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ShowPassword" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
Use a Grid instead of an StackLayout:
<Grid>
<Entry
Grid.Row="0"
Grid.Column="0"
x:Name="passwordEntry"
HorizontalOptions="FillAndExpand"
IsPassword="True"
VerticalOptions="Center">
</Entry>
<Image
Grid.Row="0"
Grid.Column="0"
x:Name="passwordEye"
Source="show_password_icon"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="30"
HeightRequest="30">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ShowPassword" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
This way, the Image will overlay the Entry.
A problem about this is that Image will be displayed on top of text if the text is too long. So a better solution would be to build a custom control.

How to get FAB to float over WebView in Xamarin XAML

I'm trying to setup a XAML form definition which shows a WebView but which has a Floating Action Button over the bottom right.
If I use an AbsoluteLayout, the FAB appears correctly over the WebView. However, due to the Height/WidthRequest of the Webview, it is displayed at full size - the text disappears off the right side and doesn't wrap, so the page doesn't scroll.
<ContentPage ...snip... Title="Document">
<StackLayout Padding="5,5,5,5" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<WebView x:Name="webViewDocument" WidthRequest="1000" HeightRequest="1000" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.95,0.975,-1,-1"
Margin="10" />
</StackLayout>
</ContentPage>
If I use a StackLayout, the WebView sizes and scrolls correctly, however the FAB occupies a full width strip at the bottom of the screen and the text does not appear behind it - the WebView stops above it.
I've spent the last hour and a half trying every combination of nested Layout I can think of to solve this and just can't get it right - can some kind layout genius out there please tell me how I can solve this.
Thanks
Use a Grid and do not indicate rows or columns.
Something like this:
<Grid Padding="5,5,5,5"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<WebView x:Name="webViewDocument"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalOptions="End"
HorizontalOptions="Center"
HorizontalTextAlignment="End"
FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
VerticalOptions="End"
HorizontalOptions="End"
Margin="10" />
</Grid>
This should work for you.