I have the following functionality given below:
When clicking on details, i want the text that is displayed on the contentview shall be displayed on the new detailspage that is created by push async. How can I send parameters containing the info given in the content, e.g. title, category and description.
I have a tap gesture recognizer:
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
That then leads to creating a new page with the code behind:
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
await Navigation.PushAsync(new DetailsPage(user), true);
}
So how shall I bind the labels containing title, description and category to display in the new page that is created upon click?
Here's the xaml code behind the labels:
<StackLayout>
<StackLayout Orientation="Horizontal">
<BoxView Color="LightGray"
WidthRequest="90"
HeightRequest="90"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<StackLayout Padding="0">
<Label x:Name="Title" Text="Title"
FontSize="22"
FontFamily="Grotesk"
TextColor="Black"
Margin="10, -2, 0, 0"
VerticalOptions="Fill" />
<Label x:Name="Category" Text="Category"
FontSize="16"
FontFamily="Grotesk"
TextColor="Gray"
Margin="10, -2, 0, 0"
VerticalOptions="Fill" />
<Label x:Name="Desc" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. etc.etc"
Margin="10, -4, 0, 0"
FontSize="15"
FontFamily="Latow"
VerticalOptions="Start"
MaxLines="3"/>
</StackLayout>
</StackLayout>
use the Label's BindingContext
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var label = (Label)sender;
// you will need to cast it to the correct type
var item = (MyClass)label.BindingContext;
// then pass it to your page
await Navigation.PushAsync(new DetailsPage(user,item), true);
}
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
The swipeview doesnt work when I open the app and press accept button but it works after when I open and close the detail page.
xaml shows list of events from sql and show swipeitem
<CollectionView x:Name="eventview"
BackgroundColor="Transparent"
ItemSizingStrategy="MeasureAllItems"
SelectionMode="Single"
SelectionChanged="eventview_SelectionChanged"
EmptyView="No Pending events">
<SwipeView.RightItems>
<SwipeItems SwipeBehaviorOnInvoked="Close">
<SwipeItem Text="Decline" BackgroundColor="red"/>
<SwipeItem Text="Accept" BackgroundColor="Green" Invoked="SwipeItem_Invoked"/>
</SwipeItems>
</SwipeView.RightItems>
<Grid Padding="10">
<StackLayout>
<Label Text="{Binding Name}" VerticalOptions="Center" FontSize="Small"/>
<Label Text="{Binding Date}" VerticalOptions="Center" FontSize="Small"/>
<Label Text="{Binding stats}" VerticalOptions="Center" FontSize="Small"/>
</StackLayout>
</Grid>
</SwipeView>
</DataTemplate>
</CollectionView.ItemTemplate>
cs shows click on the item that will open detail page and when click on the swipeitem
private async void eventview_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
lastSelection = e.CurrentSelection[0] as Event;
var eventss = e.CurrentSelection.FirstOrDefault() as Event;
var eventpage = new Eventdetailpage();
eventpage.BindingContext = eventss;
await Navigation.PushAsync(eventpage);
}
private async void SwipeItem_Invoked(object sender, EventArgs e)
{
if (lastSelection != null)
{
lastSelection.stats = "Accepted";
await App.Database.UpdateventAysnc(lastSelection);
eventview.ItemsSource = await App.Database.querypendingevent();
accpetedevents.ItemsSource = await App.Database.queryacceptevent();
}
}
if lastSelection is null, then your if won't execute and nothing will happen
you should be able to get the current item from the sender's BindingContext
var item = (SwipeItem)sender;
lastSelection = (Event)item.BindingContext;
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));
}
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}">
I want to get the value from my clubid that I web service and pass it down to the next page so I would have a dynamic club detail. However, when I tried to do it, it shows me some errors. This are my codes.
ListClubs.xaml.cs
ClubApiClient service = new ClubApiClient();
public ListClubs ()
{
InitializeComponent();
}
protected async override void OnAppearing()
{
base.OnAppearing();
await setClubs(Clublistview);
}
private async Task setClubs(ListView listview)
{
var clublist = await service.getClubList(2);
listview.ItemsSource = clublist.ToList();
}
async void OnListClubsClicked(object sender, EventArgs e)
{
int clubid = int.Parse(lbId.Text); //Error msg: The name 'lbId' does not exist in the context
await Navigation.PushAsync(new DetailedClub());
}
ListClubs.xaml
<ListView x:Name="Clublistview">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="White"
Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Image Source="{Binding Logo}" IsVisible="true" WidthRequest="42" HeightRequest="42"/>
<Button Text="{Binding Name}" x:Name="BtnClub" AbsoluteLayout.LayoutBounds="100, 25, 100, 25" Clicked="OnListClubsClicked" TextColor="Black" VerticalOptions="FillAndExpand"/>
<Label Text="{Binding Id}" x:Name="lbId" IsVisible="false"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
using the name "lbId" isn't useful because every item in your list has a Label named "lbId".
You can use CommandParameter to add the Id to your Button
<Button Text="{Binding Name}" x:Name="BtnClub" AbsoluteLayout.LayoutBounds="100, 25, 100, 25" Clicked="OnListClubsClicked" TextColor="Black" VerticalOptions="FillAndExpand" CommandParameter="{Binding Id}" />
async void OnListClubsClicked(object sender, EventArgs e)
{
Button btn = (Button) sender;
int clubid = (int) btn.CommandParameter;
// pass the clubid to your Detail page
await Navigation.PushAsync(new DetailedClub(clubid));
}