We Keep Coding

How to animate whole frame when clicked on button in xamarin?

I want to fade out whole frame when i click on delete button but i only know how to fade that delete button i have searched I cant find this specific example. In the example below will disapper just delete button and i cant find how to call whole frame to set animation on it.
button:
private async void deleteButton_Clicked(object sender, EventArgs e)
{
var action = await DisplayAlert("Delete", "Do you want delete picture?", "Cancel", "Delete");
if (action)
{
}
else
{
var button = (Button)sender;
button.ScaleTo(1, 1000, Easing.BounceOut);
var plane = (Airplane)button.BindingContext;
var db = new SQLiteConnection(_dbPath);
db.Delete<Airplane>(plane.Id);
Refresh();
}
}
xaml:
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Margin="0">
<Frame Padding="0" BackgroundColor="{AppThemeBinding Light='#00d2ff', Dark='#121212'}" Margin="0, 70, 0, 0" CornerRadius="30">
<StackLayout Padding="20">
<Label Text="{Binding Airline}" TextColor ="White" FontAttributes="Bold" FontSize="35" FontFamily="Lato" Margin="0" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="{Binding ThumbnailUrl}" Aspect="AspectFill"/>
</Grid>
<Label Text="{Binding Plane, StringFormat='Plane: {0}'}" FontFamily="Lato" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Airline, StringFormat='Airline: {0}'}" FontFamily="Lato" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Livery, StringFormat='Livery: {0}'}" FontFamily="Lato" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Registration, StringFormat='Reg: {0}'}" FontFamily="Lato" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Airport, StringFormat='Airport: {0}'}" FontFamily="Lato" TextColor ="White" FontSize="15"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Label Text="{Binding Date, StringFormat='Date: {0}'}" FontFamily="Lato" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Comment, StringFormat='Comment: {0}'}" FontFamily="Lato" TextColor ="White" FontSize="15"/>
</StackLayout>
<AbsoluteLayout Grid.Column="1">
<Button Text="Delete" TextColor="White" CornerRadius="30" FontAttributes="Bold" FontSize="14" FontFamily="Lato" BackgroundColor="{AppThemeBinding Light='#00aeef', Dark='Black'}" x:Name="deleteButton" Clicked="deleteButton_Clicked" AbsoluteLayout.LayoutBounds="0.8, 0.5, 100, 50" AbsoluteLayout.LayoutFlags="PositionProportional"/>
</AbsoluteLayout>
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>

