Develop Reference

Popup in WPF does not open

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;

programatically binding a listview in xamarin c#

I want to create a listview in Xamarin portable,
the item source of the listview is List<String> and my datatemplate of the listview is prepared by this function,
private DataTemplate createItemtemplate()
{
try
{
Label lbl_binding = new Label()
{
TextColor = Color.Red,
FontSize = 16,
VerticalTextAlignment = TextAlignment.Center,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
lbl_binding.SetBinding(Label.TextProperty, ".");
StackLayout stkBottom = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.Center,
Padding = new Thickness(0),
};
stkBottom.Children.Add(lbl_binding);
ViewCell vc = new ViewCell() {
View = stkBottom
};
DataTemplate Dp = new DataTemplate(() =>
{
return vc;
});
return Dp;
}
catch (Exception ex)
{
return null;
}
}
Now, my list view is populated, but all the labels are filled with last item, I mean the no of items are rightly populated, but all the items are filled with the last item only.
what i am doing wrong here?
lstAdmin = new ListView()
{
ItemTemplate = createItemtemplate(),
};
lstadmin.Itemsource = source;

Change your listview from List to ObservableCollection. This should do the work.

Below code useful for you as reference
Take Class members:
public class Dummy
{
public string Id { get; set; }
public string Img { get; set; }
public string Title { get; set; }
public string SubTitle { get; set; }
public string Count { get; set; }
public string Status { get; set; }
}
Create One ObservableCollectionList:
ObservableCollection<Dummy> productItems = new
ObservableCollection<Dummy>();
Add Items to the ObservableCollectionList:
productItems.Add(new Dummy() { Name = "0", Img = "Avatar.png",
Title = "Total Books", SubTitle = "Desc", Count = "50", Status =
"Total" });
productItems.Add(new Dummy() { Id = "1", Img = "Avatar.png", Title
= "Out of Stock Books", SubTitle = "Desc", Count = "40", Status =
"OutStock" });
Declare ListView:
ListView listview = new ListView()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
SeparatorVisibility = SeparatorVisibility.None,
RowHeight = 30,
};
listview.ItemTemplate = new DataTemplate(typeof(cell));
listview.ItemSelected += listviewItemSelected;
Take ViewCell and design your UI in ViewCell and assign binding
public class cell : ViewCell
{
public cell()
{
Image img = new Image()
{
VerticalOptions = LayoutOptions.StartAndExpand,
};
img.SetBinding(Image.SourceProperty, new Binding("Img"));
Label lbltitle = new Label()
{
VerticalOptions = LayoutOptions.Start,
TextColor = Color.Black
};
lbltitle.SetBinding(Label.TextProperty, new
Binding("Title"));
Label lbldesc = new Label()
{
VerticalOptions = LayoutOptions.Start,
TextColor = Color.Black
};
lbldesc.SetBinding(Label.TextProperty, new
Binding("SubTitle"));
StackLayout lblstack = new StackLayout()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { lbltitle, lbldesc },
};
BoxView boxEdit = new BoxView()
{
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.End,
Color = Color.Black,
HeightRequest = 20,
WidthRequest = 10
};
tapGestureEdit.Tapped += tapGestureEditTapped;
Label lblCount = new Label()
{
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
TextColor = Color.Black
};
lblCount.SetBinding(Label.TextProperty, new
Binding("Count"));
StackLayout stackCount = new StackLayout()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.EndAndExpand,
Children = { boxEdit, lblCount },
};
StackLayout stackMain = new StackLayout()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { img, lblstack, stackCount },
Orientation = StackOrientation.Horizontal,
Margin = new Thickness(10, 10, 10, 10)
};
View = stackMain;
}
}

public class AdminCell : ViewCell
{
public AdminCell()
{
Label lbl_binding = new Label()
{
TextColor = Color.FromRgb(30, 144, 255),
FontSize = 16,
VerticalTextAlignment = TextAlignment.Center,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
lbl_binding.SetBinding(Label.TextProperty, ".");
StackLayout stkBottom = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.Center,
Padding = new Thickness(0),
};
stkBottom.Children.Add(lbl_binding);
View = stkBottom;
}
}
this code is working for me removed the template and use this cell, i still don't understand why the data template is not working

