Develop Reference

Set Background Color of Dynamically Generated WPF Canvas?

I have a dynamically created WPF Canvas element inside a ContentControl (the same thing happens in a UserControl.) Whenever I attempt to set the background, either upon creation or later on in the program, the background color won't paint (I am however able to set the background on a Label inside of the Canvas (also added dynamically.) The creation code I have looks like:
_rootGrid = new Grid();
_rootGrid.Name = "_rootGrid";
_rootGrid.Margin = new Thickness(0);
_rootGrid.HorizontalAlignment = HorizontalAlignment.Stretch;
_rootGrid.VerticalAlignment = VerticalAlignment.Stretch;
_rootGrid.RowDefinitions.Add(new RowDefinition());
_rootGrid.RowDefinitions.Add(new RowDefinition());
_rootGrid.ColumnDefinitions.Add(new ColumnDefinition());
_rootGrid.RowDefinitions[0].Height = new GridLength(24);
_rootGrid.RowDefinitions[1].Height = new GridLength(0, GridUnitType.Star);
_rootGrid.ColumnDefinitions[0].Width = new GridLength(0, GridUnitType.Star);
_headerBlock = new Canvas();
_headerBlock.Name = "_headerBlock";
_headerBlock.SetValue(Grid.RowProperty, 0);
_headerBlock.SetValue(Grid.ColumnProperty, 0);
_headerBlock.PreviewMouseLeftButtonUp += _headerBlock_PreviewMouseLeftButtonUp;
_headerBlock.Background = Brushes.Red;
_title = new Label();
_title.Name = "_title";
_title.Content = "Title";
_title.VerticalAlignment = VerticalAlignment.Center;
_title.HorizontalAlignment = HorizontalAlignment.Left;
_title.FontWeight = FontWeights.Bold;
_title.Background = Brushes.Blue;
_clientBlock = new ScrollViewer();
_clientBlock.Name = "_clientBlock";
_clientBlock.Margin = new Thickness(0);
_clientBlock.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
_clientBlock.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
_clientBlock.SetValue(Grid.RowProperty, 1);
_clientBlock.SetValue(Grid.ColumnProperty, 0);
_clientArea = new Grid();
_clientArea.Name = "_clientArea";
_clientArea.HorizontalAlignment = HorizontalAlignment.Stretch;
_clientArea.VerticalAlignment = VerticalAlignment.Stretch;
_headerBlock.Children.Add(_title);
_rootGrid.Children.Add(_headerBlock);
_clientBlock.Content = _clientArea;
_rootGrid.Children.Add(_clientBlock);
base.Content = _rootGrid;
And is called inside of the ContentControl constructor. From that I would expect the header to contain a full row of Red with a Blue rectangle around the text, but all I get is the Blue rectangle around text with most of the row left Transparent (noticeable due to the Green background of the root Grid.) Any help on this would be appreciated as it is enormously frustrating. I'm using version 6.2 of the .NET framework on Windows 7 if that plays into it (I have noticed some other odd behaviors, but am going for dynamic generation mostly because these ContentControls take lots of child elements and the VS 2017 XAML parser is too broken to allow them to be named - which makes them virtually useless.)

The solution is to use non-zero Width for ColumnDefinition:
_rootGrid.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Star); // equal to Width="*" in xaml
When 0 is used, Canvas has 0 witdh. But is is possible to see blue Label because Canvas doesn't clip contents on its bounds.
If you try Grid (var _headerBlock = new Grid();) with zero width column, there won't be anything displayed at all.

C# WPF how to draw a circle which extends to fill its parent and remains a circle in code behind

I have to draw a circle in a grid. That grid has to adapt proportionally to height and width defined by the Column/Row definition of its parent grid.
Now if I put stretch it will fill all the space and become an ellipsis while I want it to be a circle.
Ok in short the parent grid adapts proportionally like that
then in a routine I add the following code:
public void RadialPercentage(Grid grd )
{
Ellipse elpExt = new Ellipse();
elpExt.Stroke = Brushes.Green;
elpExt.StrokeThickness = 4;
//elpExt.Margin = new Thickness(0);
//elpExt.HorizontalAlignment = HorizontalAlignment.Center;
elpExt.VerticalAlignment = VerticalAlignment.Stretch;
grd.Children.Add(elpExt);
Ellipse elpInt = new Ellipse();
elpInt.Stroke = Brushes.Blue;
elpInt.StrokeThickness = 4;
elpInt.Margin = new Thickness(20);
//elpInt.Width = elpInt.Height = dim-20;
//elpInt.HorizontalAlignment = HorizontalAlignment.Center;
elpInt.VerticalAlignment = VerticalAlignment.Stretch;
grd.Children.Add(elpInt);
return;
}
but the effect is the following:
so it stretches both vertically and horizontally even if I only put the vertical and not the horizontal constraint. If I set it to center the ellipse collapses.
To solve the problem even I am not sure that this is the right thing to do I tried to take a look of the weight/heigth of the parent grid but obviously both those values and the actual values are set to zero.
thanks for helping
Patrick

