Ellipse not shown on the canvas in wpf application - c#

I have a wpf user control , inside it i have put a canvas named VisualFeedback , now programmatically i add a eclipse using :
Ellipse ellipse = new Ellipse
{
Fill = new SolidColorBrush(Colors.Red),
Width = 5,
Height = 5,
Opacity = 1,
Margin = new Thickness(10, 10, 0, 0)
};
VisualFeedback.Children.Add(ellipse);
But it does not show up in the canvas of usercontrol which is in the mainwindows of the application .

Your code works for me - you're sure that you're not just missing it? - it's quite small.

Related

C# Windows Forms glitch while creating a control

I somehow noticed, that while I'm creating a control in my application, it first appears as weird rectangle and then it "shrinks" to it's correct form.
First thing you'll see after creation
Correctly created object
My question is, why I first see the rectangle in top left corner and then it suddenly changes to it's correct form. It's like split second thing (I had to use Thread.Sleep 'cos it's impossible to screenshot it), but my eyes can still see this and I'm really triggered when it's happening.
This is the code, where I'm creating the control:
var label = new Label
{
AutoSize = true,
TextAlign = ContentAlignment.MiddleLeft,
Font = new Font("Courier New", 9F, FontStyle.Regular,
GraphicsUnit.Point, 238),
Text = keyword,
Margin = new Padding(0, 6, 25, 3),
Padding = new Padding(0, 3, 0, 0)
};
var button = new Button
{
BackgroundImage = Image.FromFile("../../../Images/cross_200x200.png"),
BackgroundImageLayout = ImageLayout.Stretch,
Dock = DockStyle.Right,
Width = 21,
Height = 21,
FlatStyle = FlatStyle.Flat,
};
button.FlatAppearance.BorderSize = 0;
var pan = new Panel
{
AutoSize = true,
Padding = new Padding(0, 0, 1, 1),
BackColor = Color.PowderBlue,
BorderStyle = BorderStyle.FixedSingle,
Tag = keyword
};
button.Click += delegate
{
_keywords.Remove(pan.Controls.OfType<Label>().First().Text);
pan.Dispose();
StatusLabel.Text = $#"Removed {keyword}";
};
pan.Controls.Add(label);
pan.Controls.Add(button);
FlowLayoutPanelMain.Controls.Add(pan);
Everytime a "keyword" is added to FlowLayoutPanel control, at first it's a rectangle in top left corner and immediately after that it's fine.
With help from a friend of mine, we figured out, that this is happening due to Windows Forms old technology (It's probably not happening in .NET Core's WPF) and it's inability of creating controls at runtime. So, the offered solution for this seems to be just .Hide() the control, .Add() it to the FlowLayoutPanel and then simply .Show() it back, now my eyes will be satisfied.
...
pan.Hide();
FlowLayoutPanelMain.Controls.Add(pan);
pan.Show();
...
Try to remove AutoSize property and assign a new Size() to the panel
AutoSize = false,
Worked for me

How to add image on the border of a winform panel?

I am trying to add an image overlapping the border of a WinForm
but it only shows image inside the panel border
I have tried adding margin but it does not work at all
cross_Img.Location = new System.Drawing.Point(Panel1.Size.Width - 15, -5);
cross_Img.Margin = new Padding(0, -15, -15, 0);
Panel1.Controls.Add(cross_Img);
There are several ways to do this.
Here is a simple one, which may or may not be good enough for you.
Let's assume an adorning Image img and a border width of int bw.
int iw2 = img.Width / 2;
int ih2 = img.Height / 2;
Start by setting a Padding:
adornedPanel1.Padding = new Padding(bw, ih2 + bw, iw2 + bw, bw );
This will not show but will help keep any docked controls inside your border.
Next we code the Paint/OnPaint code:
Rectangle cr = adornedPanel1.ClientRectangle;
Rectangle r = new Rectangle(0, ih2, cr.Width - iw2, cr.Height - ih2 );
using (Pen pen = new Pen(Color.MediumSlateBlue, bw)
{ Alignment = System.Drawing.Drawing2D.PenAlignment.Inset})
e.Graphics.DrawRectangle(pen, r);
e.Graphics.DrawImage(img, cr.Right - img.Width, 0);
     
