I have some problems adding a click event to my project. The main logic is correct but I need some help with the click event.
The project puts some buttons on a Canvas and I would like to add a click event on them.
I'm using the Kinect v2 and every time is found a Body, and every time is found a SpineMid joint, the project draws some buttons around the body using the shape of a regular polygon.
In my case the problem is that I cannot click the buttons because they're cleared in every frame.
I call the function InitializeButtons every time I found that joint (and so, I created new buttons with every frame and then cleared them) so it's basically impossible to click them, there's no time to view the content of the button changing: they're immediately replaced!
Here's the code where I call the function:
foreach (Body body in bodies){
foreach (var item in body.Joints){
JointType jointType = item.Key;
Joint joint = item.Value;
if (joint.JointType == JointType.SpineMid) {
InitializeButtons(100, 200, center, verticies, 300)
}
}
}
And here's the code of the InizializeButtons function:
private void InitializeButtons(int height, int width, Point center, Point[] verticies, int radius)
{
Button test_button1 = new Button() { Background = Brushes.Aquamarine, Height = height, Width = width, Content = "I'm test button1!" };
Button test_button2 = new Button() { Background = Brushes.Aqua, Height = height, Width = width, Content = "I'm test button2!" };
Button test_button3 = new Button() { Background = Brushes.Beige, Height = height, Width = width, Content = "I'm test button3!" };
Button test_button4 = new Button() { Background = Brushes.BurlyWood, Height = height, Width = width, Content = "I'm test button4!" };
Button test_button5 = new Button() { Background = Brushes.Bisque, Height = height, Width = width, Content = "I'm test button5!" };
test_button1.Click += test_button1_Click;
canvas.Children.Add(test_button1);
canvas.Children.Add(test_button2);
canvas.Children.Add(test_button3);
canvas.Children.Add(test_button4);
canvas.Children.Add(test_button5);
Canvas.SetLeft(test_button1, 0);
Canvas.SetTop(test_button1, 0);
Canvas.SetLeft(test_button2, 0);
Canvas.SetTop(test_button2, 0);
Canvas.SetLeft(test_button3, 0);
Canvas.SetTop(test_button3, 0);
Canvas.SetLeft(test_button4, 0);
Canvas.SetTop(test_button4, 0);
Canvas.SetLeft(test_button5, 0);
Canvas.SetTop(test_button5, 0);
buttons = new List<Button> { test_button1, test_button2, test_button3, test_button4, test_button5 };
verticies = Polygon.CalculateVertices(buttons.Count, radius, 18, center);
int i = 0;
foreach (Button button in buttons)
{
Canvas.SetLeft(button, verticies[i].X);
Canvas.SetTop(button, verticies[i].Y);
i++;
}
verticies = null;
}
void test_button1_Click(object sender, RoutedEventArgs e)
{
Button clickedButton = (Button)sender;
clickedButton.Content = "let's try it";
}
Is there any way I can go beyond that?
Any help is really appreciate.
Thanks
Related
I cannot find a way to change the hover color when delopying it programmatically in c# winforms.
I hope someone can help me!
Code:
Button btn = new Button
{
Name = "btn1",
Width = 250,
Height = 250,
Location = new Point(0, 15),
BackColor = Color.Transparent,
FlatStyle = FlatStyle.Flat,
BackgroundImage = img,
BackgroundImageLayout = ImageLayout.Stretch,
};
You can specify the hover color outside of the initialization block:
// We create button
Button btn = new Button
{
...
}
// And then specify hovering behaviour
// Blue while hovering
btn.FlatAppearance.MouseOverBackColor = Color.Blue;
// Red when pressing (uncomment if you want)
// btn.FlatAppearance.MouseDownBackColor = Color.Red;
use MouseEnter and MouseLeave for change background color in button
Button btn = new Button
{
Name = "btn1",
Width = 250,
Height = 250,
Location = new Point(0, 15),
BackColor = Color.Transparent,
FlatStyle = FlatStyle.Flat,
BackgroundImage = img,
BackgroundImageLayout = ImageLayout.Stretch,
};
btn.MouseEnter += OnMouseEnter;
btn.MouseLeave += OnMouseLeave;
private void OnMouseEnter(object sender, EventArgs e)
{
button1.BackColor = Color.Red;
}
private void OnMouseLeave(object sender, EventArgs e)
{
button1.BackColor = Color.Transparent;
}
I'm setting up an Xamarin.Forms app where i am trying to add a "Module", saving it in a list and then visualizing it on Android via grid cells.
The problem is within the visualization. The problem is that i am trying to add multiple children to the same grid cell, but they are overlaying with each other.
public void CreateModuleGrids()
{
foreach (Module item in _mm.ModulesList)
{
gOut.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(100) });
gOut.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
gOut.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
Label lblBez = new Label();
lblBez.Text = item.Name.ToString();
lblBez.VerticalOptions = LayoutOptions.Center;
lblBez.HorizontalOptions = LayoutOptions.Center;
lblBez.WidthRequest = 151;
lblBez.HeightRequest = 25;
Label lblStatus = new Label();
lblStatus.WidthRequest = 151;
lblStatus.HeightRequest = 25;
if (item.Type == "blind")
{
lblStatus.Text = "100 %";
lblStatus.VerticalOptions = LayoutOptions.Center;
lblStatus.HorizontalOptions = LayoutOptions.Center;
}
else
{
lblStatus.Text = "Closed";
lblStatus.VerticalOptions = LayoutOptions.Center;
lblStatus.HorizontalOptions = LayoutOptions.Center;
}
if (item.Type == "blind")
{
bmp100.WidthRequest = (119);
bmp100.HeightRequest = (117);
bmp100.Aspect = Aspect.AspectFit;
bmp100.VerticalOptions = LayoutOptions.Center;
bmp100.HorizontalOptions = LayoutOptions.Center;
gOut.Children.Add(bmp100, 0, 0);
}
else
{
bmpClosed.WidthRequest = (119);
bmpClosed.HeightRequest = (117);
gOut.Children.Add(bmpClosed, 0, 0);
}
if (item.Type == "blind")
{
ImageButton btnArrowUp = new ImageButton();
btnArrowUp.WidthRequest = 37;
btnArrowUp.HeightRequest = 50;
btnArrowUp.Source = "ArrowUp.png";
btnArrowUp.Aspect = Aspect.AspectFit;
btnArrowUp.VerticalOptions = LayoutOptions.Start;
btnArrowUp.HorizontalOptions = LayoutOptions.Start;
btnArrowUp.Clicked += new EventHandler(this.btnArrowUp_click);
ImageButton btnArrowDown = new ImageButton();
btnArrowDown.WidthRequest = 37;
btnArrowDown.HeightRequest = 50;
btnArrowDown.Source = "ArrowDown.png";
btnArrowDown.Aspect = Aspect.AspectFit;
btnArrowDown.VerticalOptions = LayoutOptions.End;
btnArrowDown.HorizontalOptions = LayoutOptions.End;
btnArrowDown.Clicked += new EventHandler(this.btnArrowDown_click);
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnArrowDown, 0, 0);
gOut.Children.Add(btnArrowUp, 0, 0);
}
else
{
ImageButton btnOut = new ImageButton();
btnOut.Measure(37, 50);
btnOut.Source = "ArrowLeft.png";
btnOut.Clicked += new EventHandler(this.btnTipOpen_click);
ImageButton btnIn = new ImageButton();
btnIn.Measure(37, 50);
btnIn.Source = "ArrowRight.png";
btnIn.Clicked += new EventHandler(this.btnTipClose_click);
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnIn, 0, 0);
gOut.Children.Add(btnOut, 0, 0);
}
}
My expectation is having a grid instance that contains a label with the name of the module on the upper part, an imagebutton on the left side, an imagebutton on the right side, an image in the center and last a label under the image that shows the status. Thanks in advance!
The problem is that i am trying to add multiple children to the same
grid cell, but they are overlaying with each other.
The items are overlaying with each other because you add them to the same position in Grid.
To place views in a Grid you'll need to add them as children to the grid, then specify which row and column they belong in.
The last two parameter in function grid.Children.Add specify the position of the item in Grid. For example, there is a Grid with two rows and two Columns, then (0,0) means top left, and (1,1) means bottom right.
// left, top
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 1, 0);
grid.Children.Add(bottomLeft, 0, 1);
grid.Children.Add(bottomRight, 1, 1);
Back to your code, you add all your elements to (0,0), so they will appear in the same position.
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnIn, 0, 0);
gOut.Children.Add(btnOut, 0, 0);
Another problem in your code is you need a Layout container(Like stacklayout or other layouts) as Jason said to manage your elements. Because you create them in a foreach loop, and in each loop you add the same thing with same position to the gOut.
I think the RIGHT way is create a Grid with your labels and imageButtons with right position in each loop.Then add this Grid to a Layout container(This layout container is use to layout the Grid created in each loop). At last, set this layout container as ContentPage's content, Content = layout container to display your elements.
Have a look at this document may help you and there is also a sample there.
I need to display a full screen dialog (in application window boundaries) in my UWP application, but can't seems to make it work. I tried with :
ContentDialog only shows vertically stretched with FullSizeDesired="True"
Popup, even trying to set the width and height in code behind its not working
Flyout Placement="Full" only stretch it vertically just like the contentdialog
Can't believe I spend so much time on that thing :(
Thanks
Have you tried something like this:
var c = Window.Current.Bounds;
var g = new Grid
{
Width = c.Width,
Height = c.Height,
Background = new SolidColorBrush(Color.FromArgb(0x20, 0, 0, 0)),
Children =
{
new Rectangle
{
Width = 100,
Height = 100,
Fill = new SolidColorBrush(Colors.White),
Stroke = new SolidColorBrush(Colors.Black),
StrokeThickness = 3
}
}
};
var p = new Popup
{
HorizontalOffset = 0,
VerticalOffset = 0,
Width = c.Width,
Height = c.Height,
Child = g
};
p.IsOpen = true; // open when ready
You should see a semi-transparent overlay with a white rectangle in the middle of your screen.
To make a popup Fullscreen I did the following. Hope this helps.
I have a user control I wanted to show as a popup. Its name "URLUserControl"
Step 1: UI of the UC (Just the first bit. Not complete code)
<UserControl>
<Grid>
<Popup x:Name="MPopup" VerticalAlignment="Center">
<Grid x:Name="MainGrid">
Step 2: UC constructor adds the following
private void InitURLUserControl()
{
MPopup.IsOpen = true;
Window.Current.SizeChanged += Current_SizeChanged;
MainGrid.Width = Window.Current.Bounds.Width;
MainGrid.Height = Window.Current.Bounds.Height;
}
Step 3:
private void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
{
MainGrid.Width = Window.Current.Bounds.Width;
MainGrid.Height = Window.Current.Bounds.Height;
}
The above code will help the popup to be the center of the screen and display in fullscreen in size. Check it out. Happy coding!
I am trying to animate element by moving it from one cell to another using following animation code.
private void PerformAnimation(List<Tuple<int, int>> _path, UIElement sprite)
{
Storyboard storyBoard = new Storyboard();
Int32AnimationUsingKeyFrames row_intKeyFrame = new Int32AnimationUsingKeyFrames();
row_intKeyFrame.Duration = new TimeSpan(0, 0, 0, 0, _path.Count * 500);
Int32AnimationUsingKeyFrames col_intKeyFrame = new Int32AnimationUsingKeyFrames();
col_intKeyFrame.Duration = new TimeSpan(0, 0, 0, 0, _path.Count * 500);
for (int i = 1; i < _path.Count; i++)
{
row_intKeyFrame.KeyFrames.Add(new DiscreteInt32KeyFrame(_path[i].Item2));
col_intKeyFrame.KeyFrames.Add(new DiscreteInt32KeyFrame(_path[i].Item1));
}
Storyboard.SetTargetProperty(row_intKeyFrame, new PropertyPath("(Grid.Row)"));
Storyboard.SetTargetProperty(col_intKeyFrame, new PropertyPath("(Grid.Column)"));
Storyboard.SetTarget(row_intKeyFrame, sprite);
Storyboard.SetTarget(col_intKeyFrame, sprite);
storyBoard.Children.Add(row_intKeyFrame);
storyBoard.Children.Add(col_intKeyFrame);
storyBoard.Begin();
}
Now in a cell if there already exist an UIElement i need to resize both of them and re-add it to that cell.
private void ResizeControls(int destRow, int destCol)
{
Grid Parent;
List<UIElement> listOfElements = (BoardGrid.Children
.Cast<UIElement>()
.Where(i => Grid.GetRow(i) == destRow && Grid.GetColumn(i) == destCol)).ToList();
if (listOfElements.Count > 1)
{
// Resize controls here
}
}
Now when an element moves from one cell to another it can be either in 2 states i.e. resized or normal. Whenever it moves to an cell which already has an UI element i need them to get in resized mode so that they can fit and when they move to a free cell i.e (a cell that doesnt has any UI control i need to move them back to normal state again). How can i achieve this functionality ? Do i need to add any panel in that cell every time there is a UIElement ? I am looking for something like Auto-resize animation
I'm trying to simulate an Android UI element that unfortunately doesn't exist in Windows 7 phone: ListPreference
I thought about using a Popup, that would take exactly the whole screen (to simulate a modal window).
So the popup would be made of the following elements:
Popup -> Canvas -> Border -> StackPanel -> RadioButtons
The Canvas would be fully transparent (or lightly whitish to clearly show that the element underneath aren't available)
The border would be made so it only big enough to contain all the RadioButtons
Then the StackPanel would be opaque and black.
Unfortunately, if I make the bottom canvas transparent, all children elements are also transparent. I can only make the elements more transparent.
The way transparency works is slightly different than with Android or iPhone (where it's quite easy to have a parent fully transparent, but opaque children).
Is there a way to make a parent fully transparent with the children opaque?
Or maybe someone could suggest another way to simulate a modal window.
Who knows, maybe someone even developed a ListPreference-like UIElement :)
Thank you
Here is how I ended up doing it.
It works in a similar fashion as ListPreference on Android. The constructor takes a string, an array of string and an int indicating which is the default value
When the windows is closed, the delegate Dismissed is called..
So you call it like so:
string[] choices = { "Choice 1", "Choice 2", "Choice3" };
ListPreference lp = new ListPreference("name", choices, 1);
lp.dismissed += new ListPreferences.DismissedHandler(lp_Dismissed);
the code:
public class ListPreference
{
Popup p;
string Name;
int oldValue;
public delegate void DismissedHandler(string name, bool changed, int newvalue);
public event DismissedHandler Dismissed;
public bool IsOpen
{
get
{
return p.IsOpen;
}
set
{
p.IsOpen = value;
}
}
public ListPreference(string name, Array elements, int default_value)
{
p = new Popup();
Name = name;
Dismissed = null;
oldValue = default_value;
double height = (App.Current.RootVisual as FrameworkElement).ActualHeight;
double width = (App.Current.RootVisual as FrameworkElement).ActualWidth;
p.VerticalOffset = SystemTray.IsVisible ? 32.0 : 0.0;
p.Height = height;
p.Width = width;
Canvas canvas = new Canvas();
SolidColorBrush colorBrush = new SolidColorBrush(Colors.Black);
colorBrush.Opacity = 0.75;
//Color.FromArgb(0xff, 0x8a, 0x8a, 0x8a));
canvas.Background = colorBrush;
//canvas.Opacity = 0.765;
canvas.Height = height;
canvas.Width = width;
p.Child = canvas;
Border border = new Border();
border.Width = width - 50.0 * 2.0;
border.BorderBrush = new SolidColorBrush(Colors.LightGray);
border.BorderThickness = new Thickness(5.0);
border.Background = new SolidColorBrush(Colors.Black);
canvas.Children.Add(border);
StackPanel panel2 = new StackPanel();
panel2.Orientation = System.Windows.Controls.Orientation.Vertical;
int i = 0;
foreach (string val in elements)
{
RadioButton radio1 = new RadioButton();
radio1.GroupName = "group1";
radio1.Content = val;
if (i == default_value)
radio1.IsChecked = true;
int j = i;
radio1.Click += (sender, args) => radio1_Checked(radio1, j);
i++;
panel2.Children.Add(radio1);
}
Button button1 = new Button();
button1.Background = new SolidColorBrush(Colors.Black);
button1.Foreground = new SolidColorBrush(Colors.White);
button1.Opacity = 1.0;
button1.Content = "Cancel";
button1.Margin = new Thickness(5.0);
button1.Click += new RoutedEventHandler(closeButton_Click);
panel2.Children.Add(button1);
border.Child = panel2;
// Open the popup.
p.IsOpen = true;
p.UpdateLayout();
border.Height = panel2.DesiredSize.Height + 5.0 * 2.0;
border.SetValue(Canvas.TopProperty, (height - border.Height) / 2.0);
border.SetValue(Canvas.LeftProperty, (width - border.Width) / 2.0);
p.UpdateLayout();
}
void closeButton_Click(object sender, RoutedEventArgs e)
{
// Close the popup.
p.IsOpen = false;
if (Dismissed != null)
{
Dismissed(Name, false, -1);
}
}
void radio1_Checked(object sender, int idx)
{
p.IsOpen = false;
if (Dismissed != null)
{
Dismissed(Name, idx != oldValue, idx);
}
}
}
I would suggest creating a Usercontrol that would do what you need. Set the LayoutRoot grid's background to PhoneSemitransparentBrush or changing the opacity will change the child element's opacity as well. Then your child elements can have any opacity you'd like. You can add this control as a child to the popup. Additionally, you can add doubleanimation to the popup with the opened and closed event triggers. Change the design height of the UserControl to 480x760 to simulate full page.
To answer your question. Using resources like PhoneSemitransparentBrush and TransparentBrush for the Canvas background is one of your options. Opacity will change the opacity of the whole UIElement including its children.