What about setting Width's binding to ActualHeight of the ellipse and set HorizontalAlignment to Center? Something like this:
var ellipse = new Ellipse();
var binding = new Binding(Ellipse.ActualHeightProperty.Name)
{
RelativeSource = new RelativeSource(RelativeSourceMode.Self),
Mode = BindingMode.OneWay
};
ellipse.VerticalAlignment = VerticalAlignment.Stretch;
ellipse.HorizontalAlignment = HorizontalAlignment.Center;
BindingOperations.SetBinding(ellipse, Ellipse.WidthProperty, binding);

You can update the size of your Ellipse each time the parent Grid is resized.
You should add to your Grid the SizeChanged Event. XAML example:
<Grid Name = "MyGrid"
SizeChanged = "MyGridSizeChanged">
<!-- rows and columns definitions -->
<Ellipse Name = "MyEllipse"
Grid.Row = "i"
Grid.Column = "j" />
</Grid>
Now, each time the Grid is resized the function MyGridSizeChanged will executed. You should add into it code, which set sizes of your Ellipse equal to smallest side of contained cell. C# example:
void MyGridSizeChanged(object sender, SizeChangedEventArgs e) {
if (sender is Grid myGrid) {
var cellHeight = myGrid.RowDefinitions[Grid.GetRow(MyEllipse)].ActualHeight;
var cellWidth = myGrid.ColumnDefinitions[Grid.GetColumn(MyEllipse)].ActualWidth;
var newSize = Math.Min(cellHeight, cellWidth);
MyEllipse.Height = newSize;
MyEllipse.Width = newSize;
}
}

Keep a Control vertically and horizontally at center of its container

I've attempted to create a custom Panel with a border around it, whose Color can be changed in order to "highlight" the Panel under certain conditions.
The Panel will also need to communicate certain information via text. For this purpose, I've added a Label to the Panel. I've tried the prescribed methods for centering the Label but for some reason it always puts it to the top-left of the Panel. I can't set the Label's Dock to Fill because that covers up the custom border that's been created. So I need to make it so that the Label fits within the border.
The Label's Anchor is set to None and its Location is
new Point((ClientSize.Width - Size.Width)/2, (ClientSize.Height - Size.Height)/2);
The code for the custom Panel is:
public class CustomPanel : Panel
{
public CustomPanel(int borderThickness, Color borderColor) : base()
{
SetStyle(ControlStyles.AllPaintingInWmPaint |
ControlStyles.UserPaint |
ControlStyles.OptimizedDoubleBuffer |
ControlStyles.ResizeRedraw, true);
BackColor = SystemColors.ActiveCaption;
BorderStyle = BorderStyle.FixedSingle;
Size = new Size(45, 45);
Margin = new Padding(0);
BorderThickness = borderThickness;
BorderColor = borderColor;
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
if (BorderStyle == BorderStyle.FixedSingle)
{
int halfThickness = BorderThickness / 2;
using (Pen p = new Pen(BorderColor, BorderThickness))
{
e.Graphics.DrawRectangle(p, new Rectangle(halfThickness,
halfThickness,
ClientSize.Width - BorderThickness, ClientSize.Height - BorderThickness));
}
}
}
public int BorderThickness { get; set; }
public Color BorderColor { get; set; }
}
And the Form code is:
private void NewPanelTest_Load(object sender, EventArgs e)
{
CustomPanel cp = new CustomPanel(3, Color.Black);
// Create new Label
Label info = new Label()
{
Size = new Size(30, 30),
Text = "Info",
Anchor = AnchorStyles.None,
TextAlign = ContentAlignment.MiddleCenter,
Enabled = false,
Font = new Font("Microsoft Sans Serif", 6),
ForeColor = Color.White,
Location = new Point(ClientSize.Width/2 - Width/2, ClientSize.Height/2 - Height/2)
};
cp.Controls.Add(info);
this.Controls.Add(cp);
}
EDIT: I've looked at similar questions asked and tried changing the Label's properties but with no results.
// Create new Label
Label info = new Label()
{
// Same code as before
// Different code
Left = (this.ClientSize.Width - Size.Width) / 2,
Top = (this.ClientSize.Height - Size.Height) / 2,
//Location = new Point(ClientSize.Width/2 - Width/2, ClientSize.Height/2 - Height/2)
};
I've also tried changing the Panel's Padding, also with no results.
Padding = new Padding(5);
EDIT: Attempt at programatically placing Label in center of Panel (yields results of X = 0, Y = 0)
// Create new Label
Label info = new Label()
{
// Same code as before (excluding "Left", "Top", and "Location")
};
int X = (info.ClientSize.Width - info.Width) / 2;
int Y = (info.ClientSize.Height - info.Height) / 2;
info.Location = new Point(X, Y);
MessageBox.Show(info.Location.ToString());
cp.Controls.Add(info);