I had the same issue and after some tests I've figured out how to not get always the last item.
You should put the Label creation ,and all the other elements you want put as ItemTemplate, inside the lambda of the DataTemplate like this (example code) :
DataTemplate itemTemplate = new DataTemplate(() =>
{
Label label = new Label()
{
Margin = new Thickness(45, 0, 0, 0),
HorizontalOptions = LayoutOptions.Start,
FontSize = (double)Xamarin.Forms.Application.Current.Resources["BodyFontSize"],
HeightRequest = 20
};
label.SetBinding(Label.TextProperty, "Name");
ViewCell templateCell = new ViewCell()
{
View = label
};
return templateCell;
});
Hope that helps (helped in my case).

Xamarin forms RelativeLayout not appearing

I am following some pretty standard Xamarin forms tutorials and I am really struggling to get the RelativeLayout to work. Ultimately I want to have an ActivityIndicator overlaid on top of the mainContent:
BindingContext = new LoginViewModel(this);
Padding = new Thickness(20);
Title = "Login";
var image = new Image
{
Source = ImageSource.FromFile("logo.png"),
HeightRequest = 50
};
var label = new Label
{
Text = "...",
FontSize = 20,
HorizontalTextAlignment = TextAlignment.Center
};
var errorLabel = new Label
{
Text = "",
TextColor = Color.Red,
FontSize = 20,
HorizontalTextAlignment = TextAlignment.Center
};
var loginButton = new Button
{
Text = "Log In",
BackgroundColor = Color.Black,
TextColor = Color.White,
FontSize = 20,
HeightRequest = 50
};
var loginEntry = new Entry
{
Placeholder = "Username"
};
var passwordEntry = new Entry
{
Placeholder = "Password"
};
var copywrite = new Label
{
Text = "© 2016",
FontSize = 15,
HorizontalTextAlignment = TextAlignment.Center
};
var loadingIndicator = new ActivityIndicator
{
BackgroundColor = Color.Blue,
IsVisible = true
};
...
var topLayer = new StackLayout
{
Spacing = 10,
Children = { image, label, loginEntry, passwordEntry, loginButton, errorLabel },
VerticalOptions = LayoutOptions.Start
};
var bottomLayer = new StackLayout
{
Spacing = 10,
Children = { copywrite },
VerticalOptions = LayoutOptions.End
};
var mainContent = new StackLayout
{
Children =
{
topLayer,
new StackLayout
{
VerticalOptions = LayoutOptions.CenterAndExpand,
},
bottomLayer
},
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.Green
};
var r = new RelativeLayout()
{
BackgroundColor = Color.Pink
};
r.Children.Add(mainContent,
Constraint.RelativeToParent((parent) =>
{
return parent.Width;
}),
Constraint.RelativeToParent((parent) =>
{
return parent.Height;
})
);
Content = r;
When I set Content = mainContent I see everything fine, but with the above code I get a white screen. I have been looking here.
When I try this:
var overlay = new AbsoluteLayout()
{
BackgroundColor = Color.Pink
};
AbsoluteLayout.SetLayoutFlags(mainContent, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(mainContent, new Rectangle(0f, 0f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(loadingIndicator, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(loadingIndicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
overlay.Children.Add(mainContent);
overlay.Children.Add(loadingIndicator);
Content = overlay;
I can see the Green and Pink views, but they may as well be stacked (as opposed to being overlaid) - but also I cannot see the Activity Indicator inside the Pink Absolute layout.

For the RelativeLayout, the Add method you are calling is setting a constraint on X and Y, not on width and height. The order of the parameters for that variant of Add is:
Child View
X constraint
Y constraint
Width constraint
Height constraint
With all constraints being optional.
To explicitly place it over the entire screen, do something like this:
r.Children.Add(mainContent,
Constraint.Constant(0),
Constraint.Constant(0),
Constraint.RelativeToParent((parent) =>
{
return parent.Width;
}),
Constraint.RelativeToParent((parent) =>
{
return parent.Height;
})
);
For the AbsoluteLayout, try a slightly different set of constraints:
AbsoluteLayout.SetLayoutFlags(mainContent, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(mainContent, new Rectangle(0f, 0f, 1f, 1f));
This explicitly specifies that mainContent is to occupy the entire AbsoluteLayout rather than relying on the actual layout size of mainContent.

Carousel Page Indicator

I have a Xamarin.Forms (1.4.2.6359) Project using Visual Studio 2013 and have created the carousel page below. I want to add page indicators, i.e. dots over top of the carousel page. Is this able to be done with the Xamarin Forms CarouselPage?
public class SplashPage : CarouselPage
{
public SplashPage ()
{
this.Children.Add(new CarouselChild("Logo.png", "Welcome"));
this.Children.Add(new CarouselChild("Settings.png", "Settings"));
}
}
class CarouselChild : ContentPage
{
public CarouselChild(string image, string text)
{
StackLayout layout = new StackLayout
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
};
layout.Children.Add(new Image
{
Source = image,
});
layout.Children.Add(new Label
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.EndAndExpand,
Text = text,
Scale = 2,
});
this.Content = layout;
}
}

Trying to keep things simple, what I did was:
MyCarouselPage:
class MyCarouselPage : CarouselPage
{
private int totalPages;
private int currentPage;
public MyCarouselPage()
{
var pages = GetPages();
totalPages = pages.Length;
this.ChildAdded += MyCarouselPage_ChildAdded;
for (int i = 0; i < totalPages; i++)
{
currentPage = i;
this.Children.Add(pages[i]);
}
}
void MyCarouselPage_ChildAdded(object sender, ElementEventArgs e)
{
var contentPage = e.Element as MyPageBase;
if (contentPage != null)
{
contentPage.FinalStack.Children.Add(new CarouselPageIndicator(currentPage, totalPages, "indicator.png", "indicator_emtpy.png"));
}
}
private MyPageBase[] GetPages()
{
var pages = new MyPageBase[] { new Page1(), new Page2() };
return pages;
}
}
The Base class for the Pages
class MyPageBase:ContentPage
{
public StackLayout FinalStack { get; set; }
}
CarouselPageIndicator
public class CarouselPageIndicator : StackLayout
{
public CarouselPageIndicator(int currentIndex, int totalItems, string sourceIndicator, string souceEmptyIndicator)
{
this.Orientation = StackOrientation.Horizontal;
this.HorizontalOptions = LayoutOptions.CenterAndExpand;
for (int i = 0; i < totalItems; i++)
{
var image = new Image();
if (i == currentIndex)
image.Source = sourceIndicator;
else
image.Source = souceEmptyIndicator;
this.Children.Add(image);
}
this.Padding = new Thickness(10);
}
}
And for the n-Pages
class Page1:MyPageBase
{
public Page1()
{
var layout = new StackLayout
{
Children = {
new Label{Text="Page 1"}
}
};
this.FinalStack = layout;
this.Content = FinalStack;
}
}

I was able to make a work around for the problem by hard coding the page indicators by changing CarouselChild method below:
public CarouselChild(string image, string text, int pageNumber, int pageCount)
{
var width = this.Width;
StackLayout layout = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Padding = new Thickness( 40, 40, 40, 40),
BackgroundColor = Color.Black,
};
layout.Children.Add(new Image
{
Source = image,
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.Center,
});
layout.Children.Add(new Label
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
Text = text,
FontSize = 36,
LineBreakMode = LineBreakMode.WordWrap,
});
layout.Children.Add(CarouselPageIndicator(pageNumber, pageCount));
this.Content = layout;
}
internal StackLayout CarouselPageIndicator(int pageNumber, int pageCount)
{
StackLayout layout = new StackLayout
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.EndAndExpand,
};
if (pageCount >= pageNumber)
{
for (int i = 1; i < pageCount + 1; i++)
{
if (i == pageNumber)
{
layout.Children.Add(new Image
{
Source = "Light.png",
});
}
else
{
layout.Children.Add(new Image
{
Source = "Dark.png",
});
}
}
}
return layout;
}

XamarinForms RelativeLayout: Can't get relative layout to resize correctly in a row

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.