Sample UI design
Does anyone know how to change Imagebutton source? Refer to the picture link, when user click on step1 (MainPage), it will redirect user to another page (SecondPage). Once user click on "done" button in SecondPage, I want to change my imagebutton source and at the same time, enable click event. I am not sure not to call the function from one page to another.
(P.S my btnclickcount doesn't seems to be working sometimes... I only want to record the start date time on first button click)
public partial class MainPage : ContentPage
{
public string mainpagevalue;
int offlinecount = 0;
int onlinecount = 0;
public MainPage()
{
InitializeComponent();
}
private void btnOffline_Clicked(object sender, EventArgs e)
{
offlinecount++;
txtOfflineStatus.Text = "IN PROGRESS";
Navigation.PushAsync(new SecondPage(this, lblEndDT, txtOfflineStatus, btnOnline, btnMH));
if (offlinecount == 1)
{
string currentDT = DateTime.Now.ToString();
lblStartDT.Text = currentDT;
}
}
private void btnOnline_Clicked(object sender, EventArgs e)
{
onlinecount++;
txtOnlineStatus.Text = "IN PROGRESS";
Navigation.PushAsync(new ThirdPage(this, lblOnlineEndDT, btnTS, txtOnlineStatus));
if (onlinecount == 1)
{
string onlinestartDT = DateTime.Now.ToString();
lblOnlineStartDT.Text = onlinestartDT;
}
}
Third Page
public partial class ThirdPage : ContentPage
{
Label wopLblOnlineEndDT;
MainPage mainpage;
ImageButton btntroubleshoot;
Label wolblOnlineStatus;
public ThirdPage()
{
InitializeComponent();
}
public ThirdPage(MainPage woPage, Label lblOnlineEndDT, ImageButton btnTS, Label lblOnlineStatus)
{
InitializeComponent();
mainpage = woPage;
wopLblOnlineEndDT = lblOnlineEndDT;
btntroubleshoot = btnTS;
wolblOnlineStatus = lblOnlineStatus;
}
private void BtnDone_Clicked(object sender, EventArgs e)
{
string edt = DateTime.Now.ToString();
wopLblOnlineEndDT.Text = edt;
mainpage.mainpagevalue = wopLblOnlineEndDT.Text;
btntroubleshoot.Source = "troubleshooting";
btntroubleshoot.IsEnabled = true;
wolblOnlineStatus.Text = "COMPLETED";
wolblOnlineStatus.TextColor = Color.FromRgb(0, 214, 54);
Navigation.PopAsync();
}
}
XAML
<ImageButton x:Name="btnOffline" IsEnabled="True" Source="#drawable/offlinetool.png" Grid.Row="1" Grid.Column="1" BackgroundColor="Transparent" Clicked="btnOffline_Clicked"/>
<Label Text="Offline Tool" Grid.Row="2" Grid.Column="1" Margin="15,0,0,0"/>
<ImageButton Source="#drawable/material.png" Grid.Row="4" Grid.Column="1" BackgroundColor="Transparent"/>
<Label Text="Material Handler" Grid.Row="5" Grid.Column="1" />
<Image Source="#drawable/Picture1.png" Grid.Row="6" Grid.ColumnSpan="6" BackgroundColor="Transparent"/>
<Label Text="Start Date Time:" Grid.Row="1" Grid.Column="3"/>
<Label Text="End Date Time:" Grid.Row="1" Grid.Column="3" Margin="7,40,0,0"/>
<Label Text="Status:" Grid.Row="2" Grid.Column="3" Margin="58,0,0,0" />
<Label x:Name="txtOfflineStatus" Text="NOT STARTED" TextColor="Red" Grid.Column="4" Grid.Row="2"/>
<Label x:Name="lblStartDT" Text="" Grid.Column="4" Grid.Row="1"/>
<Label x:Name="lblEndDT" Text="-" Grid.Column="4" Grid.Row="1" Margin="0,40,0,0"/>
<Label Text="Start Date Time:" Grid.Row="4" Grid.Column="3" />
<Label Text="End Date Time:" Grid.Row="4" Grid.Column="3" Margin="7,40,0,0"/>
<Label Text="Status:" Grid.Row="5" Grid.Column="3" Margin="58,0,0,0" />
<Label Text="NOT STARTED" TextColor="Red" Grid.Column="4" Grid.Row="5"/>
<!--#Online Tool-->
<ImageButton x:Name="btnOnline" Source="#drawable/ot.png" Grid.Row="8" Grid.Column="1" BackgroundColor="Transparent" Clicked="btnOnline_Clicked" IsEnabled="False"/>
<Label Text="Online Tool" Grid.Row="9" Grid.Column="1" Margin="19,0,0,0"/>
<ImageButton x:Name="btnMH" Source="#drawable/mh.png" Grid.Row="11" Grid.Column="1" BackgroundColor="Transparent" Clicked="imgbtnMH_Clicked" IsEnabled="False"/>
<Label Text="Material Handler" Grid.Row="12" Grid.Column="1"/>
<Image Source="#drawable/Picture1.png" Grid.Row="13" Grid.ColumnSpan="6" BackgroundColor="Transparent"/>
<Label Text="Start Date Time:" Grid.Row="8" Grid.Column="3" />
<Label Text="End Date Time:" Grid.Row="8" Grid.Column="3" Margin="7,40,0,0"/>
<Label Text="Status:" Grid.Row="9" Grid.Column="3" Margin="58,0,0,0" />
<Label Text="NOT STARTED" TextColor="Red" Grid.Column="4" Grid.Row="9"/>
<Label x:Name="lblOnlineStartDT" Text="00:00:00" Grid.Column="4" Grid.Row="8"/>
<Label x:Name="lblOnlineEndDT" Text="" Grid.Column="4" Grid.Row="8" Margin="0,40,0,0"/>
<Label x:Name="txtOnlineStatus" Text="NOT STARTED" TextColor="Red" Grid.Column="4" Grid.Row="9"/>
You can pass the reference of imageButton to the SecondPage too and change the Source in the done method. Let me show you how to do it:
In the MainPage xaml, create an ImageButton named MyImageButton:
<StackLayout>
<!-- Place new controls here -->
<Label x:Name="lblStartDT" Text="startTest"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
<Button Text="go to secondPage" Clicked="btnOffline_Clicked" HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
<Label x:Name="lblEndDT" Text="endTest"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<ImageButton x:Name="MyImageButton" Source="Images.png" IsEnabled="False"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
In code behind, pass MyImageButton to the SecondPage:
private void btnOffline_Clicked(object sender, EventArgs e)
{
//Pass the parametere you need when you go to SecondPage
//Navigation.PushAsync(new SecondPage(this, lblEndDT));
Navigation.PushAsync(new SecondPage(this, lblEndDT, MyImageButton));
string currentDT = DateTime.Now.ToString();
lblStartDT.Text = currentDT;
}
In the SecondPage, get the reference of myImageBtn and modify it in the done method:
public partial class SecondPage : ContentPage
{
Label MainPagelblEndDT;
MainPage mainPage;
ImageButton myImageBtn;
public SecondPage()
{
InitializeComponent();
}
public SecondPage(MainPage mainP,Label lblEndDT)
{
InitializeComponent();
//Get the lblEndDT reference here
MainPagelblEndDT = lblEndDT;
//Get the MainPage reference here
mainPage = mainP;
}
public SecondPage(MainPage mainP, Label lblEndDT, ImageButton imageBtn)
{
InitializeComponent();
//Get the lblEndDT reference here
MainPagelblEndDT = lblEndDT;
//Get the MainPage reference here
mainPage = mainP;
//Get the ImageButton reference here
myImageBtn = imageBtn;
}
private void Button_Clicked(object sender, EventArgs e)
{
string edt = DateTime.Now.ToString();
//Use it
MainPagelblEndDT.Text = edt;
mainPage.previouspagevalue = MainPagelblEndDT.Text;
//change the source of imageBtn
myImageBtn.Source = "Images1";
myImageBtn.IsEnabled = true;
Navigation.PopAsync();
}
}
A sample project is available here.
Bind the button Opacity to something like 0.5 and also disable the button.
<ImageButton Command="{Binding EditActivityCommand}"
BackgroundColor="Transparent"
Opacity="{Binding Opacity}"
IsEnabled="{Binding IsAdmin}">
Related
Good afternoon, I would like your help regarding this.
Code in C# Xamarin Net Maui, so that when clicking on a button, an image is displayed on the same screen.
I put images and example code
<ScrollView>
<VerticalStackLayout BackgroundColor="White">
<Label Text="a" BackgroundColor="BurlyWood" ></Label>
<Label Text="" TextColor="Black" ></Label>
<Label Text="b" BackgroundColor="BurlyWood" ></Label>
<Label Text="" TextColor="Black" ></Label>
<Label Text="c" BackgroundColor="BurlyWood" ></Label>
<Label Text="" TextColor="Black" ></Label>
<Label Text="d " BackgroundColor="BurlyWood" ></Label>
<Label Text="" TextColor="Black" ></Label>
<Button x:Name="changeimage" Text="changeimage[enter image description here](https://i.stack.imgur.com/cK6um.png)" BackgroundColor="Aqua" Clicked="changeimage_Clicked" ></Button>
<Image></Image>
</VerticalStackLayout>
</ScrollView>
public partial class Pagina12 : ContentPage
{
public Pagina12()
{
InitializeComponent();
}
private void Cambiarimagen_Clicked(object sender, EventArgs e)
{
}
}
that when clicking on the button called "change image" an image is displayed
Thank you very much in advance
first assign an x:Name to the Image
<Image x:Name="myImage />
then in your click handler
private void Cambiarimagen_Clicked(object sender, EventArgs e)
{
myImage.Source = ImageSource.FromUri("http://blah.com");
}
see the docs for different ways to load images
I want to know how do I pass data from one CollectionView which is in my MainPage.xaml to another page called DetailsPage when user clicks on a frame that is inside a CollectionView, I hope you know what I meant.
This is my MainPage.xaml:
<CollectionView x:Name="CVSubjects" Margin="0,-50,0,0" ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Margin="20,0,0,0">
<Frame BackgroundColor="{Binding BackgroundColor}" WidthRequest="250" HeightRequest="180" HorizontalOptions="Center" CornerRadius="30">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Frame.GestureRecognizers>
<StackLayout>
<Frame BackgroundColor="white" HasShadow="False" WidthRequest="30" HorizontalOptions="Start" CornerRadius="50" HeightRequest="10">
<StackLayout Orientation="Horizontal" HeightRequest="10">
<Image Source="redstaricon.png" WidthRequest="14" Margin="-10,-2,0,0"></Image>
<Label Text="{Binding Rating}" VerticalOptions="Center" Margin="0,-5,0,0" FontAttributes="Bold" TextColor="Black"></Label>
</StackLayout>
</Frame>
<Label Text="{Binding Name}" FontSize="21" TextColor="White" FontAttributes="Bold" Padding="0,10,0,0" WidthRequest="250"></Label>
<StackLayout Orientation="Horizontal">
<Frame CornerRadius="100"
HeightRequest="55"
WidthRequest="60"
HorizontalOptions="Center"
Padding="0"
IsClippedToBounds="True"
Margin="0,20,0,0"
>
<Image Source="{Binding ImageUrl}"
HorizontalOptions="Center"
VerticalOptions="Center"
Aspect="Fill"></Image>
</Frame>
<Label Text="Teacher" TextColor="White" WidthRequest="100" Margin="0,25,0,0">
</Label>
<Label Text="{Binding Teacher}" VerticalOptions="Center" TextColor="White" WidthRequest="200" FontAttributes="Bold" Margin="-100,45,0,0" FontSize="17">
</Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
and this is MainPage.xaml.cs:
public partial class MainPage : ContentPage
{
ObservableCollection<Subjects> subjects;
public MainPage()
{
InitializeComponent();
subjects = new ObservableCollection<Subjects>() { new Subjects { Id = 1, Name = "UX - UI Design", Teacher = "Gustavo Kenter", Rating = "4.9", BackgroundColor = "#FE2E47", ImageUrl="teacher1.png", TeacherTitle="Designer" },
new Subjects{Id = 2, Name = "Animation in After Effects", Teacher = "Tiana Mango", Rating = "4.3", BackgroundColor = "#FDB2C0", ImageUrl="teacher2.png", TeacherTitle="Animator" },
new Subjects{Id = 3, Name = "Mobile App Design", Teacher = "Dulce Bator", Rating = "4.1", BackgroundColor = "#D0BCD0", ImageUrl="teacher3.png", TeacherTitle="Designer" },
new Subjects {Id = 4, Name = "3D Design", Teacher = "Lincoln Bator", Rating = "4.6", BackgroundColor = "#88B5FC", ImageUrl="teacher4.png", TeacherTitle="3D Designer" },
new Subjects{ Id = 5, Name = "Mobile App Development", Teacher = "Livia Lubin", Rating = "4.7", BackgroundColor = "#FDB2C0", ImageUrl="teacher5.png", TeacherTitle="Developer" } };
GetSubjects();
}
private void GetSubjects()
{
CVSubjects.ItemsSource = subjects;
CVGridSubjects.ItemsSource = subjects;
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
Navigation.PushModalAsync(new DetailsPage());
}
}
How do I know pass the data from my CollectionView, I have tried to pass the data through parameters but for some reason when I add a name to for example a lable that contains the name of the subject, I cannot access it inisde c# code, anyone knows how to fix this?
CollectionView has built in events for handling selection, it is not neccesary to use a GestureRecognizer
<CollectionView SelectionMode="Single"
SelectionChanged="OnCollectionViewSelectionChanged" ... >
then you can pass the selected item to the next page via it's constructor
void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
var current = (e.CurrentSelection.FirstOrDefault() as Subjects);
Navigation.PushModalAsync(new DetailsPage(current));
}
I am developing an application in xamarin forms and I have problems accessing the event of a button that I have in a CollectionView. For each button that is selected, depending on the row it is in, it will do a different thing with the id.
My xaml code with the CollectionView is as follows:
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="85" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Label Grid.Column="1"
Text="{Binding id_cliente}"
TextColor="black"
VerticalOptions="CenterAndExpand"
FontAttributes="Bold" />
<Label
Grid.Column="2"
Text="{Binding categoria}"
FontAttributes="Italic"
VerticalOptions="CenterAndExpand"
TextColor="black"/>
<Label Grid.Column="3"
Text="{Binding descripcion}"
TextColor="black"
VerticalOptions="CenterAndExpand"
FontAttributes="Bold" />
<Label
Grid.Column="4"
Text="{Binding estado}"
TextColor="Yellow"
VerticalOptions="CenterAndExpand"
FontAttributes="Bold" />
<Button Grid.Column="5" Text="Confirmar" BorderColor="#2b3c3c" BorderWidth="1" FontAttributes="Bold" BackgroundColor="#4ba862" TextColor="White" HeightRequest="60" Margin="0,0,0,0" x:Name="btnconfirmar" Clicked="ButtonConfirmacion_Clicked" Command="{Binding id_trabajo}"/>
<Button Grid.Column="6" Text="Asignar" BorderColor="#2b3c3c" BorderWidth="1" FontAttributes="Bold" BackgroundColor="#4ba862" TextColor="White" HeightRequest="60" Margin="0,0,0,0" x:Name="btnasignar" Clicked="ButtonListaTrabajos_Clicked"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
And in the cs code of that page I have:
private void ButtonConfirmacion_Clicked(object sender, EventArgs e)
{
Trabajo selectedItem1 = e.CurrentSelection[0] as Trabajo;
}
This code, when that row is selected, with an OnSelectionChanged (sender, e) method if it picks up the item which has been selected.
You could use the code below to get the x:Name of button in a row.
private void ButtonConfirmacion_Clicked(object sender, EventArgs e)
{
var button = sender as Button;
var elemets = (button.Parent as Grid).Children;
foreach (var item in elemets)
{
if (item.GetType().Name == "Button")
{
var btn_name = item.StyleId;
}
}
}
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);
}
}
Below I've attached snippets of my xaml & cs files. I'm trying to bind the entry boxes to the correct properties & the label is to be binded to the total property. I'm obviously going wrong somewhere I just can't put my finger on where. When using WPF I lay out my binding the same way. I've tried googling this & several videos which none seem to help my problem.
XAML
<Label Text="{Binding Total}"
TextColor="Black"
FontSize="50"
Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="4"
Grid.RowSpan="1"
VerticalOptions="Center"
HorizontalOptions="Center"/>
<Label Text="APR Amount"
TextColor="Black"
FontSize="16"
Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="5"
Grid.RowSpan="1"
VerticalOptions="Center"
HorizontalOptions="Center"/>
<Label Text="£APR"
TextColor="Black"
FontSize="30"
Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="6"
Grid.RowSpan="1"
VerticalOptions="Center"
HorizontalOptions="Center"/>
<BoxView Color="CornflowerBlue"
CornerRadius="0"
Grid.Column="0"
Grid.ColumnSpan="5"
Grid.Row="7"
Grid.RowSpan="1"
WidthRequest="700"
HeightRequest="5"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label Text="Loan Amount"
TextColor="Black"
FontSize="20"
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="9"
Grid.RowSpan="2"
VerticalOptions="Center"
HorizontalOptions="Center"
Margin="0,0,0,0" />
<Entry Grid.Row="9"
Grid.Column="2"
Grid.ColumnSpan="3"
Grid.RowSpan="2"
WidthRequest="120"
VerticalOptions="Center"
HorizontalOptions="End"
Text="{Binding loanLength}"
Margin="0,0,45,0" />
<Label Text="Interest Rate"
TextColor="Black"
FontSize="20"
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="11"
Grid.RowSpan="2"
VerticalOptions="Center"
HorizontalOptions="Center"
Margin="0,0,0,0" />
<Entry Grid.Row="11"
Grid.RowSpan="2"
Grid.Column="2"
Grid.ColumnSpan="3"
WidthRequest="120"
VerticalOptions="Center"
HorizontalOptions="End"
Text="{Binding intRate}"
Margin="0,0,45,0" />
<Label Text="Loan Length (Years)"
TextColor="Black"
FontSize="20"
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="13"
Grid.RowSpan="2"
VerticalOptions="Center"
HorizontalOptions="Center"
Margin="0,0,0,0" />
<Entry Grid.Row="13"
Grid.RowSpan="2"
Grid.Column="2"
Grid.ColumnSpan="3"
WidthRequest="120"
VerticalOptions="Center"
HorizontalOptions="End"
Text="{Binding loanLength}"
Margin="0,0,45,0"/>
C#
private int loanAmount { get; set; }
public int Loan
{
get => loanAmount;
set
{
loanAmount = value;
OnPropertyChanged("Loan");
CalculateAPR();
}
}
private int intRate { get; set; }
public int Interest
{
get => intRate;
set
{
intRate = value;
OnPropertyChanged("Interest");
CalculateAPR();
}
}
private int loanLength { get; set; }
public int Length
{
get => loanLength;
set
{
loanLength = value;
OnPropertyChanged("Length");
CalculateAPR();
}
}
private string total { get; set; }
public string Total
{
get => total;
set
{
total = value;
OnPropertyChanged("Total");
}
}
public void CalculateAPR()
{
if (Interest != 0)
{
Total = "£" + (Loan * Length) / Interest;
}
else
{
Total = "£ -";
}
}
you need to bind to a public property like "Length" or "Interest"
and call PropertyChanged(nameof(loanLength)); for example (with private inside)
check this if you need
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-binding-basics
I created a demo to simulate your code,and it worked properly.
There are severals problems in your code:
1.We should bind a public property, for example, you can bind like this:
<Entry
Text="{Binding Loan}"
Margin="0,0,45,0" />
Instead of
<Entry
Text="{Binding loanLength}"
Margin="0,0,45,0" />
The same is true of other fields.
Replace <Entry Text="{Binding intRate }"/> with <Entry Text="{Binding Interest}"/>
and
Replace <Entry Text="{Binding loanLength }"/> with <Entry Text="{Binding Length}"/>
2.Try the following bindingContext code:
<Grid >
<Grid.BindingContext>
<local:ViewModel></local:ViewModel>
</Grid.BindingContext>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<!--other code-->
</Grid>