To show how the Padding works for docked and/or anchored controls the example has a Label with a solid BackColor docked to the left nested inside the Panel. The right screenshot shows the Panel with a white background so you can see the whole layout.
Note the setting of the Pen alignment from Center to Inset !!
If you create a panel subclass I suggest it keeps track of the new custom client area rectangle..
Other solutions could be:
Create a shaped panel using a region
Overlaying another Panel/Label/PictureBox
try this
cross_Img.Location = new System.Drawing.Point(488, 429);
cross_Img.Margin = new Padding(0, -15, -15, 0);
// panel1.Controls.Add(cross_Img);
Instead of adding Image to panel, specify desired location.

How to align subviews in center with Xamarin iOS Fluent Layout?

My code is like this:
var nameTextField = new UITextField();
var passwordTextField = new UITextField();
var loginButton = new UIButton();
//Bindings with MvvmCross...
Add(nameTextField);
Add(passwordTextField);
Add(loginButton);
View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
View.AddConstraints(
nameTextField.AtTopOf(View, 10),
nameTextField.AtLeftOf(View, 10),
nameTextField.AtRightOf(View, 10),
passwordTextField.Below(nameTextField, 10),
passwordTextField.WithSameLeft(nameTextField),
passwordTextField.WithSameRight(nameTextField),
loginButton.Below(passwordTextField, 30),
loginButton.WithSameLeft(passwordTextField),
loginButton.WithSameRight(passwordTextField)
);
With "nameTextField.AtTopOf(view, 10), the form is displayed on the top screen. But now, I need to align vertically all the controls (name, password and button) in the View.
How can I do this?
I already tried to sum the height with the margins of all controls and use .WithCenterY(View).Minus(value), but I think that's not the best way, especially when I have many controls.
Thanks.
First, create a subview to add all the form controls:
var formView = new UIView();
formView.AddSubviews(nameTextField, passwordTextField, loginButton);
Create constraints for those elements within the formView view:
formView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
formView.AddConstraints(
nameTextField.AtTopOf(formView, 10),
nameTextField.AtLeftOf(formView, 10),
nameTextField.AtRightOf(formView, 10),
passwordTextField.Below(nameTextField, 10),
passwordTextField.WithSameLeft(nameTextField),
passwordTextField.WithSameRight(nameTextField),
loginButton.Below(passwordTextField, 30),
loginButton.WithSameLeft(passwordTextField),
loginButton.WithSameRight(passwordTextField)
);
Create constraints to center formView on screen:
View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
View.AddConstraints(
formView.WidthOf(View),
formView.WithSameCenterY(View);
...
);
I didn´t test any of this code, so it´s probably wrong at some point, but you get the idea...

Clip an ellipse in WPF - positioning off