We can achive this by simple steps
Set Label Anchor to Left and Right
Set Label AutoSize to false ;
Set Label TextAlign to MiddleCenter;
now Place label middle of panel.
int x = (panel1.Size.Width - label1.Size.Width) / 2;
label1.Location = new Point(x, label1.Location.Y);

Keep a Control vertically and horizontally at Center of Container
The most simple option is using a TableLayoutPanel with 1 column and 1 row instead of a Panel. Put the Label in it, then it's enough to set Anchor of label to None to have label always in center vertically and horizontally.
Also to paint custom borders, it's enough to handle CellPaint event of TableLayoutPanel and draw custom border:
private void tableLayoutPanel1_CellPaint(object sender, TableLayoutCellPaintEventArgs e)
{
var r = e.CellBounds;
r.Width--;
r.Height--;
e.Graphics.DrawRectangle(Pens.Red, r);
}

Hey this problem is pretty easy to solve. I assume that in the future you may have some more labels that you may have to center, so I made this function that accepts the label that you want to center and the parent panel. This code is for Visual C# Windows Forms Application. There are a few things that we have to do prior to calling this function. We need to:
Select the label and set its Anchor to left, right
Remove AutoSize
Set label TextAlign to MiddleCenter
This is the code that you need to write for our function
public void Centroid(Label label, Panel parent)
{
int x = (parent.Size.Width - label.Size.Width) / 2;
label.Location = new Point(x, label.Location.Y);
}
and to call the function you have to type: Centroid(label1, panel1);
This is assuming that you have a label named label1 & a panel named panel 1. You can substitute these values with anything as long as it is a label and a panel.
Hope this helps you :)

I did a horizontal centres alignment of a panel and a label thus:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
label1 = new System.Windows.Forms.Label();
this.SuspendLayout();
this.AutoScaleDimensions = new System.Drawing.SizeF(12F, 23F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(1401, 462);
this.Controls.Add(this.label1);
this.Font = new System.Drawing.Font("Times New Roman", 15.75F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.Margin = new System.Windows.Forms.Padding(6, 5, 6, 5);
this.Name = "Form1";
this.Text = "Form1";
this.ResumeLayout(false);
this.PerformLayout();
int borderThickness = 5;
Color borderColor = Color.Cyan;
CustomPanel panel1 = new CustomPanel(borderThickness, borderColor);
panel1.BackColor = Color.Yellow;
panel1.Location = new Point(400, 30);
panel1.Size = new Size(300, 300);
panel1.Parent = this;
this.Controls.Add(panel1);
label1.Name = "label1";
label1.TabIndex = 0;
label1.AutoSize = true;
label1.ForeColor = Color.Black;
label1.Text = "this is the text whose center I want to align";
label1.Location = new Point(panel1.Location.X + panel1.Width / 2 - label1.Width / 2, 80);
if (this.Controls.Contains(label1))
{
label1.BringToFront();
}
}
private Label label1;
}
Since I posted the answer, I found out that in order the label to be aligned with the centre of the panel, the statement:
this.Controls.Add(label1);
MUST be located after the statement:
label1 = new Label();
and before the statement:
label1.Location = new Point(panel1.Location.X + panel1.Width / 2 - label1.Width / 2, 80);

Why ClipToBounds = false not work?

I do not want cut text of textblock. For this reason, I set viewBox.ClipToBounds to false, But it doesn't work.
Please tell me why ClipToBounds=false not work in this code:
private void Btn1_Click(object sender, RoutedEventArgs e)
{
Button button = new Button(); button.Background = Brushes.Red;
button.Width = 70; button.Height = 20;
Canvas.SetLeft(button, 100); Canvas.SetTop(button, 120);
button.Padding = new Thickness(1);
StackPanel stackPanel = new StackPanel();
Viewbox viewBox = new Viewbox();
viewBox.ClipToBounds = false;
Canvas canvas = new Canvas();
canvas.Width = button.Width; canvas.Height = button.Height;
TextBlock textBlock = new TextBlock();
textBlock.Text = "this is a test";
textBlock.FontSize = 15;
textBlock.FontFamily = new FontFamily("Arial");
textBlock.TextWrapping = TextWrapping.NoWrap;
textBlock.Foreground = Brushes.Green;
textBlock.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
textBlock.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
viewBox.Height = 20;
textBlock.IsHitTestVisible = false;
stackPanel.Children.Add(viewBox);
viewBox.Child = canvas;
canvas.Children.Add(textBlock);
button.Content = stackPanel;
Canvas MainCanvas = new Canvas();
MainCanvas.Children.Add(button);
this.Content = MainCanvas;
}
Screenhsot:
The screenshot below is what I want. :