You could try the code below to fade the frame.
In the button click event, we use the parent of button to find the frame.
var frame = button.Parent.Parent.Parent.Parent as Frame;
The whole code:
Xaml:
<CollectionView ItemsSource="{Binding airs}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Margin="0">
<Frame
Margin="0,70,0,0"
Padding="0"
BackgroundColor="{AppThemeBinding Light='#00d2ff',
Dark='#121212'}"
CornerRadius="30">
<StackLayout Padding="20">
<Label
Margin="0"
FontAttributes="Bold"
FontFamily="Lato"
FontSize="35"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding Airline}"
TextColor="White" />
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Aspect="AspectFill" Source="{Binding ThumbnailUrl}" />
</Grid>
<Label
FontFamily="Lato"
FontSize="15"
Text="{Binding Plane, StringFormat='Plane: {0}'}"
TextColor="White" />
<Label
FontFamily="Lato"
FontSize="15"
Text="{Binding Airline, StringFormat='Airline: {0}'}"
TextColor="White" />
<Label
FontFamily="Lato"
FontSize="15"
Text="{Binding Livery, StringFormat='Livery: {0}'}"
TextColor="White" />
<Label
FontFamily="Lato"
FontSize="15"
Text="{Binding Registration, StringFormat='Reg: {0}'}"
TextColor="White" />
<Label
FontFamily="Lato"
FontSize="15"
Text="{Binding Airport, StringFormat='Airport: {0}'}"
TextColor="White" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Label
FontFamily="Lato"
FontSize="15"
Text="{Binding Date, StringFormat='Date: {0}'}"
TextColor="White" />
<Label
FontFamily="Lato"
FontSize="15"
Text="{Binding Comment, StringFormat='Comment: {0}'}"
TextColor="White" />
</StackLayout>
<AbsoluteLayout Grid.Column="1">
<Button
x:Name="deleteButton"
AbsoluteLayout.LayoutBounds="0.8, 0.5, 100, 50"
AbsoluteLayout.LayoutFlags="PositionProportional"
BackgroundColor="{AppThemeBinding Light='#00aeef',
Dark='Black'}"
Clicked="deleteButton_Clicked"
CornerRadius="30"
FontAttributes="Bold"
FontFamily="Lato"
FontSize="14"
Text="Delete"
TextColor="White" />
</AbsoluteLayout>
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Code behind:
public partial class Page1 : ContentPage
{
public ObservableCollection<Air> airs { get; set; }
public Page1()
{
InitializeComponent();
airs = new ObservableCollection<Air>()
{
new Air{ Airline="Airline1", Comment="Comment1", Airport="Airport1", Date="Date1", Livery="Livery1", Plane="Plane1", Registration="Registration1", ThumbnailUrl="pink.jpg"},
new Air{ Airline="Airline2", Comment="Comment2", Airport="Airport2", Date="Date2", Livery="Livery2", Plane="Plane2", Registration="Registration2", ThumbnailUrl="pink.jpg"},
new Air{ Airline="Airline3", Comment="Comment3", Airport="Airport3", Date="Date3", Livery="Livery3", Plane="Plane3", Registration="Registration3", ThumbnailUrl="pink.jpg"},
new Air{ Airline="Airline4", Comment="Comment4", Airport="Airport4", Date="Date4", Livery="Livery4", Plane="Plane4", Registration="Registration4", ThumbnailUrl="pink.jpg"},
new Air{ Airline="Airline5", Comment="Comment5", Airport="Airport5", Date="Date5", Livery="Livery5", Plane="Plane5", Registration="Registration5", ThumbnailUrl="pink.jpg"},
new Air{ Airline="Airline6", Comment="Comment6", Airport="Airport6", Date="Date6", Livery="Livery6", Plane="Plane6", Registration="Registration6", ThumbnailUrl="pink.jpg"},
};
this.BindingContext = this;
}
private void deleteButton_Clicked(object sender, EventArgs e)
{
var button = sender as Button;
var frame = button.Parent.Parent.Parent.Parent as Frame;
frame.FadeTo(0.5);
}
}
public class Air
{
public string Airline { get; set; }
public string Plane { get; set; }
public string ThumbnailUrl { get; set; }
public string Livery { get; set; }
public string Registration { get; set; }
public string Airport { get; set; }
public string Date { get; set; }
public string Comment { get; set; }
}
Screenshot:

Step 1 :
Give a x:Name to your Frame
<Frame x:Name="AnimationFrame" Padding="0" BackgroundColor="{AppThemeBinding Light='#00d2ff', Dark='#121212'}" Margin="0, 70, 0, 0" CornerRadius="30">
Step 2 : Pass this frame in Button's CommandParameter
<Button Text="Delete" TextColor="White" CornerRadius="30" FontAttributes="Bold" FontSize="14" FontFamily="Lato" BackgroundColor="{AppThemeBinding Light='#00aeef', Dark='Black'}" x:Name="deleteButton" Clicked="deleteButton_Clicked" AbsoluteLayout.LayoutBounds="0.8, 0.5, 100, 50" AbsoluteLayout.LayoutFlags="PositionProportional"
CommandParameter="{x:Reference AnimationFrame}"/>
Step 3: Recieve this frame in CodeBehind
private async void deleteButton_Clicked(object sender, EventArgs e)
{
if (sender is Xamarin.Forms.Button button && button.CommandParameter is Xamarin.Forms.Frame frame)
{
// You now have the frame element
// write your animation logic to the entire frame now
frame.FadeTo(0.5);
}
}

Xamarin.Forms - Binding on ContextMenu

I have a list with songs as items. A long press on the element should display a context menu.
AllSongsViewModel.xaml:
<DataTemplate x:Key="SongTemplate">
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Edit" />
<MenuItem Text="Delete"/>
</ViewCell.ContextActions>
<StackLayout Padding="15,5" VerticalOptions="Center">
<Label Text="{Binding Title}"
FontSize="16"/>
<Label Text="{Binding Performer}"
FontSize="12"/>
</StackLayout>
</ViewCell>
</DataTemplate>
This works well, but I need to bind now so that the context menu opens depending on bool IsAdmin, which lies in AllSongsViewModel
AllSongsViewModel.cs:
public bool IsAdmin => _authService.LoggedUser.Role == "Admin";
But I don’t know how to bind this property to the context menu