I am trying to 'cut' of part of several ellipses, in what is quite a big program. Since I had troubles making this work, I have started a new project in which I tried to solve the solution on a small scale. Again, I get some very weird results - which I expect have to do with positioning. Please see the below code for a minimal working example.
The program creates an ellipse, gives it a pretty colour and places it on the stage. It then proceeds to create what is called a 'RectangleGeometry', which we will use for the clipping. Please note that the geometry is placed at 0,0 with a width of 40 and height of 200. The result can be seen in the following screenshot;
My end goal is this: to be able to place a RectangleGeometry at any position (lets say 200,300) and have it clip the ellipse at exactly that position.
Ellipse abcEllipse = new Ellipse{
Margin = new Thickness(100, 100, 0, 0),
Fill = Brushes.HotPink,
Height = 80,
Width = 60
};
DrawCanvas.Children.Add(abcEllipse);
RectangleGeometry clipRectangle = new RectangleGeometry {
Rect = new Rect(0, 0, 40, 200)
};
GeometryGroup myGeometryGroup1 = new GeometryGroup();
myGeometryGroup1.Children.Add(clipRectangle);
Path myPath1 = new Path { Stroke = Brushes.Black, StrokeThickness = 1 };
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Color.FromArgb(255, 204, 204, 255);
myPath1.Opacity = 0.2;
myPath1.Fill = mySolidColorBrush;
myPath1.Data = myGeometryGroup1;
DrawCanvas.Children.Add(myPath1);
abcEllipse.Clip = clipRectangle;
Update: Some more clarification might indeed be required; I want to achieve the following effect - as seen in the attached image. An ellipse is placed on the stage, it is rotated and the top of the ellipse is cut off. (In such a way that it 'respects' the new rotation and thus cuts at what is now the new top)
However; this is the result I get when I apply the knowledge that "the clip geometry assigned to the shape will be relative to that shape;". As you can see, it doesn't really cut at the 'new' top of the ellipse.
Update 2: Added the code used to rotate the ellipse;
TransformGroup tg = new TransformGroup();
tg.Children.Add(new RotateTransform(40));
abcEllipse.RenderTransform = tg;

ToolStripMenuItem can't show checkmark and Image (icon) when RenderMode is "System"?

My Windows Forms application has a MenuStrip and some of the menu items (ToolStripMenuItem) have an icon (setting the ToolStripMenuItem.Image property).
When the RenderMode property of the MenuStrip is set to ToolStripRenderMode.System, the checkmark doesn't display when the Checked or CheckOnClick property is true and the menu item has an icon.
It does display when i switch the MenuStrip.RenderMode property to ToolStripRenderMode.Professional or ToolStripRenderMode.RenderManagerMode.
Unfortunately, this is a problem because my app requires:
A ProgressBar in marquee mode, so Application.EnableVisualStyles() is required to get this to work.
The app requires a "flat" visual style, which i accomplished by leaving out the call to Application.EnableVisualStyles() and leaving the default ToolStripRenderMode.RenderManagerMode on the MenuStrip. But then i can't get my marquee ProgressBar!
Setting the RenderMode to ToolStripRenderMode.System solves the look and feel requirement, but takes away the ability to have checked menu items w/icons.
Is there any way to satisfy all my requirements? Am i missing something? Thanks for looking.
Wow, i stumped SO! Now i know i must be working on some serious code.
Anyway, the answer is: implement your own ToolStripRenderer by creating a class that inherits from ToolStripSystemRenderer.
Override the methods that draw the items with your own code. Here's what i was looking for specifically that draws the checked item. It draws a check if there's no image for the ToolStripMenuItem.
protected override void OnRenderItemCheck(ToolStripItemImageRenderEventArgs e)
{
base.OnRenderItemCheck(e);
if (e.Item.Selected)
{
Rectangle rect = new Rectangle(3, 1, 20, 20);
Rectangle rect2 = new Rectangle(4, 2, 18, 18);
SolidBrush b = new SolidBrush(Color.FromArgb(49, 106, 197));
SolidBrush b2 = new SolidBrush(Color.Orange);
e.Graphics.FillRectangle(b, rect);
e.Graphics.FillRectangle(b2, rect2);
e.Graphics.DrawImage(e.Image, new Point(5, 3));
}
else
{
Rectangle rect = new Rectangle(3, 1, 20, 20);
Rectangle rect2 = new Rectangle(4, 2, 18, 18);
SolidBrush b = new SolidBrush(Color.FromArgb(49, 106, 197));
SolidBrush b2 = new SolidBrush(Color.Orange);
e.Graphics.FillRectangle(b, rect);
e.Graphics.FillRectangle(b2, rect2);
e.Graphics.DrawImage(e.Image, new Point(5, 3));
}
}
I did also come across a simpler alternative:
You can simply put your menu items into a ContextMenuStrip and then assign it to the DropDown property of the DropDownButton.
Hope this helps anyone out there who doesn't fancy overriding the Paint method.

Categories