ClipToBounds is false by default. However, clipping can still happen due to the way certain elements perform layout. Basically the way things work in WPF is that setting ClipToBounds = true will force things to clip. Leaving it set to false means that WPF determines how things should clip based on measure constraints and arrange rects.
If you look at the ArrangeCore and MeasureCore methods in FrameworkElement, you will see that there is quite a bit of logic determining whether something should clip. Of course, things that override FrameworkElement are free to render however they want, but generally they will obey the clipping rules established by the base class.
In the case of a TextBlock, it will definitely clip text that goes outside of its bounds if its size is constrained. You can see this by simply setting a Width on it, or placing it is a parent that has a Width set on it.
If you really need the text to render outside of the bounds of the control, you may have to consider something like writing a custom text rendering element.
Even then, it is still going to be clipped by its parent as soon as you place it in something else that clips. So, you could still end up stuck.
You could try placing the TextBlock on top of the button instead of inside of it, and setting its position to get it in the right place (maybe by binding it to something). This would work, but might get hard to manage if you need to do it too much.
Basically, you are trying to go against one of the hard-coded rules of WPF, so you are likely not going to find an easy way to do it. Perhaps you might want to reevaluate your design and determine if this behavior is really necessary for what you want to do, or if you can go about it in a different way.

Thanks to elgonzo and Xavier.
I realized that I should not put the canvas in the viewbox.
By 2 change my problem solved.
1 - Swap viewbox with canvas.
2 - Remove canvas.with = ...
This is correct code :
private void Btn1_Click(object sender, RoutedEventArgs e)
{
Button button = new Button(); button.Background = Brushes.Red;
button.Width = 70; button.Height = 20;
Canvas.SetLeft(button, 100); Canvas.SetTop(button, 120);
button.Padding = new Thickness(1);
StackPanel stackPanel = new StackPanel();
Viewbox viewBox = new Viewbox();
viewBox.ClipToBounds = false;
Canvas canvas = new Canvas();
// canvas.Width = button.Width; canvas.Height = button.Height;
TextBlock textBlock = new TextBlock();
textBlock.Text = "this is a test";
textBlock.FontSize = 15;
textBlock.FontFamily = new FontFamily("Arial");
textBlock.TextWrapping = TextWrapping.NoWrap;
textBlock.Foreground = Brushes.Green;
textBlock.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
textBlock.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
viewBox.Height = 20;
textBlock.IsHitTestVisible = false;
stackPanel.Children.Add(canvas);
viewBox.Child = textBlock;
canvas.Children.Add(viewBox);
button.Content = stackPanel;
Canvas MainCanvas = new Canvas();
MainCanvas.Children.Add(button);
this.Content = MainCanvas;
}

How to create the border of a dynamic canvas in Silverlight?

Hi I am creating a Canvas in code behind like below:
Canvas musicPlayerCanvas = new Canvas();
musicPlayerCanvas.Background = new SolidColorBrush(Colors.White);
musicPlayerCanvas.Height = 80;
musicPlayerCanvas.Width = 1018;
LayoutRoot.Children.Add(musicPlayerCanvas);
musicPlayerCanvas.Children.Add(playingText);
musicPlayerCanvas.Children.Add(albumImage);
Now how can I add border to the canvas from the codebehind.
I tried with creating a Border and assigning a child like below:
Border myBorder = new Border();
//Border Proporties
Canvas.SetTop(musicPlayerCanvas, 26);
Canvas.SetLeft(musicPlayerCanvas, 154);
LayoutRoot.Children.Add(musicPlayerCanvas);
myBorder.Child = musicPlayerCanvas;
It is not working for me . Any help please.
Thanks,
Subhen

You want to add the canvas to the border, like so:
Canvas musicPlayerCanvas = new Canvas();
musicPlayerCanvas.Background = new SolidColorBrush(Colors.Purple);
Border border = new Border();
border.BorderBrush = new SolidColorBrush(Colors.Black);
border.BorderThickness = new Thickness(5);
border.Height = 80;
border.Width = 1018;
border.Child = musicPlayerCanvas;
LayoutRoot.Children.Add(border);
On a side note, when using controls like text boxes and images (which is what I think you might be doing looking at your control names), you might want to use a Grid rather than a Canvas as a container control.
Cheers,
Phil