Unfortunately you can't do this on your ViewModel. But you can set a BindingContextChange event on your View Cell and change it there like this:
XAML:
<DataTemplate x:Key="SongTemplate">
<ViewCell BindingContextChanged="OnBindingContextChanged">
<StackLayout Padding="15,5" VerticalOptions="Center">
<Label Text="{Binding Title}"
FontSize="16"/>
<Label Text="{Binding Performer}"
FontSize="12"/>
</StackLayout>
</ViewCell>
In your code behind:
private void OnBindingContextChanged(object sender, EventArgs e)
{
base.OnBindingContextChanged();
if (BindingContext == null)
return;
ViewCell theViewCell = ((ViewCell)sender);
var viewModel = this.BindingContext.DataContext as AllSongsViewModel;
theViewCell.ContextActions.Clear();
if (viewModel.IsAdmin)
{
theViewCell.ContextActions.Add(new MenuItem()
{
Text = "Delete",
});
theViewCell.ContextActions.Add(new MenuItem()
{
Text = "Edit",
});
}
}

Xamarin Forms Httpclient PostAsync returns null

Homepage showing products in a list according to the category selected.Initially showing products of first category. API response is null for first category but count is correct,showing only blank frames. After switching from other categories, products are shown correctly.Awaited the tasks. I think the problem is with async-await calls.Help need to rectify this..
private async Task InitializeAsync()
{
await Get_categories(); //calling method
}
public Task Initialization { get; private set; }
public Grid_vm() //constructor
{
Initialization = InitializeAsync();
}
public async Task Get_categories()
{
var items = await restClient.Get_categories();
Categorylist = new List<Category_value>();
foreach (Category_data cat in items.data)
{
Category_value category = new Category_value();
if (cat.category_id=="6")
{
category.category_id = cat.category_id;
category.category_name = cat.category_name;
Categorylist.Add(category);
}
else
{
category.category_id = cat.category_id;
category.category_name = cat.category_name;
Categorylist.Add(category);
}
}
await Get_branch_products("6") ; // calling first category
}
public async Task Get_branch_products (string category_id)
{
RestClient restClient = new RestClient();
var items=await restClient.Get_branch_products2(category_id);//calling restAPI
Productlist = new List<Product_Value2>();//var items null initially
foreach (Product_Data p in items.data)
{
Product_Value2 val = new Product_Value2();
val.available_qty = p.available_qty;
if (p.status == "1")
{
val.visible = true ;
OnPropertyChanged("visible");
val.visibility = false;
OnPropertyChanged("visibility");
Productlist.Add(val);
}
else
{
val.visible = true ;
OnPropertyChanged("visible");
val.visibility = false;
OnPropertyChanged("visibility");
val.opacity = 0.25;
OnPropertyChanged("opacity");
Productlist.Add(val);
}
}
}
}
public async Task<ProductDetails> Get_branch_products2(string cat_id)
{
var formcontent = new FormUrlEncodedContent(new[]
{
new KeyValuePair<string,string>("category_id",cat_id)
});
var response = await client.PostAsync(base_url + "listbranchproduct", formcontent).ConfigureAwait(false);//execution returns null from here
var result = await response.Content.ReadAsStringAsync();//executed later
var status = JsonConvert.DeserializeObject<ProductDetails>(result);
return status;
}
<ListView x:Name="pdt_list" HasUnevenRows="True" SeparatorVisibility="None" ItemsSource="{Binding Productlist}" BackgroundColor="White" Margin="0,0,0,0">
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell >
<ViewCell.View>
<Frame HasShadow="False" Margin=" 0,10,0,10" Padding="10,0,10,5" BackgroundColor="#f1f1f1" HeightRequest="80" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
<Grid Padding="0">
<!--<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Margin="0,10,0,10" >-->
<StackLayout VerticalOptions="FillAndExpand" Margin="0" Padding="10,0,0,0" Orientation="Horizontal" Opacity="{Binding opacity}">
<Image Source="{Binding image}" Aspect="AspectFill" WidthRequest="70" HeightRequest="180" VerticalOptions="FillAndExpand" />
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Vertical" >
<Label Text="{Binding Name}" Font="Bold" VerticalTextAlignment="Center" FontSize="Small" TextColor="Black" FontFamily="opensans_light.ttf#opensans_light" Margin="10,20,0,0" />
<StackLayout Orientation="Horizontal" Margin="10,0,0,0" HorizontalOptions="Start" VerticalOptions="Start" >
<Label Text="{Binding sellingprice_default}" Font="Bold" HorizontalOptions="Start" Margin="0" TextColor="#FA2E27" VerticalTextAlignment="Start" FontSize="Small" FontFamily="opensans_light.ttf#opensans_light" />
<Label Text="QAR" TextColor="#FA2E27" HeightRequest="90" FontSize="Small" HorizontalOptions="Start" VerticalTextAlignment="Start" VerticalOptions="FillAndExpand" />
</StackLayout>
</StackLayout>
<ImageButton Source="carts.png" BackgroundColor="Transparent" IsVisible="{Binding visible}" HorizontalOptions="EndAndExpand" WidthRequest="40" HeightRequest="40" VerticalOptions="CenterAndExpand" Clicked="Add_cart_Clicked" Margin="0,20,0,0" Aspect="AspectFit">
</ImageButton>
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" IsVisible="{Binding visibility}" HorizontalOptions="EndAndExpand">
<ImageButton Source="minus.png" HorizontalOptions="End" VerticalOptions="Center" Aspect="Fill" BackgroundColor="Transparent" WidthRequest="20" HeightRequest="20" Clicked="Minus_Tapped" />
<Label Text="{Binding Number2}" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" FontSize="Medium" TextColor="Black" FontFamily="opensans_light.ttf#opensans_light" Margin="0,0,0,0" />
<ImageButton Source="plus2.png" HorizontalOptions="End" Aspect="Fill" VerticalOptions="Center" BackgroundColor="Transparent" WidthRequest="20" HeightRequest="20" Clicked="Plus_Tapped" />
</StackLayout>
</StackLayout>
<StackLayout BackgroundColor="Black" HorizontalOptions="EndAndExpand" VerticalOptions="StartAndExpand" WidthRequest="100" HeightRequest="25" IsVisible="{Binding opaque}" Margin="0,0,0,0" >
<Label Text="Not Available" FontFamily="opensans_light.ttf#opensans_light" TextColor="White" FontAttributes="Bold" HorizontalOptions="Center" VerticalTextAlignment="Center" />
</StackLayout>
</Grid>
</Frame>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

