How do I to manipulate StackLayout to visible true or false? - xamarin

I am trying to manipulate a stacklayout but I cannot getting its name on controller to change it visible or not. How can I do that, is it works on Xamarin ?
Trying
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" Padding="2">
<StackLayout HorizontalOptions="FillAndExpand">
<Label Text="Compre agora seu número da sorte"
FontSize="Small"
TextColor="Gray"
FontAttributes="Bold"
HorizontalOptions="CenterAndExpand"
/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand">
<Label Text="Concurso" FontAttributes="Bold"></Label>
<Label x:Name="idConcurso"></Label>
<Label Text="Prêmio" FontAttributes="Bold"></Label>
<Label x:Name="premioNome"></Label>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand">
<ListView x:Name="GridNumerosDaSorte"
SeparatorVisibility="Default"
HasUnevenRows="true"
ItemAppearing="OnItemAppearing"
>
<ListView.Header>
<StackLayout Orientation="Horizontal" BackgroundColor="#335D3B">
<Label Text="Nº da Sorte" TextColor="#FFF" HorizontalOptions="StartAndExpand" ></Label>
<Label Text="Valor(R$)" TextColor="#FFF" HorizontalOptions="CenterAndExpand" ></Label>
<Label Text="Controle" TextColor="#335D3B" HorizontalOptions="EndAndExpand" ></Label>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="0,10,0,0">
<Label Text="{Binding numero}" HorizontalOptions="StartAndExpand"></Label>
<Label Text="{Binding valor, StringFormat='{}{0:N}'}" HorizontalOptions="EndAndExpand" ></Label>
<Button Text="Comprar" Clicked="OnComprarClick" CommandParameter="{Binding .}" HorizontalOptions="EndAndExpand" BackgroundColor="Orange"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout x:Name="FooterPanel" HorizontalOptions="FillAndExpand" IsVisible="False">
<Label Text="text 1" HorizontalOptions="StartAndExpand"></Label>
<Label Text="text 2" HorizontalOptions="CenterAndExpand"></Label>
<Label Text="text 3" HorizontalOptions="EndAndExpand"></Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
Controller
//x:Name does not appear on controller, it does not works
FooterPanel.isVisible = true;

Related

How to create UI Dashboard Design in Xamarin Form

I am using xamarin form, having android and IOS Project
Below is the image that I want to create same UI.
I tried a lot, But I am not able to get same design.
I got this design in google image.
I have added my code and the output result
Below is my code:
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="10" >
<Frame BackgroundColor="White" CornerRadius="20" Grid.Row="0">
<Grid ColumnDefinitions="Auto,Auto,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
<Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E" ></Label>
<Label Grid.Column="1" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20" ></Label>
<Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray" ></Label>
<Label Grid.Column="3" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20" ></Label>
<Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray" ></Label>
</Grid>
</Frame>
<Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" >
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" >
<Label Grid.Row="0" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User}" FontSize="20" ></Label>
<Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
<Label Grid.Row="1" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
<Label Grid.Row="2" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20" ></Label>
<Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
</Grid>
</Frame>
<Grid Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto,Auto" RowSpacing="10" ColumnSpacing="10">
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Table}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Syllabus" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Th_List}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Test" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Edit}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Notice" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Pallet}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Fees" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Boxes}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Gallery" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Money_Bill}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Profile" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
</Grid>
<Frame Grid.Row="3" CornerRadius="20" >
<StackLayout HorizontalOptions="FillAndExpand">
<Image Source="https://graphicsfamily.com/wp-content/uploads/2020/11/Professional-Web-Banner-AD-in-Photoshop-scaled.jpg" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
</StackLayout>
</Frame>
<Frame Grid.Row="4" CornerRadius="10" BackgroundColor="#08457E">
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
<Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
</Grid>
</Frame>
</Grid>
And output is as below:
Please help me.
Thanks in advance.
Almost there, try this:
Update the Grid in the first Frame:
Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto"
And third Grid like this:
ColumnDefinitions="*,*,*"
Full code:
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="10" >
<Frame BackgroundColor="White" CornerRadius="20" Grid.Row="0">
<Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
<Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E" ></Label>
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="EndAndExpand" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20" ></Label>
<Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray" ></Label>
<Label Grid.Column="3" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20" ></Label>
<Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray" ></Label>
</Grid>
</Frame>
<Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" >
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" >
<Label Grid.Row="0" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User}" FontSize="20" ></Label>
<Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
<Label Grid.Row="1" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
<Label Grid.Row="2" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20" ></Label>
<Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
</Grid>
</Frame>
<Grid Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="*,*,*" RowSpacing="10" ColumnSpacing="10">
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Table}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Syllabus" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Th_List}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Test" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Edit}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Notice" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Pallet}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Fees" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Boxes}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Gallery" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Money_Bill}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Profile" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
</Grid>
<Frame Grid.Row="3" CornerRadius="20" >
<StackLayout HorizontalOptions="FillAndExpand">
<Image Source="https://graphicsfamily.com/wp-content/uploads/2020/11/Professional-Web-Banner-AD-in-Photoshop-scaled.jpg" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
</StackLayout>
</Frame>
<Frame Grid.Row="4" CornerRadius="10" BackgroundColor="#08457E">
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
<Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
</Grid>
</Frame>
</Grid>

