I have created ImageButton, children of StackLayout and i want to activate delete method by click on it. I cant use "Clicked" so i dont know how to do that.
Content = new StackLayout
{
Children =
{
new ImageButton {Source = "/drawable/delete", HorizontalOptions = LayoutOptions.End, HeightRequest = 60, BackgroundColor = Color.Red, Padding = new Thickness(20,-5), CornerRadius = 45}
}
}
You could use TapGestureRecognizer
var imagebutton = new ImageButton {Source = "/drawable/delete", HorizontalOptions = LayoutOptions.End, HeightRequest = 60, BackgroundColor = Color.Red, Padding = new Thickness(20,-5), CornerRadius = 45}
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
// handle the tap
};
imagebutton .GestureRecognizers.Add(tapGestureRecognizer);
Content = new StackLayout
{
Children =
{
imagebutton
}
}
Related
I have made side menu using Rg.Plugins.Popups for Xamarin.
Everything is ok, but appearing animation doesn't work for some reason. As you can see menu just appears out of nowhere when it should look like disappearing animation.
FilterMenuCommand = new Command(() =>
{
var contentView = new ReportsPageFilterMenuContentView(this);
PopupNavigation.Instance.PushAsync(new ReportsPageFilterMenuPopupPage(contentView, this));
});
My PopupPage class:
public partial class ReportsPageFilterMenuPopupPage : PopupPage
{
public ReportsPageFilterMenuPopupPage(ReportsPageFilterMenuContentView contentView, ReportsViewModel viewModel)
{
InitializePageComponent(contentView, viewModel);
}
protected void InitializePageComponent(ReportsPageFilterMenuContentView contentView, ReportsViewModel viewModel, float width = 340.0f)
{
BindingContext = viewModel;
var moveAnimation = new MoveAnimation
{
DurationIn = 800,
DurationOut = 600,
EasingIn = Easing.SinIn,
EasingOut = Easing.SinOut,
HasBackgroundAnimation = true,
PositionIn = MoveAnimationOptions.Right,
PositionOut = MoveAnimationOptions.Right,
};
Animation = moveAnimation;
Resources["DecimalConverter"] = new DecimalConverter();
var frame = new Frame
{
WidthRequest = width,
CornerRadius = 0,
Padding = new Thickness(24, 20, 24, 20),
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.StartAndExpand,
BackgroundColor = Color.White
};
var gridRowDefinitions = new RowDefinitionCollection
{
new RowDefinition {Height = GridLength.Auto}, new RowDefinition {Height = GridLength.Star}
};
var grid = new Grid
{
RowDefinitions = gridRowDefinitions
};
var stackLayout = new StackLayout
{
Orientation = StackOrientation.Horizontal,
BackgroundColor = Color.White
};
Grid.SetRow(stackLayout, 0);
Grid.SetRow(contentView, 1);
var label = new Label
{
FontFamily = "Roboto",
FontAttributes = FontAttributes.Bold,
FontSize = 20,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Start,
Margin = new Thickness(1),
Text = MainResource.Filters
};
var imageButton = new ImageButton
{
Source = (FileImageSource)#"Assets/cross.png",
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.EndAndExpand,
Margin = new Thickness(1),
Command = viewModel.CloseCommand
};
stackLayout.Children.Add(label);
stackLayout.Children.Add(imageButton);
grid.Children.Add(stackLayout);
grid.Children.Add(contentView);
frame.Content = grid;
Content = frame;
}
}
Xamarin.Forms version: 4.6.0.800
Rg.Plugins.Popup version: 2.0.0.3
If you have any clue or idea where to even start fixing this problem, please, share it with me in comments.
I use your code and test on the following simulators
Android phone
Android tablet
iOS iPhone
iOS iPad
It works fine , the appearing and disappearing animation works as expected .
I would suggest you update Xamarin.Forms and Rg.Plugins.Popup version package to the latest .
I have a datagrid with modified column header which contain a button which shall open a popup.
This is written in code behind because of different data sources with different number of columns.
That's how it looks like:
Popups are stored in:
Dictionary<string, Popup> HeaderPopups = new Dictionary<string, Popup>();
And here the code behind:
dgMaterials.AutoGeneratingColumn += (ss, ee) =>
{
Button b = new Button() { Content = "...", Name = "btn_" + ee.PropertyName, Margin = new Thickness(3) };
b.Click += HeaderFilterButtonClick;
StackPanel stackPanel = new StackPanel() { Orientation = Orientation.Horizontal };
stackPanel.Children.Add(new TextBlock() { Text = ee.PropertyName, VerticalAlignment = VerticalAlignment.Center });
stackPanel.Children.Add(b);
ee.Column.Header = stackPanel;
Popup pop = new Popup() { Name = "pop_" + ee.PropertyName, Placement = PlacementMode.Bottom, PlacementTarget = b, StaysOpen = false, Width = 200, Margin = new Thickness(3) };
Border bord = new Border() { Background = Brushes.White, BorderBrush = Brushes.Gray, BorderThickness = new Thickness(1,1,1,1) };
pop.DataContext = bord;
HeaderPopups.Add(ee.PropertyName, pop);
StackPanel stack = new StackPanel() { Margin = new Thickness(5, 5, 5, 15) };
bord.DataContext = stack;
StackPanel stackButtons = new StackPanel() { Orientation = Orientation.Horizontal, Margin = new Thickness(0, 0, 0, 15) };
Button bAll = new Button() { Margin = new Thickness(0, 0, 0, 0), Name = "btnAll_" + ee.PropertyName };
bAll.Click += btnAllClick;
TextBlock txtAll = new TextBlock() { Text = "Select All", Foreground = Brushes.Blue, Cursor = Cursors.Hand };
bAll.Content = txtAll;
Button bNone = new Button() { Margin = new Thickness(10, 0, 0, 0), Name = "btnNone_" + ee.PropertyName };
bNone.Click += btnNoneClick;
TextBlock txtNone = new TextBlock() { Text = "Select None", Foreground = Brushes.Blue, Cursor = Cursors.Hand };
bNone.Content = txtNone;
stackButtons.Children.Add(bAll);
stackButtons.Children.Add(bNone);
ListBox list = new ListBox() { Name = "lst_" + ee.PropertyName, BorderThickness = new Thickness(0) };
stack.Children.Add(stackButtons);
stack.Children.Add(list);
};
So for each column a popup is generated and I have the popups with the keys Spec_No, Grade and Class in my HeaderPopups dictionary.
I want the appropriate popups to show up beneath the clicked button, like in the example from http://www.jarloo.com/excel-like-autofilter-in-wpf/
Look here:
My problem is to open these popups in HeaderFilterButtonClick-Event. I tried it with:
private void HeaderFilterButtonClick(object sender, RoutedEventArgs e)
{
Button b = sender as Button;
txtTest.Text += e.OriginalSource.ToString() + Environment.NewLine;
txtTest.Text += e.Source.ToString() + Environment.NewLine;
txtTest.Text += b.Name;
if (b.Name == "btn_Spec_No")
{
HeaderPopups["Spec_No"].IsOpen = true;
}
}
but it doesn't work.
Can anybody help?
Your Popup is currently empty and thus completely invisible.
You should set the Child property of it to the Border and also set the Child property of the Border to something for it to render:
Popup pop = new Popup() { ... };
Border bord = new Border() { Background = Brushes.White, BorderBrush = Brushes.Gray, BorderThickness = new Thickness(1, 1, 1, 1) };
bord.Child = new TextBlock() { Text = "some content..." };
pop.Child = bord;
The popup is opening and rendering, but it is empty, so it can't be seen.
the problem is here
Border bord = new Border() { Background = Brushes.White, BorderBrush = Brushes.Gray, BorderThickness = new Thickness(1,1,1,1) };
pop.DataContext = bord;
Datacontext is used to set Binding targets, which an empty popup has no bindings.
You need the fill the child object instead by changing the above into
Border bord = new Border() { Background = Brushes.White, BorderBrush = Brushes.Gray, BorderThickness = new Thickness(1,1,1,1) };
pop.Child = bord;
this sets the root of the popup container to ther Border object.
You will also have to do the same with the stack panel and border
StackPanel stack = new StackPanel() { Margin = new Thickness(5, 5, 5, 15) };
bord.Child = stack;
I'm creating a menu and this is the scene:
(I'm just hiding the items names)
So this is the code:
public Menu(List<Document> documents, MenuItem parent) {
ParentItem = parent;
Orientation = StackOrientation.Vertical;
HorizontalOptions = LayoutOptions.FillAndExpand;
VerticalOptions = LayoutOptions.FillAndExpand;
Spacing = 0;
Margin = new Thickness(0);
Padding = new Thickness(0);
if (documents.Count > 0)
foreach (Document doc in documents)
AddItem(new MenuItem(doc, this));
}
public MenuItem(Document doc, Menu parent) {
Orientation = StackOrientation.Vertical;
HorizontalOptions = LayoutOptions.FillAndExpand;
VerticalOptions = LayoutOptions.Start;
BackgroundColor = Color.Transparent;
Spacing = 0;
Margin = new Thickness(0);
Padding = new Thickness(0);
Document = doc;
Parent = parent;
Head = new MenuItemHead(doc);
var bdy = new StackLayout() {
Orientation = StackOrientation.Vertical,
HorizontalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.Transparent,
Spacing = 0,
Margin = new Thickness(0),
Padding = new Thickness(15, 0, 0, 0)
};
bdy.Children.Add(new Menu(doc.Documents, this));
Body = bdy;
Active = false;
if (!doc.IsFolderOpen) {
var tapped = new TapGestureRecognizer();
tapped.Tapped += (s, e) => {
bool wasActive = Active;
parent.CollapseItems();
if (!wasActive) Show();
};
Head.GestureRecognizers.Add(tapped);
} else {
if (doc.Documents.Count > 0) {
var tapped = new TapGestureRecognizer();
tapped.Tapped += async (s, e) => {
await MenuView.Push(new Menu(doc.Documents, this));
};
Head.GestureRecognizers.Add(tapped);
}
}
}
Why the menu item body is overflowing? I don't get it, maybe I'm missing something.
If you check the Microsoft Docs for a StackLayout
You will find out that your StackLayout has a default spacing of 6.
Setting the Spacing to 0 should do the trick for you.
I have ListView and I assigned DataTemplate to it. Now I have some controls in it like Button, Images and Labels. Now I want some actions on click event of that controls.
My ListView is like this-
listof_ingredients_and_lifestyleDiets = new ListView
{
BackgroundColor = Color.FromHex ("#CDBA96"),
ItemTemplate = preferenceTableCell,
SeparatorColor =Color.FromHex("#CDBA96"),
RowHeight=40,
HeightRequest=200
};
My DataTemplate is like this-
DataTemplate preferenceTableCell = new DataTemplate (() => {
var itemName = new Label {
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
WidthRequest=80,
FontSize=14,
TextColor=ColorResources.TextColor,
};
itemName.SetBinding (Label.TextProperty, "Name");
var radiobtn_allergen = new CircleImage {
BorderColor = ColorResources.commonButtonBackgroundColor,
HeightRequest = 25,
WidthRequest = 25,
Aspect = Aspect.AspectFill,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Source="radio_Check.png"
};
radiobtn_allergen.SetBinding(CircleImage.IsVisibleProperty,"isExcluded");
var radiobtn_preference = new CircleImage {
BorderColor = ColorResources.commonButtonBackgroundColor,
HeightRequest = 25,
WidthRequest = 25,
Aspect = Aspect.AspectFill,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Source="radio_uncheck.png",
};radiobtn_preference.SetBinding (CircleImage.IsVisibleProperty, "isExcluded");
var btnDelete=new Button{
Image="deleteBtn.png",
HorizontalOptions=LayoutOptions.EndAndExpand,
HeightRequest=50,
WidthRequest=30
};
StackLayout stacklayout = new StackLayout {
Spacing = 60,
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { itemName,radiobtn_allergen,radiobtn_preference,btnDelete }
};
return new ViewCell { View = stacklayout };
});
Now My question is, I want implement tap gesture for image tap and button click event for button control. How to do this?
Click handler for a button
btnDelete.Clicked += ((sender, args) => {
// perform actions here
});
attach a gesture recognizer to an Image
TapGestureRecognizer tapped = new TapGestureRecognizer();
tapped.Tapped += ((o2, e2) =>
{
// perform actions here
});
img.GestureRecognizers.Add(tapped);
Here is my issue:
The red block is meant to be the avatar for the person sometime, and the blue balloon a chat message. The chat message object is a RelativeLayout with a Label and an Image positioned one of top of each other, but not matter what I do, I can't get it to be centered. I only have one View:
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace TestChat
{
public partial class ChatPage : ContentPage
{
public ChatPage ()
{
this.Title = "Chat page";
InitializeComponent ();
}
void OnChatClick (object sender, EventArgs args) {
Image pic = new Image {
Source = "bubble.png",
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Aspect = Aspect.Fill
};
Label textLabel = new Label {
Text = "Hello",
TextColor = Color.White,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.EndAndExpand
};
Frame picFrame = new Frame {
HasShadow = false,
BackgroundColor = Color.Red,
Padding = new Thickness (0),
Content = pic
};
Frame textFrame = new Frame {
HasShadow = false,
BackgroundColor = Color.Transparent,
Padding = new Thickness (0,0,15,0),
Content = textLabel
};
RelativeLayout overlayLayout = new RelativeLayout { BackgroundColor = Color.Blue, HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };
overlayLayout.Children.Add (picFrame,
xConstraint: Constraint.RelativeToParent((parent) => parent.X),
yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
);
overlayLayout.Children.Add (textFrame,
xConstraint: Constraint.RelativeToParent((parent) => parent.X),
yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
);
Frame overlayContainerFrame = new Frame {
HasShadow = false,
BackgroundColor = Color.Red,
Padding = new Thickness(1),
HeightRequest = 100,
HorizontalOptions = LayoutOptions.CenterAndExpand,
Content = overlayLayout
};
StackLayout horizontalLayout = new StackLayout {
Orientation = StackOrientation.Horizontal
};
BoxView avatarImage = new BoxView {
Color = Color.Red,
HeightRequest = 50,
WidthRequest = 50
};
horizontalLayout.Children.Add (avatarImage);
horizontalLayout.Children.Add (overlayContainerFrame);
ChatScrollViewStackLayout.Children.Add (horizontalLayout);
//ChatStackLayout.Children.Add (pic);
}
void CreateChatBubble() {
}
}
}
Does anyone have any ideas why I can't get the relative layout to resize accordingly so it doesn't go out of range of the screen? I tried setting its WidthConstraint to parent.With-52 to make up for the avatar taking up 50 units horizontally, but instead I get this:
I've been stuck at this for at least 8 hours now, and I'm pretty much out of ideas. Any tips would be greatly appreciated. Here is the project's git repo so you can clone it if you would like to test anything:
https://github.com/sgarcia-dev/xamarin-chat.git
Any help would be greatly appreciated, and feel free to completely ignore my code if it looks messy if you can replicate what I want. (One image on the left, and a message bubble on the right with an underlying image background)
Check out this implementation
void OnChatClick (object sender, EventArgs args) {
var pic = new Image {
Source = "bubble.png",
Aspect = Aspect.Fill
};
var textLabel = new Label {
Text = "Hello",
TextColor = Color.White,
VerticalOptions = LayoutOptions.Center,
LineBreakMode = LineBreakMode.WordWrap
};
var relativeLayout = new RelativeLayout {
BackgroundColor = Color.Navy,
// HeightRequest = 1000
};
var absoluteLayout = new AbsoluteLayout {
VerticalOptions = LayoutOptions.Center,
BackgroundColor = Color.Blue
};
var frame = new Frame {
BackgroundColor = Color.Red
};
absoluteLayout.Children.Add (pic,
new Rectangle (0, 0, 1, 1),
AbsoluteLayoutFlags.All);
absoluteLayout.Children.Add (textLabel,
new Rectangle (0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize),
AbsoluteLayoutFlags.PositionProportional);
// textLabel.SizeChanged += (object label, EventArgs e) => {
// relativeLayout.HeightRequest = textLabel.Height + 30;
// absoluteLayout.HeightRequest = textLabel.Height + 30;
// };
relativeLayout.Children.Add (frame,
heightConstraint: Constraint.RelativeToParent (parent => parent.Height),
widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3));
relativeLayout.Children.Add (absoluteLayout,
xConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3),
widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.7));
ChatScrollViewStackLayout.Children.Add (relativeLayout);
}
If you need to auto-adjust height of the chat message for long text uncomment all five commented lines.