opacity was provided inside the Get_branch_products (string category_id) method else block as 0.25.
val.opacity = 1;
OnPropertyChanged("opacity");
was not given inside if block adding it there solved the issue.

After press on return button the listview hide from UI IOS

After press, the return button on-screen keyboard the listview hide from the iOS screen. The same code is running perfectly on Android. I have create the 30 second video that will help you understand the problem.
The code file and Video can be download from here https://drive.google.com/drive/folders/1Q4O1KexIHvrCX79AR3CesRXJRWM1o2JR?usp=sharing
<ListView x:Name="listViewOrder" ItemTapped="OnActivitySelected" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame HasShadow="True" OutlineColor="Silver" Padding="3">
<Grid BackgroundColor="{Binding RowColour}" ColumnSpacing="2" Padding="2">
<StackLayout Orientation="Horizontal" HeightRequest="35" BackgroundColor="{Binding RowColour}" Padding="10">
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="Start">
<Label FontSize="Medium" TextColor="#707070" Text="{Binding GFIELD3}" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Image Aspect="AspectFit" Source = "{Binding ImageStatus}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" HeightRequest = "20" WidthRequest="20" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout x:Name="layoutForBluetooth" HeightRequest="200" Padding="5, 5, 5, 5" BackgroundColor="#5DCBEE" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Frame Padding="5,5,5,5" HorizontalOptions="FillAndExpand" OutlineColor="Black" HasShadow="True">
<Grid>
<Label Text="Scan Your Barcode" x:Name="lblDriverNumber" TextColor="Black" FontSize="Medium" HorizontalOptions="FillAndExpand" Margin="0,10" />
<Entry x:Name="txtentry" FontSize="Medium" TextColor="Black" WidthRequest="400" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
</Grid>
</Frame>
async void Txtentry_Completed(object sender, EventArgs e)
{
BiendListview(orderID);
}
public void BiendListview(int OID)
{
try
{
List<GenericFields> GN = new List<GenericFields>();
GN = GetDeliveryOrderItems(OID);
if (GN != null)
{
// listViewOrder.BeginRefresh();
listViewOrder.ItemsSource = GN;
// listViewOrder.EndRefresh();
}
}
catch (Exception ex)
{
}
}