Xamarin - ImageButton doesnt activate every click

Screen
On the picture above you can see where the ImageButton sometimes activates. When I spam clicking in the blue area the counter sometimes increases. I think there might be another Layer on top of the ImageButton but I dont know how to fix it. Below there is the XAML code. Hopefully somebody can help. Thanks!
<StackLayout>
<Label Text="Discover" TextColor="Black" FontSize="24" FontAttributes="Bold" Margin="15" />
<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
<Grid>
<StackLayout>
<ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
Aspect="AspectFill" Opacity="0.8" Clicked="ImageButton_Clicked"/>
</StackLayout>
<StackLayout Margin="0,10" >
<Image Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,-15"/>
<Label Text="{Binding name_norm}" TextColor="Black" FontSize="16" FontAttributes="Bold"
Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" >
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
Aspect="AspectFit"/>
<Label Text="{Binding name_lat}" TextColor="Black" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Label x:Name="label" Text="0 ImageButton clicks"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
Here the C# Code:
namespace PlantBase
{
public partial class MainPage : ContentPage
{
int clickTotal;
public MainPage()
{
InitializeComponent();
}
private void ImageButton_Clicked(object sender, EventArgs e)
{
clickTotal += 1;
label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
}
}
}
Check VisualElement.InputTransparent Property.
false if the element and its children should receive input; true if neither the element nor its children should receive input and should, instead, pass inputs to the elements that are visually behind the current visual element. Default is false.
What you need is to set InputTransparent to true on the text stackLayout .
<StackLayout InputTransparent="True" Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
<Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold" Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" BackgroundColor="Aqua">
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15" Aspect="AspectFit" />
<Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
Okay I found the Problem. It was that before I put the red Flag on the Top and the text at the bottom in one Stacklayout which expanded from top to bottom. Now that i put them in seperate StackLayouts it works and the ImageButton is free.
Pictures before/after.
old StackLayout
new Stacklayout
The new XAML is:
<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
<Grid>
<StackLayout>
<ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
Aspect="AspectFill" Opacity="0.9" Clicked="ImageButton_Clicked" />
</StackLayout>
<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="Aqua">
<ImageButton Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,0" BackgroundColor="Transparent" Clicked="ImageButton_Clicked_1" />
</StackLayout>
<StackLayout Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
<Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold"
Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" BackgroundColor="Aqua" >
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
Aspect="AspectFit" />
<Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
New Question now. Since at the bottom there is the Text StackLayout, where the Text is I cant press the ImageButton. How can I put the ImageButton as top "layer" so I can also press it while pressing on the text.

Xamarin Firebase Database Delete Item

<ListView ItemsSource="{Binding Product}" CachingStrategy="RecycleElement" HasUnevenRows="True" x:Name="lstProducts" SelectedItem="{Binding SelectedProduct}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame CornerRadius="13" Padding="-10" BackgroundColor="#00a8cc">
<StackLayout Margin="35" Orientation="Horizontal">
<ImageButton Source="uninstalling_updates_64px.png" HorizontalOptions="StartAndExpand" WidthRequest="20" BackgroundColor="Transparent"/>
<Label Text="{Binding ProductId}" FontSize="10" HorizontalOptions="CenterAndExpand" x:Name="lblProductId"/>
<Label Text="{Binding ProductName}" FontAttributes="Bold" FontSize="15" HorizontalOptions="Center"/>
<Label Text="{Binding ProductDetail}" FontSize="13" HorizontalOptions="CenterAndExpand"/>
<Label Text="{Binding ProductPrice}" FontSize="8" HorizontalOptions="CenterAndExpand"/>
<ImageButton Source="trash_48px.png" HorizontalOptions="EndAndExpand" WidthRequest="20" BackgroundColor="Transparent" x:Name="deleteButn" Clicked="deleteButn_Clicked"/>
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
I have a listview here and I want to delete that record with a button I put in the listview. How can I do? thanks for your help

