I have an application that breaks the image when the screen size changes
Below is the screen
Where can the mistake be? What can cause this situation? I do not even know where to look because it is not a permanent error only once and once is gone
This is how I load items with a line and number per view:
<ItemsControl ItemsSource="{Binding ConnectorsGridsHorizontal, Mode=TwoWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Function drawing 1 element:
public Grid DrawConnector1(Thickness margin, int nr, bool rotate, bool rightSide)
{
Grid grid = new Grid();
grid.Margin = margin;
grid.HorizontalAlignment = HorizontalAlignment.Left;
grid.Width = S10;
grid.Height = 128;
grid.VerticalAlignment = System.Windows.VerticalAlignment.Center;
Line line = new Line();
line.X1 = S10HALF;
line.X2 = S10HALF;
line.Y1 = 0;
line.Y2 = 128;
line.StrokeDashArray = new System.Windows.Media.DoubleCollection() { 4, 2, 1, 2 };
line.Stroke = System.Windows.Media.Brushes.Green;
line.StrokeThickness = 4;
grid.Children.Add(line);
Grid inGrid = new Grid();
inGrid.Width = S10;
inGrid.Height = HF;
inGrid.Background = System.Windows.Media.Brushes.Black;
grid.Children.Add(inGrid);
Border br = new Border();
br.BorderThickness = new Thickness(0);
br.CornerRadius = new CornerRadius(10);
br.Background = System.Windows.Media.Brushes.White;
br.Margin = new Thickness(-10, -10, -10, -10);
br.Width = 20;
br.Height = 20;
br.VerticalAlignment = rightSide ? VerticalAlignment.Top : VerticalAlignment.Bottom;
br.RenderSize = new System.Windows.Size(br.ActualWidth + 1, br.ActualHeight + 1);
if (SelectedConnector + 1 == nr) br.Background = System.Windows.Media.Brushes.Green;
else br.Background = System.Windows.Media.Brushes.White;
if (DisableGreenMark) br.Background = System.Windows.Media.Brushes.White;
TextBlock txtBlock = new TextBlock();
txtBlock.FontSize = 16;
txtBlock.Text = nr.ToString();
txtBlock.Foreground = new SolidColorBrush(Colors.Black);
txtBlock.VerticalAlignment = VerticalAlignment.Center;
txtBlock.HorizontalAlignment = HorizontalAlignment.Center;
br.Child = txtBlock;
grid.Children.Add(br);
Binding b = new Binding("S60_20");
b.Mode = BindingMode.Default;
grid.SetBinding(Canvas.TopProperty, b);
return grid;
}
GIF:
I'm also using SnapsToDevicePixels="true"
To start with, try doing this:
br.HorizontalAlignment = HorizontalAlignment.Stretch;
br.Margin = new Thickness(0, 0, 0, 0);
Do not use margin with a negative value
Stretch will provide you with an element extension
Side cut is probably caused by too narrow a strip for the element:
You have:
grid.Width = S10;
line.X1 = S10HALF;
line.X2 = S10HALF;
This indicates that you have the width set to probably 10
and Here you have set to 20
br.Width = 20;
br.Height = 20;
I also suggest changing here:
grid.Width = S10 * 2;
line.X1 = S10HALF * 2;
line.X2 = S10HALF * 2;
Related
I have this XAML code:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer x:Name="ScrollViewer" Grid.Row="0" Background="Red">
<StackPanel x:Name="chat" >
</StackPanel>
</ScrollViewer>
</Grid>
And I am adding TextBlocks into the StackPanel called "chat" with this code:
public void ponerMensaje(string mensaje, bool me)
{
StackPanel panelTexto = new StackPanel();
panelTexto.Orientation = System.Windows.Controls.Orientation.Horizontal;
Thickness marginpanel = panelTexto.Margin;
marginpanel.Bottom = 10;
panelTexto.Margin = marginpanel;
//Create the colorBrush
SolidColorBrush yellowBrush = new SolidColorBrush();
yellowBrush.Color = Colors.Yellow;
SolidColorBrush blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
//Create the triangle
Polygon yellowTriangle = new Polygon();
yellowTriangle.Fill = yellowBrush;
//Create the triangle's points
System.Windows.Point Point1 = new System.Windows.Point(0, 0);
System.Windows.Point Point2 = new System.Windows.Point(10, 0);
System.Windows.Point Point3;
if (!me)
Point3 = new System.Windows.Point(10, 10);
else
Point3 = new System.Windows.Point(0, 10);
PointCollection polygonPoints = new PointCollection();
polygonPoints.Add(Point1);
polygonPoints.Add(Point2);
polygonPoints.Add(Point3);
//Add the points
yellowTriangle.Points = polygonPoints;
//Create the textblock
Grid gridParaTexto = new Grid();// In WP TextBlocks haven't Backgroundcolor
gridParaTexto.Background = yellowBrush;
TextBlock texto = new TextBlock();
texto.TextWrapping = TextWrapping.Wrap;
texto.Text = mensaje;
texto.Foreground = blackBrush;
gridParaTexto.Children.Add(texto);
//Add the message
if (!me)
{
panelTexto.Children.Add(yellowTriangle);
panelTexto.Children.Add(gridParaTexto);
chat.Children.Add(panelTexto);
}
else
{
panelTexto.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
panelTexto.Children.Add(gridParaTexto);
panelTexto.Children.Add(yellowTriangle);
chat.Children.Add(panelTexto);
}
}
This code works, but the Textblock.TextWrapping not.
I'm new in WP maybe this code isn't the best, if you see other error, let me.
This line is the reason:
panelTexto.Orientation = System.Windows.Controls.Orientation.Horizontal;
When you set orientation of the StackPanel to horizontal, then it will be as wide as its content. You have to change your layout, for example use Grid instead.
I have modified your code. This should work as you described:
public void ponerMensaje(string mensaje, bool me)
{
Grid panelTexto = new Grid();
Thickness marginpanel = panelTexto.Margin;
marginpanel.Bottom = 10;
panelTexto.Margin = marginpanel;
//Create the colorBrush
SolidColorBrush yellowBrush = new SolidColorBrush();
yellowBrush.Color = Colors.Yellow;
SolidColorBrush blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
//Create the triangle
Polygon yellowTriangle = new Polygon();
yellowTriangle.Fill = yellowBrush;
//Create the triangle's points
System.Windows.Point Point1 = new System.Windows.Point(0, 0);
System.Windows.Point Point2 = new System.Windows.Point(10, 0);
System.Windows.Point Point3;
if (!me)
Point3 = new System.Windows.Point(10, 10);
else
Point3 = new System.Windows.Point(0, 10);
PointCollection polygonPoints = new PointCollection();
polygonPoints.Add(Point1);
polygonPoints.Add(Point2);
polygonPoints.Add(Point3);
//Add the points
yellowTriangle.Points = polygonPoints;
//Create the textblock
Grid gridParaTexto = new Grid();// In WP TextBlocks haven't Backgroundcolor
gridParaTexto.Background = yellowBrush;
TextBlock texto = new TextBlock();
texto.TextWrapping = TextWrapping.Wrap;
texto.Text = mensaje;
texto.Foreground = blackBrush;
gridParaTexto.Children.Add(texto);
panelTexto.Children.Add(yellowTriangle);
panelTexto.Children.Add(gridParaTexto);
//Add the message
if (!me)
{
panelTexto.ColumnDefinitions.Add(new ColumnDefinition()
{
Width = GridLength.Auto,
});
panelTexto.ColumnDefinitions.Add(new ColumnDefinition()
{
Width = new GridLength(1, GridUnitType.Star),
});
Grid.SetColumn(gridParaTexto, 1);
Grid.SetColumn(yellowTriangle, 0);
chat.Children.Add(panelTexto);
}
else
{
panelTexto.ColumnDefinitions.Add(new ColumnDefinition()
{
Width = new GridLength(1, GridUnitType.Star),
});
panelTexto.ColumnDefinitions.Add(new ColumnDefinition()
{
Width = GridLength.Auto,
});
gridParaTexto.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
Grid.SetColumn(gridParaTexto, 0);
Grid.SetColumn(yellowTriangle, 1);
chat.Children.Add(panelTexto);
}
}
I have replaced StackPanel with Grid with two columns. One column is for yellow triangle and another one is for text.
I want to draw a signal image as shown below at runtime on canvas.
sample code which I used to draw this signal is as below.
Ellipse Ellipse1 = new Ellipse();
Ellipse Ellipse2 = new Ellipse();
Ellipse Ellipse3 = new Ellipse();
Line lineV = new Line();
Line lineH = new Line();
lineV.Stroke = SystemColors.WindowFrameBrush;
lineV.X1 = EndPosition.X;
lineV.Y1 = EndPosition.Y;
lineV.X2 = StartPosition.X;
lineV.Y2 = EndPosition.Y;
SolidColorBrush redBrush = new SolidColorBrush();
redBrush.Color = Colors.Black;
lineV.StrokeThickness = 2;
lineV.Stroke = redBrush;
canvas1.Children.Add(lineV);
lineH.Stroke = SystemColors.WindowFrameBrush;
lineH.X1 = StartPosition.X;
lineH.Y1 = EndPosition.Y;
lineH.X2 = StartPosition.X;
lineH.Y2 = StartPosition.Y;
redBrush.Color = Colors.Black;
lineH.StrokeThickness = 2;
lineH.Stroke = redBrush;
canvas1.Children.Add(lineH);
SolidColorBrush mySolidColorBrush1 = new SolidColorBrush();
mySolidColorBrush1.Color = Colors.Red; //FromArgb(255, 255, 255, 0);
Ellipse1.Fill = mySolidColorBrush1;
Ellipse1.StrokeThickness = 2;
Ellipse1.Stroke = Brushes.Black;
Ellipse1.Width = 30;
Ellipse1.Height = 30;
Ellipse1.Margin = new Thickness(EndPosition.X, EndPosition.Y - 15, EndPosition.X + 50, EndPosition.Y + 50);
canvas1.Children.Add(Ellipse1);
SolidColorBrush mySolidColorBrush2 = new SolidColorBrush();
mySolidColorBrush2.Color = Colors.Green; //FromArgb(255, 255, 255, 0);
Ellipse2.Fill = mySolidColorBrush2;
Ellipse2.StrokeThickness = 2;
Ellipse2.Stroke = Brushes.Black;
Ellipse2.Width = 30;
Ellipse2.Height = 30;
Ellipse2.Margin = new Thickness(EndPosition.X + 30, EndPosition.Y - 15, EndPosition.X + 60, EndPosition.Y + 50);
canvas1.Children.Add(Ellipse2);
SolidColorBrush mySolidColorBrush3 = new SolidColorBrush();
mySolidColorBrush3.Color = Colors.Yellow; // FromArgb(255, 255, 255, 0);
Ellipse3.Fill = mySolidColorBrush3;
Ellipse3.StrokeThickness = 2;
Ellipse3.Stroke = Brushes.Black;
Ellipse3.Width = 30;
Ellipse3.Height = 30;
Ellipse3.Margin = new Thickness(EndPosition.X + 60, EndPosition.Y - 15, EndPosition.X + 150, EndPosition.Y + 50);
canvas1.Children.Add(Ellipse3);
**Now I want the user to be able to interactively move this signal on the canvas on mouse move events.
How can I able to do this ?**
Iam using C# WPF.
If want to implement a canvas to drag elements, a DragCanvas is your choice.
Dragging Elements in a Canvas from Josh Smith and after Dragging Elements in a Canvas from igkutikov that adapt Josh Smith code. There are articles with #mustread category.
With the dragCanvas you can implement a full functionality Dragging Element Canvas, and better adapt to your code. Happy coding!
I make group of rectangles with different opacity value and add these rectangles to Grid in WindowsPhone:
var grid=new Grid();
grid.Width = grid.Height = 200;
var rectanglesCount=55;
var rectangleSizeStep = grid.Height / rectanglesCount;
var opacityStep = 1.0 / rectanglesCount
var rectangleSize = grid.Height;
var opacity = 0.0;
for (int i = 0; i <= rectanglesCount; i++)
{
Rectangle rect = new Rectangle();
rect.Height = rect.Width = rectangleSize;
rect.VerticalAlignment = VerticalAlignment.Center;
rect.HorizontalAlignment = HorizontalAlignment.Center;
rect.Fill = new SolidColorBrush(Colors.Yellow);
rect.Opacity = opacity;
opacity += opacityStep;
rectangleSize -= rectangleSizeStep;
grid.Children.Add(rect);
}
I can see in grid following picture:
After I try to save this group of rectangles to WriteableBitmap and show as Image:
var img=new Image();
var wrBit = new WriteableBitmap(grid, null);
img.Source=wrBit;
And I see picture:
What happend with opacity on top and left edges?
How to correctly save group of Rectangles?
Need to use Canvas instead Grid control for group of rectangles:
var canvas=new Canvas();
canvas.Width = canvas.Height = 200;
var rectanglesCount=55;
var rectangleSizeStep = canvas.Height / rectanglesCount;
var opacityStep = 1.0 / rectanglesCount
var rectangleSize = canvas.Height;
var opacity = 0.0;
var rectMargin = 0.0;
for (int i = 0; i <= rectanglesCount; i++)
{
Rectangle rect = new Rectangle();
rect.Height = rect.Width = rectangleSize;
rect.Margin=new Thickness(rectMargin,rectMargin,0,0);
rectMargin += rectangleSizeStep/2;
rect.Fill = new SolidColorBrush(Colors.Yellow);
rect.Opacity = opacity;
opacity += opacityStep;
rectangleSize -= rectangleSizeStep;
canvas.Children.Add(rect);
}
and save Canvas as WriteableBitmap:
var img=new Image();
var wrBit = new WriteableBitmap(canvas, null);
img.Source=wrBit;
Problem was solved!
So, Basically I'm trying to draw a line between the center of 2 ellipses
And I think this should do it:
Path myPath = new Path();
myPath.Stroke = System.Windows.Media.Brushes.Black;
myPath.StrokeThickness = 4;
myPath.HorizontalAlignment = HorizontalAlignment.Left;
myPath.VerticalAlignment = VerticalAlignment.Center;
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new System.Windows.Point((xQuard * 10) + 100, yQuard * 10);
myEllipseGeometry.RadiusX = 2;
myEllipseGeometry.RadiusY = 2;
myPath.Data = myEllipseGeometry;
GraphPanel.Children.Add(myPath);
//if it's not the first point...
if (prevA != 0.0)
{
Path iLine = new Path();
iLine.Stroke = Brushes.Black;
iLine.StrokeThickness = 4;
iLine.HorizontalAlignment = HorizontalAlignment.Left;
myPath.VerticalAlignment = VerticalAlignment.Center;
LineGeometry iLineGeometry = new LineGeometry();
iLineGeometry.StartPoint = myEllipseGeometry.Center;
iLineGeometry.EndPoint = new System.Windows.Point(prevA, prevB);
iLine.Data = iLineGeometry;
GraphPanel.Children.Add(iLine);
}
//Set the previous point(s)
prevA = (xQuard * 10) + 100;
prevB = yQuard * 10;
Now as you can see, I've set the Line's StartPoint = to the first ellipse start point
And Yet....
Why is the Line's start point in the picture not the center of the point on the left?
I think you mean iLine.VerticalAlignment instead of myPath.VerticalAlignment the second time, right?
It won't change the position, the position is fixed at runtime even though i change the value 50 below:
System.Windows.Shapes.Rectangle myRectangle = new System.Windows.Shapes.Rectangle();
mainGrid.Children.Add(myRectangle);
Canvas.SetLeft(myRectangle, 50);
Canvas.SetTop(myRectangle, 50);
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
here are the 2 solutions for your problem
1) with a canvas
var myRectangle = new System.Windows.Shapes.Rectangle();
var mainCanvas = new Canvas();
mainGrid.Children.Add(mainCanvas);
mainCanvas.Children.Add(myRectangle);
Canvas.SetLeft(myRectangle, 50);
Canvas.SetTop(myRectangle, 50);
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
2) only with your grid
var myRectangle = new System.Windows.Shapes.Rectangle();
mainGrid.Children.Add(myRectangle);
myRectangle.Margin = new Thickness(50, 50, 0, 0);
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.VerticalAlignment = VerticalAlignment.Top;
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;