Please make a breakpoint to debug your GN's value. From your code:
if (GN != null)
{
// listViewOrder.BeginRefresh();
listViewOrder.ItemsSource = GN;
// listViewOrder.EndRefresh();
}
This if statement will always be true, since you have construct the GN by List<GenericFields> GN = new List<GenericFields>();. It will never be null.
You can try to modify it to:
if (GN.Count != 0)
{
// listViewOrder.BeginRefresh();
listViewOrder.ItemsSource = GN;
// listViewOrder.EndRefresh();
}

How to add control in stacklayout of contentview in contentpage?

I am using xamarin.forms. having two projects Android and IOS.
I have one ContentView page with following code
<ContentView.Content>
<StackLayout x:Name="slMain" Padding="1" BackgroundColor="#7ABA45">
<StackLayout VerticalOptions="FillAndExpand" Padding="0,0,20,0" HeightRequest="50" HorizontalOptions="FillAndExpand">
<Label x:Name="lblTitle" VerticalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout x:Name="sl" IsVisible="False" BackgroundColor="White">
</StackLayout>
</StackLayout>
</ContentView.Content>
// In Behind code(.cs file)
public ExpandCollapseStackLayout()
{
InitializeComponent();
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) =>
{
sl.IsVisible = !sl.IsVisible;
};
lblTitle.GestureRecognizers.Add(tapGestureRecognizer);
slMain.GestureRecognizers.Add(tapGestureRecognizer);
}
public string Title
{
get
{
return lblTitle.Text;
}
set
{
lblTitle.Text = value;
}
}
I want to add controls in StackLayout named "sl" of contentview in ContentPage at design time.
I dont want to add at runtime
Please suggest me how can I add Control in Contentview stacklayout?

If you want to add controls in design time simply declare them in your XAML, example:
<StackLayout x:Name="sl" IsVisible="False" BackgroundColor="White">
<!-- Add here your controls -->
<Label ... />
<Button .. />
</StackLayout>
If you want to add controls at runtime, you need to do it using your code behind page in C#. Example:
void AddControl()
{
var btn = new Button();
sl.Children.Add(btn);
}

Code for ContentView:
<ContentView.Content>
<StackLayout x:Name="slMain" Padding="1" BackgroundColor="#7ABA45" >
<StackLayout VerticalOptions="FillAndExpand" Padding="0,0,10,0" HeightRequest="50" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label x:Name="lblTitle" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="10,0,0,0" TextColor="White" FontAttributes="Bold" />
<Label Text="{ x:Static local:GrialShapesFont.ArrowDown }" HorizontalOptions="End" VerticalOptions="CenterAndExpand" TextColor="White" Style="{ StaticResource FontIconBase }" FontSize="26" />
</StackLayout>
<Frame Padding="10" IsVisible="False" BackgroundColor="White" x:Name="ContentFrame" OutlineColor="Black" HasShadow="False">
</Frame>
</StackLayout>
</ContentView.Content>
CS Code for ContentView:
[ContentProperty("ContainerContent")]
public partial class ExpandCollapseStackLayout : ContentView
{
public ExpandCollapseStackLayout()
{
InitializeComponent();
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) =>
{
ContentFrame.IsVisible = !ContentFrame.IsVisible;
};
lblTitle.GestureRecognizers.Add(tapGestureRecognizer);
slMain.GestureRecognizers.Add(tapGestureRecognizer);
}
public View ContainerContent
{
get { return ContentFrame.Content; }
set { ContentFrame.Content = value; }
}
public string Title
{
get
{
return lblTitle.Text;
}
set
{
lblTitle.Text = value;
}
}
}
Add Control in ContentPage:
<control:ExpandCollapseStackLayout Title="Demo" Padding="0,10,0,0">
<control:ExpandCollapseStackLayout.ContainerContent >
<StackLayout>
<Label Text="Add Content Here"></Label>
</StackLayout>
</control:ExpandCollapseStackLayout.ContainerContent>
</control:ExpandCollapseStackLayout>