Add a border to the web view

I'm working on a Xamarin Forms project using Visual studio 2017 , I want to add a border to the web view . with black color . how to do that view xaml is below .
<StackLayout Orientation="Vertical" BackgroundColor="White" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HeightRequest="60" HorizontalOptions="FillAndExpand" BackgroundColor="DarkBlue" Padding="5">
<Label x:Name="lblUserNewOnBoarding" WidthRequest="340" Text="New User Onboarding" FontAttributes="Bold" FontFamily="Roboto" FontSize="Large" TextColor="White"
HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"></Label>
<Button x:Name="bntCancel" Text="Cancel" HeightRequest="40" BackgroundColor="#4184f3"
TextColor="White" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" Clicked="HandleCancle_Clicked" FontFamily="Roboto" FontSize="Small" FontAttributes="Bold">
<Button.Image>
<FileImageSource File="baseline_cancel_white_18dp.png" ></FileImageSource>
</Button.Image>
</Button>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" >
<Label Text="Please agree to the following terms and conditions…" FontFamily="Roboto-Medium" FontSize="30"
HorizontalOptions="CenterAndExpand" WidthRequest="927" HeightRequest="168" Margin="5"
TextColor="Black"></Label>
<WebView x:Name="wvAgree" HeightRequest="300" WidthRequest="400" Margin="50" BackgroundColor="White" ></WebView>
<Button x:Name="btnAgree" Text="Agree" WidthRequest="190" HeightRequest="50" AnchorX="417" AnchorY="604"
BackgroundColor="#4184f3" TextColor="White" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="HandleAgree_Clicked" FontFamily="Roboto" FontSize="Small" FontAttributes="Bold">
<Button.Image >
<FileImageSource File="Agree.png"></FileImageSource>
</Button.Image>
</Button>
<Button x:Name="btnDisAgree" Text="Disagree" WidthRequest="190" HeightRequest="50" AnchorX="417" AnchorY="673" BackgroundColor="#4184f3"
TextColor="White" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="HandleDisAgree_Clicked" FontFamily="Roboto" FontSize="Small" FontAttributes="Bold">
<Button.Image>
<FileImageSource File="baseline_delete_48.png" ></FileImageSource>
</Button.Image>
</Button>
</StackLayout>
</StackLayout>
Wrap your WebView around Frame. So:
<Frame OutlineColor="Black">
<WebView x:Name="wvAgree" HeightRequest="300" WidthRequest="400" Margin="50" BackgroundColor="White"/>
</Frame>
Also you dont have to write a Additional closing Tag if you dont put anything between it. Pay attention how I closed that WebView tag.

Open a listview below button over another view in xamarin forms

I'm working on a Xamarin Forms project where I need to have a drop down list like html drop down as in image.
I have taken a StackLayout for button and Listview (initially hidden) and when clicked on button will change the visibility to true. The list should open above other buttons but when the list get open, all other stackLayout moved below as in image.
I want the list view to be open above other views. The code for the screen is as below. Could any one help what changed do I need to make in the below code.
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
</StackLayout>
Edited:
This is my actual XAML
<StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical">
<StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand" >
<Label Text="Change Language" Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" />
<RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand">
<StackLayout Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150" >
<StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0" Orientation="Horizontal" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/>
</StackLayout>
<StackLayout HorizontalOptions="End">
<Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" >
</Image>
</StackLayout>
</StackLayout>
<ListView x:Name="LanguageList" IsVisible="{Binding ShowLanguagePopup}" BackgroundColor="Gray" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown, Property=Y,Factor=1,Constant=40}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=X,Factor=1,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=LanguageDropDown,Property=Height,Factor=1,Constant=10}"
/>
</StackLayout>
</RelativeLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding ChangeLanguageCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
</StackLayout>
</StackLayout>
I have never used it but I think you can try with a RelativeLayout. This is a little demo: 2 buttons and a ListView. ListView has some Constraints to RedButton. You can try to show / hide it and take a look if Green Button (that has Constraints to RedButton too) does not move
<StackLayout VerticalOptions = "FillAndExpand">
<RelativeLayout>
<Button BackgroundColor="Red" x:Name="button" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}" />
<Button BackgroundColor="Green" x:Name="buttonGreen" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=100}" />
<ListView BackgroundColor="Blue" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=Y,Factor=1,Constant=60}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}"
/>
</RelativeLayout>
</StackLayout>

Resources