Start Free Trial

asked on

Create dynamic polygons from coordinates in WPF

I have 2 lines on a lithographical chart (2 vectors created from coordinates). One line is above another like this: =====. I use WPF to draw these lines dynamically on a canvas based on user selection. Sections between these lines created by 4 points (2 are coordinates between 2 points on the upper line and the other 2 are points on the lower line) are polygons. So, if upper line consists from 10 points (coordinates) and lower line has 10 points (coordinates) we have 5 polygons between them: = = = = =. I need to dynamically outline and paint these polygons based on user selection. For example upper Line_1 points coordinates are: 1,2,3,4,5 (starts with 1) and lower Line_2 points coordinates are: 6,7,8,9,10 (starts with 6). If user wants to see 1st polygon it would be area with coordinates: 1,2,6,7. These points need to go in sequence: 1,2,7,6 to create a proper shape (4 points polygon). If user want to see 1st and 2nd polygons this would be area with coordinates: 1,2,3,8,7,6 (and so on for 3rd, 4th and 5th areas). Areas can only be viewed sequentially started with 1st. In other words user cannot view 1st, 2nd and 4th areas skipping 3rd area. I am struggling to find the best logical solution how to do this.
Let’s say lines coordinates come from 2 arrays: array Line_1 = 1,2,3,4,5 and array Line_2 = 6,7,8,9,10. Then 1st polygon coordinates would be: Line_1[0], Line_1[1], Line_2[1], Line_2[0]. 2nd polygon: Line_1[0], Line_1[1], Line_1[2], Line_2[2], Line_2[1], Line_2[0] etc. I always need to split array Line_1 in the middle, insert two new members from array Line_2 and flip their places: 0, 1, 2, 2, 1, 0. I think to use loops for this.
Can you suggest me a better solution for this task? If not, then can you advise me how to make this more efficient by using loops through 2 arrays? How to split array in the middle, shift its items 2 positions to the right and insert 2 new items? Thank You! :)))

You can always work with List instead of an array.
You can always Use Array.Copy

You can also post your code in a runable state (post a link to the project after you uploaded it somewhere) so people will actually understand what you are trying to do.

I have to say that most people, after entering this question, leave after a short time since it is hard to read your question.
It doesn't have paragraphs, it doesn't have images and code snippets and the text is very crowded.

If it's actually a WPF related question (and not just about splitting an array) then maybe consider putting it also under WPF section.

I'm a WPF expert, so I can help you with few things (Also with designing you code... I don't know if you are working with Binding and MVVM).

Post a Rapidshare/MegaUpload link to your project and maybe someone will be able to help you with your code.

ASKER

Hi sragani,
Thank you for your comment! I do want to create this using WPF MVVM and C#. I am new to WPF and to this site. My project runs locally and I do not have Rapidshare/MegaUpload. Can you help me if I break down this in small tasks?
First of all: How to use List array or Array.Copy to add new items in the middle of array using loop?

Initial array: int[] arrCoordinates = new int[] {1, 2, 3, 4, 5, 6};

Add two new elements in the middle: 7 and 8

So it looks like this: int[] arrCoordinates = new int[] {1, 2, 3, 7, 8, 4, 5, 6};

Thank you!

If you need some kind of collection that you can insert items in the middle (or insert items at all, cause with array you can't do it) then work with List since it is Generic.

List<int> arrCoordinates = new List<int>().

for adding elements: arrCoordinates.Add

for example:

for (int i = 1; i <=6; i++)
{
arrCoordinates.Add(i);
}

arrCoordinates.Insert(7, 3);
arrCoordinates.Insert(8, 4);

Hi, my bad, it should be (Index first):

arrCoordinates.Insert(3, 7);
arrCoordinates.Insert(4, 8);

You can also add a range of items:
int[] arr = new int[] { 1, 2, 3, 4, 5, 6 };
List<int> arrCoordinates = new List<int>();
arrCoordinates.AddRange(arr);

AddRange adds elements to the end and accepts any IEnumerable (in this case you need IEnumerable<int>

Since you are dealing with coordinates then maybe you should work with Point instead of int since it holds both x and y.

ASKER

Saragani, here is hardcoded WPF prototype of what I try to build:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace LithographLines
{
/// <summary>
/// Interaction logic for Page1.xaml
/// </summary>
public partial class Window1 : Window
{
private Polygon Pol1;
private Polygon Pol2;
private Polygon Pol3;
ImageBrush Pol1PatternBrush = new ImageBrush();
ImageBrush Pol2PatternBrush = new ImageBrush();
ImageBrush Pol3PatternBrush = new ImageBrush();

public Window1()
{
InitializeComponent();

InitializeComponent();
Pol1 = new Polygon();
Pol2 = new Polygon();
Pol3 = new Polygon();

Pol1PatternBrush.TileMode = TileMode.Tile;
Pol1PatternBrush.Stretch = Stretch.None;
Pol1PatternBrush.Viewport = new System.Windows.Rect(0, 0, 118, 36);
Pol1PatternBrush.ViewportUnits = System.Windows.Media.BrushMappingMode.Absolute;
Pol1PatternBrush.ImageSource = new BitmapImage(new Uri(@"Images\SomePattern1.jpg", UriKind.Relative));
Pol1.Fill = Pol1PatternBrush;

Pol2PatternBrush.TileMode = TileMode.Tile;
Pol2PatternBrush.Stretch = Stretch.None;
Pol2PatternBrush.Viewport = new System.Windows.Rect(0, 0, 118, 36);
Pol2PatternBrush.ViewportUnits = System.Windows.Media.BrushMappingMode.Absolute;
Pol2PatternBrush.ImageSource = new BitmapImage(new Uri(@"Images\SomePattern2.jpg", UriKind.Relative));
Pol2.Fill = Pol2PatternBrush;

Pol3PatternBrush.TileMode = TileMode.Tile;
Pol3PatternBrush.Stretch = Stretch.None;
Pol3PatternBrush.Viewport = new System.Windows.Rect(0, 0, 118, 36);
Pol3PatternBrush.ViewportUnits = System.Windows.Media.BrushMappingMode.Absolute;
Pol3PatternBrush.ImageSource = new BitmapImage(new Uri(@"Images\SomePattern3.jpg", UriKind.Relative));
Pol3.Fill = Pol3PatternBrush;

Pol1.Opacity = 0.7;
Pol2.Opacity = 0.7;
Pol3.Opacity = 0.7;
Pol1.Points = new PointCollection();
Pol2.Points = new PointCollection();
Pol3.Points = new PointCollection();
mainCanvas.Children.Add(Pol1);
mainCanvas.Children.Add(Pol2);
mainCanvas.Children.Add(Pol3);

// Move all polygons up & left
TranslateTransform translateTransform1 = new TranslateTransform(-300, -100);

Pol1.RenderTransform = translateTransform1;
Pol2.RenderTransform = translateTransform1;
Pol3.RenderTransform = translateTransform1;

// Make all polygons smaller
ScaleTransform scaleTransform1 = new ScaleTransform(0.8, 0.8);

Pol1.RenderTransform = scaleTransform1;
Pol2.RenderTransform = scaleTransform1;
Pol3.RenderTransform = scaleTransform1;

}

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{

double value = e.NewValue;
Pol1.Points.Clear();
Pol2.Points.Clear();
Pol3.Points.Clear();

if (value == 0)
{
// Start from 0
}

if (value == 1)
{
// BLUE POLYGON
//p.Points = new PointCollection() { new Point(100, 100), new Point(200, 150), new Point(300, 250), new Point(400, 200),
//new Point(500, 100), new Point(600, 150), new Point(700, 250), new Point(800, 200),
//new Point(900, 250), new Point(1000, 300), new Point(1000, 350), new Point(900, 300),
//new Point(800, 250), new Point(700, 300), new Point(600, 200), new Point(500, 150),
//new Point(400, 250), new Point(300, 300), new Point(200, 200), new Point(100, 150) };

System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_4 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);

// GREEN POLYGON
// 1.Points = new PointCollection() { new Point( 1000,350 900,300 800,250 700, 300 600, 200 500, 150 400, 250 300, 300 200, 200 100, 150 100, 300 200, 350 300, 450 400, 400 500, 300 600, 350 700, 450 800, 400 900, 450 1000, 500 "

System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_4 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);

// BROWN POLYGON
//p2.Points = new PointCollection() { new Point(100, 300), new Point(200, 350), new Point(300, 450), new Point(400, 400),
// new Point(500, 300), new Point(600, 350), new Point(700, 450), new Point(800, 400),
// new Point(900, 450), new Point(1000, 500), new Point(1000, 750), new Point(900, 700),
// new Point(800, 650), new Point(700, 700), new Point(600, 600), new Point(500, 550),
// new Point(400, 650), new Point(300, 700), new Point(200, 600), new Point(100, 550) };

System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_4 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);

}

if (value == 2)
{
// BLUE
System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(300, 250);
System.Windows.Point Point1_4 = new System.Windows.Point(300, 300);
System.Windows.Point Point1_5 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_6 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);
myPointCollection1.Add(Point1_5);
myPointCollection1.Add(Point1_6);

// GREEN
// 1.Points = new PointCollection() { new Point( 1000,350 900,300 800,250 700, 300 600, 200 500, 150 400, 250 300, 300 200, 200 100, 150 100, 300 200, 350 300, 450 400, 400 500, 300 600, 350 700, 450 800, 400 900, 450 1000, 500 "
System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(300, 300);
System.Windows.Point Point2_4 = new System.Windows.Point(300, 450);
System.Windows.Point Point2_5 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_6 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);
myPointCollection2.Add(Point2_5);
myPointCollection2.Add(Point2_6);

// BROWN
System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(300, 450);
System.Windows.Point Point3_4 = new System.Windows.Point(300, 700);
System.Windows.Point Point3_5 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_6 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);
myPointCollection3.Add(Point3_5);
myPointCollection3.Add(Point3_6);
}

if (value == 3)
{
// BLUE
System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(300, 250);
System.Windows.Point Point1_4 = new System.Windows.Point(400, 200);
System.Windows.Point Point1_5 = new System.Windows.Point(400, 250);
System.Windows.Point Point1_6 = new System.Windows.Point(300, 300);
System.Windows.Point Point1_7 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_8 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);
myPointCollection1.Add(Point1_5);
myPointCollection1.Add(Point1_6);
myPointCollection1.Add(Point1_7);
myPointCollection1.Add(Point1_8);

// GREEN
// 1.Points = new PointCollection() { new Point( 1000,350 900,300 800,250 700, 300 600, 200 500, 150 400, 250 300, 300 200, 200 100, 150 100, 300 200, 350 300, 450 400, 400 500, 300 600, 350 700, 450 800, 400 900, 450 1000, 500 "
System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(300, 300);
System.Windows.Point Point2_4 = new System.Windows.Point(400, 250);
System.Windows.Point Point2_5 = new System.Windows.Point(400, 400);
System.Windows.Point Point2_6 = new System.Windows.Point(300, 450);
System.Windows.Point Point2_7 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_8 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);
myPointCollection2.Add(Point2_5);
myPointCollection2.Add(Point2_6);
myPointCollection2.Add(Point2_7);
myPointCollection2.Add(Point2_8);

// BROWN
System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(300, 450);
System.Windows.Point Point3_4 = new System.Windows.Point(400, 400);
System.Windows.Point Point3_5 = new System.Windows.Point(400, 650);
System.Windows.Point Point3_6 = new System.Windows.Point(300, 700);
System.Windows.Point Point3_7 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_8 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);
myPointCollection3.Add(Point3_5);
myPointCollection3.Add(Point3_6);
myPointCollection3.Add(Point3_7);
myPointCollection3.Add(Point3_8);
}

if (value == 4)
{
// BLUE
System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(300, 250);
System.Windows.Point Point1_4 = new System.Windows.Point(400, 200);
System.Windows.Point Point1_5 = new System.Windows.Point(500, 100);
System.Windows.Point Point1_6 = new System.Windows.Point(500, 150);
System.Windows.Point Point1_7 = new System.Windows.Point(400, 250);
System.Windows.Point Point1_8 = new System.Windows.Point(300, 300);
System.Windows.Point Point1_9 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_10 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);
myPointCollection1.Add(Point1_5);
myPointCollection1.Add(Point1_6);
myPointCollection1.Add(Point1_7);
myPointCollection1.Add(Point1_8);
myPointCollection1.Add(Point1_9);
myPointCollection1.Add(Point1_10);

// GREEN
// 1.Points = new PointCollection() { new Point( 1000,350 900,300 800,250 700, 300 600, 200 500, 150 400, 250 300, 300 200, 200 100, 150 100, 300 200, 350 300, 450 400, 400 500, 300 600, 350 700, 450 800, 400 900, 450 1000, 500 "
System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(300, 300);
System.Windows.Point Point2_4 = new System.Windows.Point(400, 250);
System.Windows.Point Point2_5 = new System.Windows.Point(500, 150);
System.Windows.Point Point2_6 = new System.Windows.Point(500, 300);
System.Windows.Point Point2_7 = new System.Windows.Point(400, 400);
System.Windows.Point Point2_8 = new System.Windows.Point(300, 450);
System.Windows.Point Point2_9 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_10 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);
myPointCollection2.Add(Point2_5);
myPointCollection2.Add(Point2_6);
myPointCollection2.Add(Point2_7);
myPointCollection2.Add(Point2_8);
myPointCollection2.Add(Point2_9);
myPointCollection2.Add(Point2_10);

// BROWN
System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(300, 450);
System.Windows.Point Point3_4 = new System.Windows.Point(400, 400);
System.Windows.Point Point3_5 = new System.Windows.Point(500, 300);
System.Windows.Point Point3_6 = new System.Windows.Point(500, 550);
System.Windows.Point Point3_7 = new System.Windows.Point(400, 650);
System.Windows.Point Point3_8 = new System.Windows.Point(300, 700);
System.Windows.Point Point3_9 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_10 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);
myPointCollection3.Add(Point3_5);
myPointCollection3.Add(Point3_6);
myPointCollection3.Add(Point3_7);
myPointCollection3.Add(Point3_8);
myPointCollection3.Add(Point3_9);
myPointCollection3.Add(Point3_10);
}

if (value == 5)
{
// BLUE
System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(300, 250);
System.Windows.Point Point1_4 = new System.Windows.Point(400, 200);
System.Windows.Point Point1_5 = new System.Windows.Point(500, 100);
System.Windows.Point Point1_6 = new System.Windows.Point(600, 150);
System.Windows.Point Point1_7 = new System.Windows.Point(600, 200);
System.Windows.Point Point1_8 = new System.Windows.Point(500, 150);
System.Windows.Point Point1_9 = new System.Windows.Point(400, 250);
System.Windows.Point Point1_10 = new System.Windows.Point(300, 300);
System.Windows.Point Point1_11 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_12 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);
myPointCollection1.Add(Point1_5);
myPointCollection1.Add(Point1_6);
myPointCollection1.Add(Point1_7);
myPointCollection1.Add(Point1_8);
myPointCollection1.Add(Point1_9);
myPointCollection1.Add(Point1_10);
myPointCollection1.Add(Point1_11);
myPointCollection1.Add(Point1_12);

// GREEN
System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(300, 300);
System.Windows.Point Point2_4 = new System.Windows.Point(400, 250);
System.Windows.Point Point2_5 = new System.Windows.Point(500, 150);
System.Windows.Point Point2_6 = new System.Windows.Point(600, 200);
System.Windows.Point Point2_7 = new System.Windows.Point(600, 350);
System.Windows.Point Point2_8 = new System.Windows.Point(500, 300);
System.Windows.Point Point2_9 = new System.Windows.Point(400, 400);
System.Windows.Point Point2_10 = new System.Windows.Point(300, 450);
System.Windows.Point Point2_11 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_12 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);
myPointCollection2.Add(Point2_5);
myPointCollection2.Add(Point2_6);
myPointCollection2.Add(Point2_7);
myPointCollection2.Add(Point2_8);
myPointCollection2.Add(Point2_9);
myPointCollection2.Add(Point2_10);
myPointCollection2.Add(Point2_11);
myPointCollection2.Add(Point2_12);

// BROWN
System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(300, 450);
System.Windows.Point Point3_4 = new System.Windows.Point(400, 400);
System.Windows.Point Point3_5 = new System.Windows.Point(500, 300);
System.Windows.Point Point3_6 = new System.Windows.Point(600, 350);
System.Windows.Point Point3_7 = new System.Windows.Point(600, 600);
System.Windows.Point Point3_8 = new System.Windows.Point(500, 550);
System.Windows.Point Point3_9 = new System.Windows.Point(400, 650);
System.Windows.Point Point3_10 = new System.Windows.Point(300, 700);
System.Windows.Point Point3_11 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_12 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);
myPointCollection3.Add(Point3_5);
myPointCollection3.Add(Point3_6);
myPointCollection3.Add(Point3_7);
myPointCollection3.Add(Point3_8);
myPointCollection3.Add(Point3_9);
myPointCollection3.Add(Point3_10);
myPointCollection3.Add(Point3_11);
myPointCollection3.Add(Point3_12);
}

if (value == 6)
{
// BLUE
System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(300, 250);
System.Windows.Point Point1_4 = new System.Windows.Point(400, 200);
System.Windows.Point Point1_5 = new System.Windows.Point(500, 100);
System.Windows.Point Point1_6 = new System.Windows.Point(600, 150);
System.Windows.Point Point1_7 = new System.Windows.Point(700, 250);
System.Windows.Point Point1_8 = new System.Windows.Point(700, 300);
System.Windows.Point Point1_9 = new System.Windows.Point(600, 200);
System.Windows.Point Point1_10 = new System.Windows.Point(500, 150);
System.Windows.Point Point1_11 = new System.Windows.Point(400, 250);
System.Windows.Point Point1_12 = new System.Windows.Point(300, 300);
System.Windows.Point Point1_13 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_14 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);
myPointCollection1.Add(Point1_5);
myPointCollection1.Add(Point1_6);
myPointCollection1.Add(Point1_7);
myPointCollection1.Add(Point1_8);
myPointCollection1.Add(Point1_9);
myPointCollection1.Add(Point1_10);
myPointCollection1.Add(Point1_11);
myPointCollection1.Add(Point1_12);
myPointCollection1.Add(Point1_13);
myPointCollection1.Add(Point1_14);

// GREEN
System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(300, 300);
System.Windows.Point Point2_4 = new System.Windows.Point(400, 250);
System.Windows.Point Point2_5 = new System.Windows.Point(500, 150);
System.Windows.Point Point2_6 = new System.Windows.Point(600, 200);
System.Windows.Point Point2_7 = new System.Windows.Point(700, 300);
System.Windows.Point Point2_8 = new System.Windows.Point(700, 450);
System.Windows.Point Point2_9 = new System.Windows.Point(600, 350);
System.Windows.Point Point2_10 = new System.Windows.Point(500, 300);
System.Windows.Point Point2_11 = new System.Windows.Point(400, 400);
System.Windows.Point Point2_12 = new System.Windows.Point(300, 450);
System.Windows.Point Point2_13 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_14 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);
myPointCollection2.Add(Point2_5);
myPointCollection2.Add(Point2_6);
myPointCollection2.Add(Point2_7);
myPointCollection2.Add(Point2_8);
myPointCollection2.Add(Point2_9);
myPointCollection2.Add(Point2_10);
myPointCollection2.Add(Point2_11);
myPointCollection2.Add(Point2_12);
myPointCollection2.Add(Point2_13);
myPointCollection2.Add(Point2_14);

// BROWN
System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(300, 450);
System.Windows.Point Point3_4 = new System.Windows.Point(400, 400);
System.Windows.Point Point3_5 = new System.Windows.Point(500, 300);
System.Windows.Point Point3_6 = new System.Windows.Point(600, 350);
System.Windows.Point Point3_7 = new System.Windows.Point(700, 450);
System.Windows.Point Point3_8 = new System.Windows.Point(700, 700);
System.Windows.Point Point3_9 = new System.Windows.Point(600, 600);
System.Windows.Point Point3_10 = new System.Windows.Point(500, 550);
System.Windows.Point Point3_11 = new System.Windows.Point(400, 650);
System.Windows.Point Point3_12 = new System.Windows.Point(300, 700);
System.Windows.Point Point3_13 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_14 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);
myPointCollection3.Add(Point3_5);
myPointCollection3.Add(Point3_6);
myPointCollection3.Add(Point3_7);
myPointCollection3.Add(Point3_8);
myPointCollection3.Add(Point3_9);
myPointCollection3.Add(Point3_10);
myPointCollection3.Add(Point3_11);
myPointCollection3.Add(Point3_12);
myPointCollection3.Add(Point3_13);
myPointCollection3.Add(Point3_14);
}

if (value == 7)
{
// BLUE
System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(300, 250);
System.Windows.Point Point1_4 = new System.Windows.Point(400, 200);
System.Windows.Point Point1_5 = new System.Windows.Point(500, 100);
System.Windows.Point Point1_6 = new System.Windows.Point(600, 150);
System.Windows.Point Point1_7 = new System.Windows.Point(700, 250);

System.Windows.Point Point1_8 = new System.Windows.Point(800, 200);
System.Windows.Point Point1_9 = new System.Windows.Point(800, 250);

System.Windows.Point Point1_10 = new System.Windows.Point(700, 300);
System.Windows.Point Point1_11 = new System.Windows.Point(600, 200);
System.Windows.Point Point1_12 = new System.Windows.Point(500, 150);
System.Windows.Point Point1_13 = new System.Windows.Point(400, 250);
System.Windows.Point Point1_14 = new System.Windows.Point(300, 300);
System.Windows.Point Point1_15 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_16 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);
myPointCollection1.Add(Point1_5);
myPointCollection1.Add(Point1_6);
myPointCollection1.Add(Point1_7);
myPointCollection1.Add(Point1_8);
myPointCollection1.Add(Point1_9);
myPointCollection1.Add(Point1_10);
myPointCollection1.Add(Point1_11);
myPointCollection1.Add(Point1_12);
myPointCollection1.Add(Point1_13);
myPointCollection1.Add(Point1_14);
myPointCollection1.Add(Point1_15);
myPointCollection1.Add(Point1_16);

// GREEN
System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(300, 300);
System.Windows.Point Point2_4 = new System.Windows.Point(400, 250);
System.Windows.Point Point2_5 = new System.Windows.Point(500, 150);
System.Windows.Point Point2_6 = new System.Windows.Point(600, 200);
System.Windows.Point Point2_7 = new System.Windows.Point(700, 300);

System.Windows.Point Point2_8 = new System.Windows.Point(800, 250);
System.Windows.Point Point2_9 = new System.Windows.Point(800, 400);

System.Windows.Point Point2_10 = new System.Windows.Point(700, 450);
System.Windows.Point Point2_11 = new System.Windows.Point(600, 350);
System.Windows.Point Point2_12 = new System.Windows.Point(500, 300);
System.Windows.Point Point2_13 = new System.Windows.Point(400, 400);
System.Windows.Point Point2_14 = new System.Windows.Point(300, 450);
System.Windows.Point Point2_15 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_16 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);
myPointCollection2.Add(Point2_5);
myPointCollection2.Add(Point2_6);
myPointCollection2.Add(Point2_7);
myPointCollection2.Add(Point2_8);
myPointCollection2.Add(Point2_9);
myPointCollection2.Add(Point2_10);
myPointCollection2.Add(Point2_11);
myPointCollection2.Add(Point2_12);
myPointCollection2.Add(Point2_13);
myPointCollection2.Add(Point2_14);
myPointCollection2.Add(Point2_15);
myPointCollection2.Add(Point2_16);

// BROWN
System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(300, 450);
System.Windows.Point Point3_4 = new System.Windows.Point(400, 400);
System.Windows.Point Point3_5 = new System.Windows.Point(500, 300);
System.Windows.Point Point3_6 = new System.Windows.Point(600, 350);
System.Windows.Point Point3_7 = new System.Windows.Point(700, 450);

System.Windows.Point Point3_8 = new System.Windows.Point(800, 400);
System.Windows.Point Point3_9 = new System.Windows.Point(800, 650);

System.Windows.Point Point3_10 = new System.Windows.Point(700, 700);
System.Windows.Point Point3_11 = new System.Windows.Point(600, 600);
System.Windows.Point Point3_12 = new System.Windows.Point(500, 550);
System.Windows.Point Point3_13 = new System.Windows.Point(400, 650);
System.Windows.Point Point3_14 = new System.Windows.Point(300, 700);
System.Windows.Point Point3_15 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_16 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);
myPointCollection3.Add(Point3_5);
myPointCollection3.Add(Point3_6);
myPointCollection3.Add(Point3_7);
myPointCollection3.Add(Point3_8);
myPointCollection3.Add(Point3_9);
myPointCollection3.Add(Point3_10);
myPointCollection3.Add(Point3_11);
myPointCollection3.Add(Point3_12);
myPointCollection3.Add(Point3_13);
myPointCollection3.Add(Point3_14);
myPointCollection3.Add(Point3_15);
myPointCollection3.Add(Point3_16);
}

if (value == 8)
{
// BLUE
System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(300, 250);
System.Windows.Point Point1_4 = new System.Windows.Point(400, 200);
System.Windows.Point Point1_5 = new System.Windows.Point(500, 100);
System.Windows.Point Point1_6 = new System.Windows.Point(600, 150);
System.Windows.Point Point1_7 = new System.Windows.Point(700, 250);
System.Windows.Point Point1_8 = new System.Windows.Point(800, 200);

System.Windows.Point Point1_9 = new System.Windows.Point(900, 250);
System.Windows.Point Point1_10 = new System.Windows.Point(900, 300);

System.Windows.Point Point1_11 = new System.Windows.Point(800, 250);
System.Windows.Point Point1_12 = new System.Windows.Point(700, 300);
System.Windows.Point Point1_13 = new System.Windows.Point(600, 200);
System.Windows.Point Point1_14 = new System.Windows.Point(500, 150);
System.Windows.Point Point1_15 = new System.Windows.Point(400, 250);
System.Windows.Point Point1_16 = new System.Windows.Point(300, 300);
System.Windows.Point Point1_17 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_18 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);
myPointCollection1.Add(Point1_5);
myPointCollection1.Add(Point1_6);
myPointCollection1.Add(Point1_7);
myPointCollection1.Add(Point1_8);
myPointCollection1.Add(Point1_9);
myPointCollection1.Add(Point1_10);
myPointCollection1.Add(Point1_11);
myPointCollection1.Add(Point1_12);
myPointCollection1.Add(Point1_13);
myPointCollection1.Add(Point1_14);
myPointCollection1.Add(Point1_15);
myPointCollection1.Add(Point1_16);
myPointCollection1.Add(Point1_17);
myPointCollection1.Add(Point1_18);

// GREEN
System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(300, 300);
System.Windows.Point Point2_4 = new System.Windows.Point(400, 250);
System.Windows.Point Point2_5 = new System.Windows.Point(500, 150);
System.Windows.Point Point2_6 = new System.Windows.Point(600, 200);
System.Windows.Point Point2_7 = new System.Windows.Point(700, 300);
System.Windows.Point Point2_8 = new System.Windows.Point(800, 250);
System.Windows.Point Point2_9 = new System.Windows.Point(900, 300);
System.Windows.Point Point2_10 = new System.Windows.Point(900, 450);
System.Windows.Point Point2_11 = new System.Windows.Point(800, 400);
System.Windows.Point Point2_12 = new System.Windows.Point(700, 450);
System.Windows.Point Point2_13 = new System.Windows.Point(600, 350);
System.Windows.Point Point2_14 = new System.Windows.Point(500, 300);
System.Windows.Point Point2_15 = new System.Windows.Point(400, 400);
System.Windows.Point Point2_16 = new System.Windows.Point(300, 450);
System.Windows.Point Point2_17 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_18 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);
myPointCollection2.Add(Point2_5);
myPointCollection2.Add(Point2_6);
myPointCollection2.Add(Point2_7);
myPointCollection2.Add(Point2_8);
myPointCollection2.Add(Point2_9);
myPointCollection2.Add(Point2_10);
myPointCollection2.Add(Point2_11);
myPointCollection2.Add(Point2_12);
myPointCollection2.Add(Point2_13);
myPointCollection2.Add(Point2_14);
myPointCollection2.Add(Point2_15);
myPointCollection2.Add(Point2_16);
myPointCollection2.Add(Point2_17);
myPointCollection2.Add(Point2_18);

// BROWN
System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(300, 450);
System.Windows.Point Point3_4 = new System.Windows.Point(400, 400);
System.Windows.Point Point3_5 = new System.Windows.Point(500, 300);
System.Windows.Point Point3_6 = new System.Windows.Point(600, 350);
System.Windows.Point Point3_7 = new System.Windows.Point(700, 450);
System.Windows.Point Point3_8 = new System.Windows.Point(800, 400);
System.Windows.Point Point3_9 = new System.Windows.Point(900, 450);
System.Windows.Point Point3_10 = new System.Windows.Point(900, 700);
System.Windows.Point Point3_11 = new System.Windows.Point(800, 650);
System.Windows.Point Point3_12 = new System.Windows.Point(700, 700);
System.Windows.Point Point3_13 = new System.Windows.Point(600, 600);
System.Windows.Point Point3_14 = new System.Windows.Point(500, 550);
System.Windows.Point Point3_15 = new System.Windows.Point(400, 650);
System.Windows.Point Point3_16 = new System.Windows.Point(300, 700);
System.Windows.Point Point3_17 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_18 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);
myPointCollection3.Add(Point3_5);
myPointCollection3.Add(Point3_6);
myPointCollection3.Add(Point3_7);
myPointCollection3.Add(Point3_8);
myPointCollection3.Add(Point3_9);
myPointCollection3.Add(Point3_10);
myPointCollection3.Add(Point3_11);
myPointCollection3.Add(Point3_12);
myPointCollection3.Add(Point3_13);
myPointCollection3.Add(Point3_14);
myPointCollection3.Add(Point3_15);
myPointCollection3.Add(Point3_16);
myPointCollection3.Add(Point3_17);
myPointCollection3.Add(Point3_18);
}

if (value == 9)
{
// BLUE
System.Windows.Point Point1_1 = new System.Windows.Point(100, 100);
System.Windows.Point Point1_2 = new System.Windows.Point(200, 150);
System.Windows.Point Point1_3 = new System.Windows.Point(300, 250);
System.Windows.Point Point1_4 = new System.Windows.Point(400, 200);
System.Windows.Point Point1_5 = new System.Windows.Point(500, 100);
System.Windows.Point Point1_6 = new System.Windows.Point(600, 150);
System.Windows.Point Point1_7 = new System.Windows.Point(700, 250);
System.Windows.Point Point1_8 = new System.Windows.Point(800, 200);
System.Windows.Point Point1_9 = new System.Windows.Point(900, 250);
System.Windows.Point Point1_10 = new System.Windows.Point(1000, 300);
System.Windows.Point Point1_11 = new System.Windows.Point(1000, 350);
System.Windows.Point Point1_12 = new System.Windows.Point(900, 300);
System.Windows.Point Point1_13 = new System.Windows.Point(800, 250);
System.Windows.Point Point1_14 = new System.Windows.Point(700, 300);
System.Windows.Point Point1_15 = new System.Windows.Point(600, 200);
System.Windows.Point Point1_16 = new System.Windows.Point(500, 150);
System.Windows.Point Point1_17 = new System.Windows.Point(400, 250);
System.Windows.Point Point1_18 = new System.Windows.Point(300, 300);
System.Windows.Point Point1_19 = new System.Windows.Point(200, 200);
System.Windows.Point Point1_20 = new System.Windows.Point(100, 150);

PointCollection myPointCollection1 = Pol1.Points;

myPointCollection1.Add(Point1_1);
myPointCollection1.Add(Point1_2);
myPointCollection1.Add(Point1_3);
myPointCollection1.Add(Point1_4);
myPointCollection1.Add(Point1_5);
myPointCollection1.Add(Point1_6);
myPointCollection1.Add(Point1_7);
myPointCollection1.Add(Point1_8);
myPointCollection1.Add(Point1_9);
myPointCollection1.Add(Point1_10);
myPointCollection1.Add(Point1_11);
myPointCollection1.Add(Point1_12);
myPointCollection1.Add(Point1_13);
myPointCollection1.Add(Point1_14);
myPointCollection1.Add(Point1_15);
myPointCollection1.Add(Point1_16);
myPointCollection1.Add(Point1_17);
myPointCollection1.Add(Point1_18);
myPointCollection1.Add(Point1_19);
myPointCollection1.Add(Point1_20);

// GREEN
System.Windows.Point Point2_1 = new System.Windows.Point(100, 150);
System.Windows.Point Point2_2 = new System.Windows.Point(200, 200);
System.Windows.Point Point2_3 = new System.Windows.Point(300, 300);
System.Windows.Point Point2_4 = new System.Windows.Point(400, 250);
System.Windows.Point Point2_5 = new System.Windows.Point(500, 150);
System.Windows.Point Point2_6 = new System.Windows.Point(600, 200);
System.Windows.Point Point2_7 = new System.Windows.Point(700, 300);
System.Windows.Point Point2_8 = new System.Windows.Point(800, 250);
System.Windows.Point Point2_9 = new System.Windows.Point(900, 300);
System.Windows.Point Point2_10 = new System.Windows.Point(1000, 350);
System.Windows.Point Point2_11 = new System.Windows.Point(1000, 500);
System.Windows.Point Point2_12 = new System.Windows.Point(900, 450);
System.Windows.Point Point2_13 = new System.Windows.Point(800, 400);
System.Windows.Point Point2_14 = new System.Windows.Point(700, 450);
System.Windows.Point Point2_15 = new System.Windows.Point(600, 350);
System.Windows.Point Point2_16 = new System.Windows.Point(500, 300);
System.Windows.Point Point2_17 = new System.Windows.Point(400, 400);
System.Windows.Point Point2_18 = new System.Windows.Point(300, 450);
System.Windows.Point Point2_19 = new System.Windows.Point(200, 350);
System.Windows.Point Point2_20 = new System.Windows.Point(100, 300);

PointCollection myPointCollection2 = Pol2.Points;

myPointCollection2.Add(Point2_1);
myPointCollection2.Add(Point2_2);
myPointCollection2.Add(Point2_3);
myPointCollection2.Add(Point2_4);
myPointCollection2.Add(Point2_5);
myPointCollection2.Add(Point2_6);
myPointCollection2.Add(Point2_7);
myPointCollection2.Add(Point2_8);
myPointCollection2.Add(Point2_9);
myPointCollection2.Add(Point2_10);
myPointCollection2.Add(Point2_11);
myPointCollection2.Add(Point2_12);
myPointCollection2.Add(Point2_13);
myPointCollection2.Add(Point2_14);
myPointCollection2.Add(Point2_15);
myPointCollection2.Add(Point2_16);
myPointCollection2.Add(Point2_17);
myPointCollection2.Add(Point2_18);
myPointCollection2.Add(Point2_19);
myPointCollection2.Add(Point2_20);

// BROWN
System.Windows.Point Point3_1 = new System.Windows.Point(100, 300);
System.Windows.Point Point3_2 = new System.Windows.Point(200, 350);
System.Windows.Point Point3_3 = new System.Windows.Point(300, 450);
System.Windows.Point Point3_4 = new System.Windows.Point(400, 400);
System.Windows.Point Point3_5 = new System.Windows.Point(500, 300);
System.Windows.Point Point3_6 = new System.Windows.Point(600, 350);
System.Windows.Point Point3_7 = new System.Windows.Point(700, 450);
System.Windows.Point Point3_8 = new System.Windows.Point(800, 400);
System.Windows.Point Point3_9 = new System.Windows.Point(900, 450);

System.Windows.Point Point3_10 = new System.Windows.Point(1000, 500);
System.Windows.Point Point3_11 = new System.Windows.Point(1000, 750);

System.Windows.Point Point3_12 = new System.Windows.Point(900, 700);
System.Windows.Point Point3_13 = new System.Windows.Point(800, 650);
System.Windows.Point Point3_14 = new System.Windows.Point(700, 700);
System.Windows.Point Point3_15 = new System.Windows.Point(600, 600);
System.Windows.Point Point3_16 = new System.Windows.Point(500, 550);
System.Windows.Point Point3_17 = new System.Windows.Point(400, 650);
System.Windows.Point Point3_18 = new System.Windows.Point(300, 700);
System.Windows.Point Point3_19 = new System.Windows.Point(200, 600);
System.Windows.Point Point3_20 = new System.Windows.Point(100, 550);

PointCollection myPointCollection3 = Pol3.Points;

myPointCollection3.Add(Point3_1);
myPointCollection3.Add(Point3_2);
myPointCollection3.Add(Point3_3);
myPointCollection3.Add(Point3_4);
myPointCollection3.Add(Point3_5);
myPointCollection3.Add(Point3_6);
myPointCollection3.Add(Point3_7);
myPointCollection3.Add(Point3_8);
myPointCollection3.Add(Point3_9);
myPointCollection3.Add(Point3_10);
myPointCollection3.Add(Point3_11);
myPointCollection3.Add(Point3_12);
myPointCollection3.Add(Point3_13);
myPointCollection3.Add(Point3_14);
myPointCollection3.Add(Point3_15);
myPointCollection3.Add(Point3_16);
myPointCollection3.Add(Point3_17);
myPointCollection3.Add(Point3_18);
myPointCollection3.Add(Point3_19);
myPointCollection3.Add(Point3_20);
}

}

}
}

And XAML:

<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0, 35,0,0" >
<Canvas x:Name="mainCanvas" Background="Transparent" Height="670" Width="920"
VerticalAlignment="Top" Margin="0,0,0,200">
<Canvas.LayoutTransform>
<ScaleTransform ScaleX="{Binding Path=Value, ElementName=zoomSlider}"
ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/>
</Canvas.LayoutTransform>

<Slider Orientation="Horizontal" AutoToolTipPlacement="TopLeft" Canvas.Bottom="0"
IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"
TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" />
</Canvas>
</Grid>

Sorry for the delay, I was away...
OK, I have your code working.
You didn't supply the SomePattern jpgs, so I've created 3 10x10 images: red, green and blue rectangles

What now?

ASKER

Hello Saragani,
Great help with you advise to use List<> instead of Array! Here is how I implement adding new coordinates in the middle of my Llist:

private Polygon Pol1;
// initial Pointsof line1 and line2
List<Point> arrPointsLine1 = new List<Point>(){ new Point(100, 100), new Point(100, 150) };

// add two newPoints in the middle of the List

                arrPointsLine1.Insert(1, new Point(200, 150));
                arrPointsLine1.Insert(2, new Point(200, 200)); 

                 for (int i = 0; i < arrPointsLine1.Count; i++)
                {
                       // create Polygon from 4 Points
                        Pol1.Points.Add(arrPointsLine1[i]);
                }
          
                mainCanvas.Children.Add(Pol1);

Open in new window

Now, it's easy with 4 Points. Moving slider in my app user adds more and more Points and creates new Polygons. Each snap on a slider adds 2 points to the List. They have to be in the middle of the list (and reversed like 1, 2, 7, 6, 4, 5). What would be the best approach to do this?

ASKER

These are coordinates of the top 2 lines in the app I posted. They create blue polygons between them:

Top Line = { 100,100 200,150 300,250 400,200 500,100 600,150 700,250 800,200 900,250 1000,300 };

Lower Line = { 100,150 200,200 300,300 400,250 500,150 600,200 700,300 800,250 900,300 1000,350};

I guess this can be presented as 2 Lists.

Use Insert for adding points in the middle.

Yes.. You can have 2 lists.
You can also have an ObservableCollection and have an ItemsControl bound to that collection.
(And use DataTemplate to define how the UI will look like)

ASKER

My target is always 2 items in the middle of the List. Do I always need to count items in the List and divide them by 2 to get the center items? Or there is a better way to do it with List?

This is the only way I can think of...
I don't see any wrong with getting the center by for example arrPointsLine1.Count / 2;

ASKER

ObservableCollection, ItemsControl and DataTemplate are all new to me :) Could you post some example how to architect my app by using them?

ObservableCollection is like a List, but it implements INotifyPropertyChange and INotifyCollectionChanged
So if something is bound to it, it will update the UI if items are added or removed.

I'll write some examples for you, so wait a little...

https://rapidshare.com/files/116661325/WpfExample1.rar

It shows a little example about Data Template, MVVM, Observable Collection, Items Control, Commands.

If you put a comment on the following lines in my XAML then you will see how DataTemplate affects:
<DataTemplate DataType="{x:Type local:PersonViewModel}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}" Margin="0 0 5 0" />
<TextBlock Text="{Binding LastName}" Margin="0 0 5 0" />
<TextBlock Text=", Age: " />
<TextBlock Text="{Binding Age}" />
</StackPanel>
</DataTemplate>

(When it is removed, the UI will show the "ToString" of the object)

I'm going to bed now. I'll write you another example tomorrow.

ASKER

Thank you very much saragani! You are very helpful!!! I definitly want you to get a credit for your help. Should I mark your answer as solution now or wait for tomorrow? I am very new to this website and afraid to mess something up :)))

Just wait until I give you are satisfied from my solution.

I'm still not sure what is the purpose of your project and how you want to get the points of the polygon.
We'll continue with it tomorrow :-)

Hi, I forgot to mention that in the example I already gave you, you can add up to 10 persons.
You can see that there is no Code Behind... (almost, I have the this.DataContext = new MainViewModel() , but I can also write it in XAML I can do it without any code behind).

Code Behind means code that is written in the CS file of the UI.
All my code works with Binding and commands.

You can see that the AddPersonCommand uses a DelegateCommand and I supplied it a function called canAddPerson.
The Constructor of the DelegateCommand can also accept 1 argument (the function to run.... and in this case the "Can Execute" will be always true).
By giving it a "Can Execute" function, I can disable buttons from the ViewModel... Again no more need for code behind... I don't need to do Button1.Enabled = false;

Now here is my second example (I used the same solution, so it is still called example1):
https://rapidshare.com/files/1973325456/WpfExample1.rar
http://www.megaupload.com/?d=QNIMRK1N

In this example I use Behaviors. I use a pre-made behaviors given to me by Blend.
You would see that I have 2 new references to System.Windows.Interactivity and Microsoft.Expression.Interaction

This way I can pass other events (not just click which is the only thing command supports) to the ViewModel.

If you click with your Left mouse button on the area of the application window, it will add an 10x10 circle at the location you clicked.
If you add more Points/Circles, it will connect then with lines
(You can create your own PolyGon :-) )

I'm sure that this is not the purpose of your original project, but it is a good example on how to do things.

I'll post the full code as well (paste it here) so other people can see it after the rapidshare links will die.

LineViewModel:

    public class LineViewModel : ViewModelBase
    {
        private Point _startPoint;
        private Point _endPoint;

        public Point StartPoint
        {
            get
            {
                return _startPoint;
            }
            set
            {
                _startPoint = value;
                OnPropertyChanged("StartPoint");
            }
        }

        public Point EndPoint
        {
            get
            {
                return _endPoint;
            }
            set
            {
                _endPoint = value;
                OnPropertyChanged("EndPoint");
            }
        }
    }

Open in new window

MainViewModel:

        private ObservableCollection<Point> _points = new ObservableCollection<Point>();
        private ObservableCollection<LineViewModel> _lines = new ObservableCollection<LineViewModel>();

        public ObservableCollection<Point> Points
        {
            get
            {
                return _points;
            }
        }

        public ObservableCollection<LineViewModel> Lines
        {
            get
            {
                return _lines;
            }
        }

        public void MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point p = Mouse.GetPosition(sender as IInputElement);
            _points.Add(p);
            if (_points.Count > 1)
            {
                LineViewModel line = new LineViewModel();
                line.StartPoint = _points[_points.Count - 2];
                line.EndPoint = _points[_points.Count - 1];
                _lines.Add(line);
            }

        }
    }

Open in new window

MainWindow.cs:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainViewModel();  // We can also do it in XAML
        }
    }

Open in new window

MainWindow XAML:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfExample1"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="WpfExample1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.Resources>

        <Style x:Key="PointContainerStyle" TargetType="{x:Type ContentPresenter}">
            <Setter Property="Canvas.Left" Value="{Binding X}" />
            <Setter Property="Canvas.Top" Value="{Binding Y}" />
        </Style>

        <DataTemplate DataType="{x:Type Point}">
            <Ellipse Width="10" Height="10" Fill="LightBlue" Stroke="Black" Margin="-5 -5 0 0"/>
        </DataTemplate>

        <DataTemplate DataType="{x:Type local:LineViewModel}">
            <Line X1="{Binding StartPoint.X}" Y1="{Binding StartPoint.Y}" X2="{Binding EndPoint.X}" Y2="{Binding EndPoint.Y}" Stroke="Black" StrokeThickness="2" />
        </DataTemplate>
    </Window.Resources>
    
    <Grid>
        <ItemsControl ItemsSource="{Binding Lines}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
        
        <ItemsControl ItemsSource="{Binding Points}" ItemContainerStyle="{StaticResource PointContainerStyle}" Background="Transparent">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        	<i:Interaction.Triggers>
        		<i:EventTrigger EventName="MouseLeftButtonDown">
        			<ei:CallMethodAction TargetObject="{Binding}" MethodName="MouseLeftButtonDown"/>
        		</i:EventTrigger>
        	</i:Interaction.Triggers>
        </ItemsControl>
    </Grid>
</Window>

Open in new window

ASKER

Hi Saragania! Great examples and help! Thank you very much! :)))
Now I am trying to understand how I can apply it to my app :\ :)))
You asked me about its purpose. OK, these Points are coordinates of the lithographical chart. Let’s say they will come from SQL Server DB (for now I play with List<> scenario). So, each chart consists from several curvy lines one above another and so on. Areas between these lines are Polygons. It looks like colors of the rainbow, same way like in sample app I sent you.
My app will draw these Polygons dynamically according to the slider position. If slider is 100% to the right user sees all chart. If slider is 50% of its way half of the chart is displayed and so on. I am not sure exactly why user wants this feature. It is possible that requirements will change after I actually understand what do they want :))) For now I just want to be able to create this chart and outline all polygons created by 4 Points between 2 lines next to each other. As I understand these Polygons is a primary interest. Their size and volume represent data important to the user.
Here is another question to you if you don’t mind ¿ How can I correlate Canvas coordinates with Slider position? Let’s say my slider moved to Tick position #1. This represents first left 10% of the Canvas. I want to draw all Points that are in this section of the Canvas. If I move to 20% than display shows all the points in 20% area of the Canvas. And so on. Any suggestions? :)))
________CANVAS_____________
…….. |       | | |
…… |       | |        |
… … |       | | |
………|       | |        |
………|       | |        |
| | | |
10% 20% 30% 40%
SLIDER --------------------------------------

But the window size (and the canvas size) changes when you resize the window...

ASKER

That's true. But percentage wise it all stays proportional. Right?

ASKER

If my first Polygon consists from 4 dots like: 100,100 200,150 200,200 100,150
And all the points are in first 10% of the Canvas. Then if I resize my window they are still in this first 10% of the window.

if 200,200 is within the 10% of the canvas, then it means that your canvas width is at least 2000px.

You can check the ActualWidth of the Canvas and then go 10% of it in order to load the fitting dots.

ASKER

So, if my canvas is 1000 px width then 10% = 100 px. Then I check Point1 X coordinate. If X <= 100 then draw this point. Hmm… I am just thinking about performance in case I get 1000 points to check for several lines.

You can check it with Linq

ASKER

I am not familiar with Linq. Would you be so kind to post some simple example? :)))

Assuming you have a list of points called myList, and assuming that it contains Point elements with properties X and Y, then you can do:

var result = (from val in myList
where val.X <= 100
select val).ToList();

Your result will be a List that contains the matching points.

If you don't add the ToList at the end then the expression will be evaluated as soon as you try to iterate it etc...

ASKER

OK, I am checking listPointsLine1:
List<Point> listPointsLine1 = new List<Point>(new Point[] { new Point(100,100) , new Point(200,150) , new Point(300,250), new Point( 400,200), new Point( 500,100), new Point( 600,150), new Point( 700,250), new Point( 800,200), new Point( 900,250), new Point( 1000,300) });

var result = (from val in listPointsLine1
where val.X <= 100
select val).ToList();

result = [0] {100,100} <--- That's cool! I have my List item position [0] and both X,Y coordinates!

How to fire up Window.SizeChangedEvent?

In your window code behind you can do after InitializeComponents():

this.SizeChanged += new SizeChangedEventHandler(MainWindow_SizeChanged);

and have the following function:

void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
// Your code here
}

ASKER

void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
lblWinSize.Content = mainCanvas.ActualWidth.ToString();
}

It's always shows me initial size which is 700px. How to refresh it and show new size after I resize window?

ASKER

Sorry, dumb question :)))

void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
lblWinSize.Content = e.NewSize.ToString();
}

ASKER

Man, I really appreciate your help!!! You are REAL GURU! :)))
If I click on 'Accept As Solution' now will it stop this post? Or I still will be able to ask you questions here?

No, you are right....

Your XAML has:

<Canvas x:Name="mainCanvas" Background="Transparent" Height="670" Width="920"
VerticalAlignment="Top" Margin="0,0,0,200">

Fixed sizes in XAML is bad practice unless you really need it on some cases.
Your canvas size never changes.

If you remove the size, it will fit it to Window.

You will still be able to ask questions, and you will also be able to open new ones.

ASKER

I am playing with another window with this XAML:

<Window x:Class="SliderScaleCanvas.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="CanResize"
Title="MainWindow" Height="600" Width="700" VerticalAlignment="Top">

Inspite of Width property is fixed I am able to read changes when I resize using:

lblWinSize.Content = e.NewSize.Width.ToString();

You are getting the Width of the Window.
On lots of cases, the width of the Window is not equal to the Width of the Canvas.

Your Canvas width if fixed, which means when you reduce the window's size, the canvas gets out of the window's area.

Hi, you forgot the points :-)

ASKER

Soory, but it did not ask me to enter any points, just grade A, B or C :\ I have marked this question 500 points when I opened this post. Can I add points now?

ASKER

I forgot to enetr enter points for this answer.

You chose your own comment as the solution, so it closed the subject and requested the "moderators" to refund your points.

I don't know if you can see an "Object" button, but if not then tell me and I'll object instead.

ASKER

OK, I objected this question. So, now where I enter points? In comments?

Just accept one of my comments as the solution :-)

ASKER

That's what I did last time. Then popup window ask me to grade your answer, but there is no points to enter there, only comments and chices A, B or C. Ok, I am doing this again :)))

Thank you :-)

If you have more questions then you know where to find me.
I also added you as a person I follow. I hope that it will make me get notifications on any comment or question you make.

ASKER

My pleasure! :)))

I want to make my Canvas size relative to Window size. So it resizes together with Window. Can I use binding? Something like this:

<Canvas x:Name="mainCanvas" Width="{Binding ElementName=Window.Width}" Height=... >

ASKER

I found this exaple:

<Window x:Name="MainWin"> <Canvas Width="{Binding ElementName=MainWin, Path=ActualWidth}" Height="{Binding ElementName=MainWin, Path=ActualHeight}">
</Canvas> </Window>

But I want my Canvas smaller then Window. Surrounded by margins. I guess I need to bind it to some custom function. How to do this?

If you remove the Width and Height of the Canvas from the XAML then you will get a size that changes by the size of it's container (which is the Grid, and the size of the Grid changes by the size of the Window)

ASKER

I am trying:

this.mainCanvas.SizeChanged += new SizeChangedEventHandler(mainCanvas_SizeChanged);

No result. What is wrong here?

ASKER

Also, after I removed Width and Height all my layout got messed up:

<Window x:Class="SliderScaleCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="CanResize"
        Title="MainWindow" Height="600" Width="700" VerticalAlignment="Top" HorizontalAlignment="Left">

    <Window.Resources>
        <VisualBrush     x:Key="DotFillBrush"     TileMode="Tile"     Viewport="0,0,10,10"     ViewportUnits="Absolute"     Viewbox="0,0,12,12"    ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Ellipse         Fill="#00C0FF"         Width="10" Height="10" />
            </VisualBrush.Visual>
        </VisualBrush>
        <VisualBrush       x:Key="HatchBrush"       TileMode="Tile" Viewport="0,0,10,10"       ViewportUnits="Absolute" Viewbox="0,0,10,10"          ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Fill="Azure" Width="10" Height="10" />
                    <Path Stroke="Purple" Data="M 0 0 l 10 10" />
                    <Path Stroke="Purple" Data="M 0 10 l 10 -10" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>

    <Grid Name="MainGrid" Background="lightyellow" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>

        <Canvas x:Name="mainCanvas" Background="Transparent" Grid.Row="0" VerticalAlignment="Top">

                <Canvas.LayoutTransform>
                <ScaleTransform ScaleX="{Binding Path=Value, ElementName=zoomSlider}" 
                            ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/>
            </Canvas.LayoutTransform>
            <Border BorderBrush="Black" BorderThickness="2" CornerRadius="15" Width="650" Height="300">
                
            </Border>
            <!-- Begin Main Content -->

            <Label Content="Window Width:" Height="28" Name="label1" />
            <Label Content="" Height="28" Name="lblWinSize" Canvas.Left="90" Width="50" />
            <Label Content="px" Height="28" Name="lblPixels" Canvas.Left="115" Width="25" />

            <!-- End Main Content -->

            <Slider Orientation="Horizontal" AutoToolTipPlacement="TopLeft" Canvas.Bottom="0"
                 IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"  
                 TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" />
            
            <StackPanel x:Name="LayoutRoot" Background="Gray" Canvas.Bottom="0" Canvas.Left="420">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Margin="5,5,10,5">Slider</TextBlock>
                    <TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}"/>
                    <TextBlock Margin="0,5">%</TextBlock>
                </StackPanel>
            </StackPanel>          
        </Canvas>        

    </Grid>
</Window>

CS: -------------------------------------------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Research.DynamicDataDisplay;

namespace SliderScaleCanvas
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        private Polygon Pol1;
        ImageBrush Pol1PatternBrush = new ImageBrush();

        List<Point> listPointsLine1 = new List<Point>(new Point[] { new Point(100,100) , new Point(200,150) , new Point(300,250), new Point( 400,200), new Point( 500,100), new Point( 600,150), new Point( 700,250), new Point( 800,200), new Point( 900,250), new Point( 1000,300) });
        List<Point> listPointsLine2 = new List<Point>(new Point[] { new Point( 100,150), new Point( 200,200), new Point( 300,300), new Point( 400,250), new Point( 500,150), new Point( 600,200), new Point( 700,300), new Point( 800,250), new Point( 900,300), new Point( 1000,350)});
                
        public MainWindow()
        {
            InitializeComponent();

            this.SizeChanged += new SizeChangedEventHandler(MainWindow_SizeChanged);
            this.mainCanvas.SizeChanged += new SizeChangedEventHandler(Canvas_SizeChanged);
                          
            Pol1 = new Polygon();
            Pol1PatternBrush.TileMode = TileMode.Tile;
            Pol1PatternBrush.Stretch = Stretch.None;
            Pol1PatternBrush.Viewport = new System.Windows.Rect(0, 0, 118, 36);
            Pol1PatternBrush.ViewportUnits = System.Windows.Media.BrushMappingMode.Absolute;
            Pol1PatternBrush.ImageSource = new BitmapImage(new Uri(@"Images\GasPattern.jpg", UriKind.Relative));
            Pol1.Fill = Pol1PatternBrush;

            Pol1.Points = new PointCollection();

            //mainCanvas.Children.Add(Pol1);
            Pol1.Fill = Pol1PatternBrush;
            mainCanvas.Children.Add(Pol1);
 
        }

        void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
           //lblWinSize.Content = e.NewSize.Width.ToString();   
        }

        void Canvas_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            lblWinSize.Content = e.NewSize.Width.ToString();   
        }

        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            double value = e.NewValue;
           
            Pol1.Points.Clear();

            if (value == 0)
            {

            }

            if (value == 1)
            {
                // Test isert 2 new items in the middle of the List<Pooint>
                //listPointsLine1.Insert(1, new Point(200, 150));
                //listPointsLine1.Insert(2, new Point(200, 200)); 

                ////PointCollection myPointCollection1 = Pol1.Points;

                //// Test isert 2 new items in the middle of the List<Pooint>
                // for (int i = 0; i < listPointsLine1.Count; i++)
                //{
                //    ////myPointCollection1.Add(listPointsLine1[i]);
                //    Pol1.Points.Add(listPointsLine1[i]);
                //}
                //---------------------------------------------------------------

                // Draw inital polygon
                Pol1.Points.Add(listPointsLine1[0]);
                Pol1.Points.Add(listPointsLine1[1]);
                Pol1.Points.Add(listPointsLine2[1]);
                Pol1.Points.Add(listPointsLine2[0]);


                var result = (from val in listPointsLine1
                              where val.X <= 200
                              select val).ToList();

                Pol1.Points.Count.ToString();
                
             }
        }


    }    
}

Open in new window

1st, you don't have an element called zoomSlider, but you still have binding to it.... so I removed it.

Try the following XAML:

<Window x:Class="SliderScaleCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="CanResize"
        Title="MainWindow" Height="600" Width="700" VerticalAlignment="Top" HorizontalAlignment="Left">

    <Window.Resources>
        <VisualBrush x:Key="DotFillBrush"     TileMode="Tile"     Viewport="0,0,10,10"     ViewportUnits="Absolute"     Viewbox="0,0,12,12"    ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Ellipse         Fill="#00C0FF"         Width="10" Height="10" />
            </VisualBrush.Visual>
        </VisualBrush>
        <VisualBrush       x:Key="HatchBrush"       TileMode="Tile" Viewport="0,0,10,10"       ViewportUnits="Absolute" Viewbox="0,0,10,10"          ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Fill="Azure" Width="10" Height="10" />
                    <Path Stroke="Purple" Data="M 0 0 l 10 10" />
                    <Path Stroke="Purple" Data="M 0 10 l 10 -10" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>

    <Grid Name="MainGrid" Background="lightyellow" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Canvas x:Name="mainCanvas" Background="Transparent" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" SizeChanged="mainCanvas_SizeChanged">

            <Border BorderBrush="Black" BorderThickness="2" CornerRadius="15" Width="650" Height="300">

            </Border>
            <!-- Begin Main Content -->

            <Label Content="Window Width:" Height="28" Name="label1" />
            <Label Content="" Height="28" Name="lblWinSize" Canvas.Left="90" Width="50" />
            <Label Content="px" Height="28" Name="lblPixels" Canvas.Left="115" Width="25" />

            <!-- End Main Content -->
        </Canvas>

        <Slider Orientation="Horizontal"  Grid.Row="1" Grid.Column="0" AutoToolTipPlacement="TopLeft" Canvas.Bottom="0"
                 IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"  
                 TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" />

        <StackPanel x:Name="LayoutRoot" Grid.Row="1" Grid.Column="1" Background="Gray" Canvas.Bottom="0" Canvas.Left="420">
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="5,5,10,5">Slider</TextBlock>
                <TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}"/>
                <TextBlock Margin="0,5">%</TextBlock>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

Open in new window

ASKER

So, what would be correct syntax for doing this:

this.mainCanvas.SizeChanged += new SizeChangedEventHandler(mainCanvas_SizeChanged);

void mainCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
lblWinSize.Content = e.NewSize.Width.ToString();
}

???

Hi Vpry, the xaml I gave you should work.
And the call for the event handler is done now by xaml, so you don't need to do it by code

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Sorry, I closed it again. Did you get your points?
Regarding your last comment: I want to display Canvas width on label if Window resized. So, can I use something like this:

this.mainCanvas.SizeChanged += new SizeChangedEventHandler(mainCanvas_SizeChanged);

void mainCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
lblWinSize.Content = e.NewSize.Width.ToString();
}

I got it now.

And yes, you can do it with the code you wrote... You can also remove the line this.mainCanvas.SizeChanged += new SizeChangedEventHandler(mainCanvas_SizeChanged); since the XAML I gave you contains:
<Canvas x:Name="mainCanvas" Background="Transparent" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" SizeChanged="mainCanvas_SizeChanged">

ASKER

I want my Canvas be 20 px smaller then Window and always centered on window load. Also I want to have a border around Canvas. I am getting exception doing this:

mainCanvas.Width = Convert.ToInt32(MainWindow.ActualWidthProperty.ToString()) - 20;
mainCanvas.Height = Convert.ToInt32(MainWindow.ActualHeightProperty.ToString()) - 20;

What's wrong?

ASKER

Nevermind, I think I got it:

void mainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
mainCanvas.Width = Convert.ToInt32(e.NewSize.Width) - 20;
mainCanvas.Height = Convert.ToInt32(e.NewSize.Height) - 20;
lblCanvasSize.Content = mainCanvas.Width + "," + mainCanvas.Height;
}

I was placing this under InitializeComponent(); Is this OK or you have a better idea?

Do it in XAML, For example:

<Window x:Class="SliderScaleCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="CanResize"
        Title="MainWindow" Height="600" Width="700" VerticalAlignment="Top" HorizontalAlignment="Left">

    <Window.Resources>
        <VisualBrush x:Key="DotFillBrush"     TileMode="Tile"     Viewport="0,0,10,10"     ViewportUnits="Absolute"     Viewbox="0,0,12,12"    ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Ellipse         Fill="#00C0FF"         Width="10" Height="10" />
            </VisualBrush.Visual>
        </VisualBrush>
        <VisualBrush       x:Key="HatchBrush"       TileMode="Tile" Viewport="0,0,10,10"       ViewportUnits="Absolute" Viewbox="0,0,10,10"          ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Fill="Azure" Width="10" Height="10" />
                    <Path Stroke="Purple" Data="M 0 0 l 10 10" />
                    <Path Stroke="Purple" Data="M 0 10 l 10 -10" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>

    <Grid Name="MainGrid" Background="lightyellow" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Canvas x:Name="mainCanvas" Background="Transparent" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" SizeChanged="mainCanvas_SizeChanged" Margin="10">

            <Border BorderBrush="Black" BorderThickness="2" CornerRadius="15" Width="650" Height="300">

            </Border>
            <!-- Begin Main Content -->

            <Label Content="Window Width:" Height="28" Name="label1" />
            <Label Content="" Height="28" Name="lblWinSize" Canvas.Left="90" Width="50" />
            <Label Content="px" Height="28" Name="lblPixels" Canvas.Left="115" Width="25" />

            <!-- End Main Content -->
        </Canvas>

        <Slider Orientation="Horizontal"  Grid.Row="1" Grid.Column="0" AutoToolTipPlacement="TopLeft" Canvas.Bottom="0"
                 IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"  
                 TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" />

        <StackPanel x:Name="LayoutRoot" Grid.Row="1" Grid.Column="1" Background="Gray" Canvas.Bottom="0" Canvas.Left="420">
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="5,5,10,5">Slider</TextBlock>
                <TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}"/>
                <TextBlock Margin="0,5">%</TextBlock>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

Open in new window

However,since you also have a slider which takes space from the window height (Since I placed it in a different Row), then the hight of the Canvas will be Window.Height - Slider.Height - 20

Your idea will also work, bug i don't know what XAML you are using.
In my XAML the slider sits on a seperate row.

ASKER

Now with this XAML my mainWindow_SizeChanged function called several times keep subtracting 40. And after width becomes negative it throws an exception:

void mainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
mainCanvas.Width = Convert.ToInt32(e.NewSize.Width) - 40;
mainCanvas.Height = Convert.ToInt32(e.NewSize.Height) - 40;
lblCanvasSize.Content = mainCanvas.Width + "," + mainCanvas.Height;
}

Here is my latest XAML and code behind:

<Window x:Class="SliderScaleCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="CanResize"
        Title="MainWindow" Height="600" Width="700" VerticalAlignment="Top" HorizontalAlignment="Left">

    <Window.Resources>
        <VisualBrush x:Key="DotFillBrush"     TileMode="Tile"     Viewport="0,0,10,10"     ViewportUnits="Absolute"     Viewbox="0,0,12,12"    ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Ellipse         Fill="#00C0FF"         Width="10" Height="10" />
            </VisualBrush.Visual>
        </VisualBrush>
        <VisualBrush       x:Key="HatchBrush"       TileMode="Tile" Viewport="0,0,10,10"       ViewportUnits="Absolute" Viewbox="0,0,10,10"          ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Fill="Azure" Width="10" Height="10" />
                    <Path Stroke="Purple" Data="M 0 0 l 10 10" />
                    <Path Stroke="Purple" Data="M 0 10 l 10 -10" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>

    <Grid Name="MainGrid" Background="lightyellow" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Canvas x:Name="mainCanvas" Background="Transparent" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" SizeChanged="mainWindow_SizeChanged" Margin="10">

            <Border BorderBrush="Black" BorderThickness="2" CornerRadius="15" Width="650" Height="300">

            </Border>
            <!-- Begin Main Content -->

            <Label Content="Canvas Size:" Height="28" Name="label1" />
            <Label Content="" Height="28" Name="lblCanvasSize" Canvas.Left="90" Width="50" />
            <Label Content="px" Height="28" Name="lblPixels" Canvas.Left="115" Width="25" />

            <!-- End Main Content -->
        </Canvas>

        <Slider Orientation="Horizontal"  Grid.Row="1" Grid.Column="0" AutoToolTipPlacement="TopLeft" Canvas.Bottom="0"
                 IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"  
                 TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" />

        <StackPanel x:Name="LayoutRoot" Grid.Row="1" Grid.Column="1" Background="Gray" Canvas.Bottom="0" Canvas.Left="420">
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="5,5,10,5">Slider</TextBlock>
                <TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}"/>
                <TextBlock Margin="0,5">%</TextBlock>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>
 
CS ------------------------------------------------------------------------------------------------------------------------------------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Research.DynamicDataDisplay;

namespace SliderScaleCanvas
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        private Polygon Pol1;
        ImageBrush Pol1PatternBrush = new ImageBrush();

        List<Point> listPointsLine1 = new List<Point>(new Point[] { new Point(100,100) , new Point(200,150) , new Point(300,250), new Point( 400,200), new Point( 500,100), new Point( 600,150), new Point( 700,250), new Point( 800,200), new Point( 900,250), new Point( 1000,300) });
        List<Point> listPointsLine2 = new List<Point>(new Point[] { new Point( 100,150), new Point( 200,200), new Point( 300,300), new Point( 400,250), new Point( 500,150), new Point( 600,200), new Point( 700,300), new Point( 800,250), new Point( 900,300), new Point( 1000,350)});
                
        public MainWindow()
        {
            InitializeComponent();

            //mainCanvas.Width = Convert.ToInt32(MainWindow.ActualWidthProperty.ToString()) - 20;
            //mainCanvas.Height = Convert.ToInt32(MainWindow.ActualHeightProperty.ToString()) - 20;

            //////this.SizeChanged += new SizeChangedEventHandler(MainWindow_SizeChanged);
            //////this.mainCanvas.SizeChanged += new SizeChangedEventHandler(mainCanvas_SizeChanged);
                         
            Pol1 = new Polygon();
            Pol1PatternBrush.TileMode = TileMode.Tile;
            Pol1PatternBrush.Stretch = Stretch.None;
            Pol1PatternBrush.Viewport = new System.Windows.Rect(0, 0, 118, 36);
            Pol1PatternBrush.ViewportUnits = System.Windows.Media.BrushMappingMode.Absolute;
            Pol1PatternBrush.ImageSource = new BitmapImage(new Uri(@"Images\GasPattern.jpg", UriKind.Relative));
            Pol1.Fill = Pol1PatternBrush;

            Pol1.Points = new PointCollection();

            //mainCanvas.Children.Add(Pol1);
            Pol1.Fill = Pol1PatternBrush;
            mainCanvas.Children.Add(Pol1);

 
        }

        void mainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            mainCanvas.Width = Convert.ToInt32(e.NewSize.Width) - 40;
            mainCanvas.Height = Convert.ToInt32(e.NewSize.Height) - 40;          
            lblCanvasSize.Content = mainCanvas.Width + "," + mainCanvas.Height; 
        }

   




        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            double value = e.NewValue;
           
            Pol1.Points.Clear();

            if (value == 0)
            {

            }

            if (value == 1)
            {
                // Test isert 2 new items in the middle of the List<Pooint>
                //listPointsLine1.Insert(1, new Point(200, 150));
                //listPointsLine1.Insert(2, new Point(200, 200)); 

                ////PointCollection myPointCollection1 = Pol1.Points;

                //// Test isert 2 new items in the middle of the List<Pooint>
                // for (int i = 0; i < listPointsLine1.Count; i++)
                //{
                //    ////myPointCollection1.Add(listPointsLine1[i]);
                //    Pol1.Points.Add(listPointsLine1[i]);
                //}
                //---------------------------------------------------------------

                // Draw inital polygon
                Pol1.Points.Add(listPointsLine1[0]);
                Pol1.Points.Add(listPointsLine1[1]);
                Pol1.Points.Add(listPointsLine2[1]);
                Pol1.Points.Add(listPointsLine2[0]);


                var result = (from val in listPointsLine1
                              where val.X <= 200
                              select val).ToList();




                Pol1.Points.Count.ToString();
                
             }
        }



        private void btnOpenWindow_Click(object sender, RoutedEventArgs e)
        {
            // Open UniformGrid window
            NewWindow newWin = new NewWindow();
            newWin.Show();
        }
    }    
}

Open in new window

Hi, please note that your original event was looking at the size of the window which is getting changed.

In the XAML I have yo, I called mainCanvas_SizeChanged
You call mainWindow_SizeChanged

What happens is that you reduce the size of the Canvas by code, which fires the Canvas size changed event again which changes the size of the canvas which cases the event to be fired again and so on...

If you wouldn't get the exception of size < 0, then you will get a StackOverFlowException.

So since you have Margin="10" then you don't need to do anything by code...
but if you do.. then remove the SizeChanged="mainWindow_SizeChanged" from the Canvas and move it to the Window.

ASKER

Got it! Thanks a lot! :)))

ASKER

Hi Saragani,
How to make Slider and stack panel stpSliderPosition float when I resize window? My display in stpSliderPosition stoped working for some reason :((( I want them always in the left bottom corner of the window below Canvas. I also want border around Canvas resize together with Canvas. Please take a look:

<Window x:Class="SliderScaleCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="CanResize" SizeChanged="mainWindow_SizeChanged"
        Title="MainWindow" Height="600" Width="700" VerticalAlignment="Top" HorizontalAlignment="Left">

    <Window.Resources>
        <VisualBrush x:Key="DotFillBrush"     TileMode="Tile"     Viewport="0,0,10,10"     ViewportUnits="Absolute"     Viewbox="0,0,12,12"    ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Ellipse         Fill="#00C0FF"         Width="10" Height="10" />
            </VisualBrush.Visual>
        </VisualBrush>
        <VisualBrush       x:Key="HatchBrush"       TileMode="Tile" Viewport="0,0,10,10"       ViewportUnits="Absolute" Viewbox="0,0,10,10"          ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Fill="Azure" Width="10" Height="10" />
                    <Path Stroke="Purple" Data="M 0 0 l 10 10" />
                    <Path Stroke="Purple" Data="M 0 10 l 10 -10" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>

        <Canvas x:Name="mainCanvas" Background="LightYellow" Margin="10">

            <Border BorderBrush="Black" BorderThickness="2" CornerRadius="15" Width="650" Height="300">

            </Border>
            <!-- Begin Main Content -->

            <Label Content="Canvas Size:" Height="28" Name="label1" />
            <Label Content="" Height="28" Name="lblWindowSize" Canvas.Left="70" Width="60" />
            <Label Content="px" Height="28" Name="lblPixels" Canvas.Left="120" Width="25" />
            <StackPanel x:Name="LayoutRoot" Background="LightGreen" Width="200" Canvas.Left="452" Canvas.Top="522">
                <StackPanel Name="stpSliderPosition" Orientation="Horizontal" Width="100">
                    <TextBlock Margin="5,5,10,5">Slider</TextBlock>
                    <TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}" />
                    <TextBlock Margin="0,5">%</TextBlock>
                </StackPanel>
            </StackPanel>
            <!-- End Main Content -->
        

        <Slider Orientation="Horizontal" AutoToolTipPlacement="TopLeft" Name="sldLider" VerticalAlignment="Bottom"
                 IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"  
                 TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" Margin="12,529,266,3" Grid.RowSpan="2" />
    </Canvas>
</Window> 
----------------------------------------------------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Research.DynamicDataDisplay;

namespace SliderScaleCanvas
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        private Polygon Pol1;
        ImageBrush Pol1PatternBrush = new ImageBrush();

        List<Point> listPointsLine1 = new List<Point>(new Point[] { new Point(100,100) , new Point(200,150) , new Point(300,250), new Point( 400,200), new Point( 500,100), new Point( 600,150), new Point( 700,250), new Point( 800,200), new Point( 900,250), new Point( 1000,300) });
        List<Point> listPointsLine2 = new List<Point>(new Point[] { new Point( 100,150), new Point( 200,200), new Point( 300,300), new Point( 400,250), new Point( 500,150), new Point( 600,200), new Point( 700,300), new Point( 800,250), new Point( 900,300), new Point( 1000,350)});
                
        public MainWindow()
        {
            InitializeComponent();

            //mainCanvas.Width = Convert.ToInt32(MainWindow.ActualWidthProperty.ToString()) - 20;
            //mainCanvas.Height = Convert.ToInt32(MainWindow.ActualHeightProperty.ToString()) - 20;

            //////this.SizeChanged += new SizeChangedEventHandler(MainWindow_SizeChanged);
            //////this.mainCanvas.SizeChanged += new SizeChangedEventHandler(mainCanvas_SizeChanged);
                         
            Pol1 = new Polygon();
            Pol1PatternBrush.TileMode = TileMode.Tile;
            Pol1PatternBrush.Stretch = Stretch.None;
            Pol1PatternBrush.Viewport = new System.Windows.Rect(0, 0, 118, 36);
            Pol1PatternBrush.ViewportUnits = System.Windows.Media.BrushMappingMode.Absolute;
            Pol1PatternBrush.ImageSource = new BitmapImage(new Uri(@"Images\GasPattern.jpg", UriKind.Relative));
            Pol1.Fill = Pol1PatternBrush;

            Pol1.Points = new PointCollection();

            //mainCanvas.Children.Add(Pol1);
            Pol1.Fill = Pol1PatternBrush;
            mainCanvas.Children.Add(Pol1);

 
        }

        void mainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
           lblWindowSize.Content = e.NewSize.ToString();
        }

   




        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            double value = e.NewValue;
           
            Pol1.Points.Clear();

            if (value == 0)
            {

            }

            if (value == 1)
            {
                // Test isert 2 new items in the middle of the List<Pooint>
                //listPointsLine1.Insert(1, new Point(200, 150));
                //listPointsLine1.Insert(2, new Point(200, 200)); 

                ////PointCollection myPointCollection1 = Pol1.Points;

                //// Test isert 2 new items in the middle of the List<Pooint>
                // for (int i = 0; i < listPointsLine1.Count; i++)
                //{
                //    ////myPointCollection1.Add(listPointsLine1[i]);
                //    Pol1.Points.Add(listPointsLine1[i]);
                //}
                //---------------------------------------------------------------

                // Draw inital polygon
                Pol1.Points.Add(listPointsLine1[0]);
                Pol1.Points.Add(listPointsLine1[1]);
                Pol1.Points.Add(listPointsLine2[1]);
                Pol1.Points.Add(listPointsLine2[0]);


                var result = (from val in listPointsLine1
                              where val.X <= 200
                              select val).ToList();




                Pol1.Points.Count.ToString();
                
             }
        }



        private void btnOpenWindow_Click(object sender, RoutedEventArgs e)
        {
            // Open UniformGrid window
            NewWindow newWin = new NewWindow();
            newWin.Show();
        }   
    }   
 }

Open in new window

ASKER

Why this binding is not working???

<Slider Orientation="Horizontal" AutoToolTipPlacement="TopLeft" Name="sldLider" VerticalAlignment="Bottom"
IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"
TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" Margin="12,529,266,3" Grid.RowSpan="2" />

<StackPanel x:Name="LayoutRoot" Background="LightGreen" Width="200" Canvas.Left="452" Canvas.Top="522">
<StackPanel Name="stpSliderPosition" Orientation="Horizontal" Width="100">
<TextBlock Margin="5,5,10,5">Slider</TextBlock>
<TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}" />
<TextBlock Margin="0,5">%</TextBlock>
</StackPanel>
</StackPanel>

If you were using the Grid as I've suggested, then you wouldn't have the problem with the no floating slider.

Which binding doesn't work?

ASKER

I thought that Grid is not required, but if you say I need it I will place it back. So, slider should be in the Grid or outside?

I want to display slider position in a textbox:

<TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}" />

But it shows nothing when I move slider.

The grid I made has 2 columns and 2 rows:

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

and the canvas has Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"

and the slider and stackpanel have:

<Slider Orientation="Horizontal" Grid.Row="1" Grid.Column="0" AutoToolTipPlacement="TopLeft" Canvas.Bottom="0"
IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"
TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" />

<StackPanel x:Name="LayoutRoot" Grid.Row="1" Grid.Column="1" Background="Gray" Canvas.Bottom="0" Canvas.Left="420">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5,5,10,5">Slider</TextBlock>
<TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}"/>
<TextBlock Margin="0,5">%</TextBlock>
</StackPanel>
</StackPanel>

And both slider and stackpanel should be outside of the Canvas... after it, but still inside the grid.

Can you upload your whole project to Megaupload or Rapidshare so I could check the binding problem?

Never mind, I'll try to figure it out from the code that you posted few posts back...

ASKER

Here is my current code with the Grid in XAML. Slider and stack panel still not float:

<Window x:Class="SliderScaleCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="CanResize" SizeChanged="mainWindow_SizeChanged"
        Title="MainWindow" Height="600" Width="700" VerticalAlignment="Top" HorizontalAlignment="Left">

    <Window.Resources>
        <VisualBrush x:Key="DotFillBrush"     TileMode="Tile"     Viewport="0,0,10,10"     ViewportUnits="Absolute"     Viewbox="0,0,12,12"    ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Ellipse         Fill="#00C0FF"         Width="10" Height="10" />
            </VisualBrush.Visual>
        </VisualBrush>
        <VisualBrush       x:Key="HatchBrush"       TileMode="Tile" Viewport="0,0,10,10"       ViewportUnits="Absolute" Viewbox="0,0,10,10"          ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Fill="Azure" Width="10" Height="10" />
                    <Path Stroke="Purple" Data="M 0 0 l 10 10" />
                    <Path Stroke="Purple" Data="M 0 10 l 10 -10" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>

    <Border BorderBrush="Black" BorderThickness="2" CornerRadius="15">
        
        <Grid Name="MainGrid" Background="lightyellow"  >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Canvas x:Name="mainCanvas" Background="LightYellow" Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
            
            <Label Content="Canvas Size:" Height="28" Name="label1" />
            <Label Content="" Height="28" Name="lblWindowSize" Canvas.Left="70" Width="60" />
            <Label Content="px" Height="28" Name="lblPixels" Canvas.Left="120" Width="25" />

        </Canvas>

        <StackPanel x:Name="LayoutRoot" Background="LightGreen" Width="200" Canvas.Left="452" Canvas.Top="522">
            <StackPanel Name="stpSliderPosition" Orientation="Horizontal" Width="100">
                <TextBlock Margin="5,5,10,5">Slider</TextBlock>
                <TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}" />
                <TextBlock Margin="0,5">%</TextBlock>
            </StackPanel>
        </StackPanel>
       
        <Slider Orientation="Horizontal" AutoToolTipPlacement="TopLeft" Name="sldLider" VerticalAlignment="Bottom" Grid.Row="1" Grid.Column="1"
                 IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"  
                 TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" Margin="12,529,266,3" Grid.RowSpan="2" />

    </Grid>
    </Border>

</Window> 
---------------------------------------------------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Research.DynamicDataDisplay;

namespace SliderScaleCanvas
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        private Polygon Pol1;
        ImageBrush Pol1PatternBrush = new ImageBrush();

        List<Point> listPointsLine1 = new List<Point>(new Point[] { new Point(100,100) , new Point(200,150) , new Point(300,250), new Point( 400,200), new Point( 500,100), new Point( 600,150), new Point( 700,250), new Point( 800,200), new Point( 900,250), new Point( 1000,300) });
        List<Point> listPointsLine2 = new List<Point>(new Point[] { new Point( 100,150), new Point( 200,200), new Point( 300,300), new Point( 400,250), new Point( 500,150), new Point( 600,200), new Point( 700,300), new Point( 800,250), new Point( 900,300), new Point( 1000,350)});
                
        public MainWindow()
        {
            InitializeComponent();

            //mainCanvas.Width = Convert.ToInt32(MainWindow.ActualWidthProperty.ToString()) - 20;
            //mainCanvas.Height = Convert.ToInt32(MainWindow.ActualHeightProperty.ToString()) - 20;

            //////this.SizeChanged += new SizeChangedEventHandler(MainWindow_SizeChanged);
            //////this.mainCanvas.SizeChanged += new SizeChangedEventHandler(mainCanvas_SizeChanged);
                         
            Pol1 = new Polygon();
            Pol1PatternBrush.TileMode = TileMode.Tile;
            Pol1PatternBrush.Stretch = Stretch.None;
            Pol1PatternBrush.Viewport = new System.Windows.Rect(0, 0, 118, 36);
            Pol1PatternBrush.ViewportUnits = System.Windows.Media.BrushMappingMode.Absolute;
            Pol1PatternBrush.ImageSource = new BitmapImage(new Uri(@"Images\GasPattern.jpg", UriKind.Relative));
            Pol1.Fill = Pol1PatternBrush;

            Pol1.Points = new PointCollection();

            //mainCanvas.Children.Add(Pol1);
            Pol1.Fill = Pol1PatternBrush;
            mainCanvas.Children.Add(Pol1);

 
        }

        void mainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
           lblWindowSize.Content = e.NewSize.ToString();
        }

   




        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            double value = e.NewValue;
           
            Pol1.Points.Clear();

            if (value == 0)
            {

            }

            if (value == 1)
            {
                // Test isert 2 new items in the middle of the List<Pooint>
                //listPointsLine1.Insert(1, new Point(200, 150));
                //listPointsLine1.Insert(2, new Point(200, 200)); 

                ////PointCollection myPointCollection1 = Pol1.Points;

                //// Test isert 2 new items in the middle of the List<Pooint>
                // for (int i = 0; i < listPointsLine1.Count; i++)
                //{
                //    ////myPointCollection1.Add(listPointsLine1[i]);
                //    Pol1.Points.Add(listPointsLine1[i]);
                //}
                //---------------------------------------------------------------

                // Draw inital polygon
                Pol1.Points.Add(listPointsLine1[0]);
                Pol1.Points.Add(listPointsLine1[1]);
                Pol1.Points.Add(listPointsLine2[1]);
                Pol1.Points.Add(listPointsLine2[0]);


                var result = (from val in listPointsLine1
                              where val.X <= 200
                              select val).ToList();




                Pol1.Points.Count.ToString();
                
             }
        }



        private void btnOpenWindow_Click(object sender, RoutedEventArgs e)
        {
            // Open UniformGrid window
            NewWindow newWin = new NewWindow();
            newWin.Show();
        }

   
    }

    
}

Open in new window

ASKER

OK, I got layout working. Slider and Stack Panel are in the left bottom and they float. Still can't bring binding to work:

<Window x:Class="SliderScaleCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="CanResize" SizeChanged="mainWindow_SizeChanged"
        Title="MainWindow" Height="600" Width="700" VerticalAlignment="Top" HorizontalAlignment="Left">

    <Window.Resources>
        <VisualBrush x:Key="DotFillBrush"     TileMode="Tile"     Viewport="0,0,10,10"     ViewportUnits="Absolute"     Viewbox="0,0,12,12"    ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Ellipse         Fill="#00C0FF"         Width="10" Height="10" />
            </VisualBrush.Visual>
        </VisualBrush>
        <VisualBrush       x:Key="HatchBrush"       TileMode="Tile" Viewport="0,0,10,10"       ViewportUnits="Absolute" Viewbox="0,0,10,10"          ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Fill="Azure" Width="10" Height="10" />
                    <Path Stroke="Purple" Data="M 0 0 l 10 10" />
                    <Path Stroke="Purple" Data="M 0 10 l 10 -10" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>

    <Border BorderBrush="Black" BorderThickness="2" CornerRadius="0" Padding="5">
        
        <Grid Name="MainGrid" Background="lightyellow"  >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Canvas x:Name="mainCanvas" Background="LightYellow" Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
            
            <Label Content="Canvas Size:" Height="28" Name="label1" />
            <Label Content="" Height="28" Name="lblWindowSize" Canvas.Left="70" Width="60" />
            <Label Content="px" Height="28" Name="lblPixels" Canvas.Left="120" Width="25" />

        </Canvas>

            <Slider Orientation="Horizontal" AutoToolTipPlacement="TopLeft" Name="sldLider" VerticalAlignment="Bottom" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
                 IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"  
                 TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" />
            
            <StackPanel x:Name="LayoutRoot" Background="LightGreen" Width="200" Grid.Row="1" Grid.Column="1">
            <StackPanel Name="stpSliderPosition" Orientation="Horizontal" Width="100">
                <TextBlock Margin="5,5,10,5">Slider</TextBlock>
                <TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}" />
                <TextBlock Margin="0,5">%</TextBlock>
            </StackPanel>
        </StackPanel> 
       

    </Grid>
    </Border>

</Window>

Open in new window

ASKER

Hey Saragani,
I want to move to the programming part of this app. I think you and me spent too much time on UI. It is enough for now. I will ask you later on UI if something I can not figure out.

I am going to open a new question so you can get points for helping me :)))

For the binding to work, you need to give the slider an xname not a name...

x:Name="sldSlider" and not Name="sldSlider"

ASKER

Nope, still not working:

<Slider Orientation="Horizontal" AutoToolTipPlacement="TopLeft" x:Name="sldLider" VerticalAlignment="Bottom" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
IsSnapToTickEnabled="True" Width="400" TickPlacement="BottomRight" Background="DimGray"
TickFrequency="1" Maximum="9" ValueChanged="Slider_ValueChanged" Height="29" />

<StackPanel x:Name="LayoutRoot" Background="LightGreen" Width="200" Grid.Row="1" Grid.Column="1">
<StackPanel Name="stpSliderPosition" Orientation="Horizontal" Width="100">
<TextBlock Margin="5,5,10,5">Slider</TextBlock>
<TextBlock Margin="5,5,0,5" TextAlignment="Left" Width="30" Text="{Binding Path=Value, ElementName=sldSlider, Mode=OneWay}" />
<TextBlock Margin="0,5">%</TextBlock>
</StackPanel>
</StackPanel>

Btw, I see that your XAML is kinda horrible (no offence...)

I have a great e-book for WPF for starters and it keep increasing the level on each chapter.
It is called teach yourself WPF in 24 hours.

If you want a copy, then post your email and I'll forward it to you. I just forwarded it to someone else on EE few days ago. I've learned alot from it (including how to work with Grid, panels etc).

ASKER

Oh, sorry! My bad! Wrong name :)))

Look carefully: ElementName=sldSlider agains: x:Name="sldLider"

ASKER

Great! Send it here: vadymgpr@yahoo.com. Thank you!

I see that you already figured it out. Btw, you can see in Visual Studio output window information about Binding errors. It can be very helpfull sometimes.

Sent...

ASKER

OK, I build my project with wrong name sldLidere instead of sldSlider. But I do not see binding errors. Here is info from Output window:

------ Build started: Project: SliderScaleCanvas, Configuration: Debug x86 ------
SliderScaleCanvas -> C:\Users\Owner\Documents\Visual Studio 2010\Projects\WPF\SliderScaleCanvas\SliderScaleCanvas\bin\Debug\SliderScaleCanvas.exe
========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========

Where should I look for binding errors?

While you run the project (Not while you compile) cause only then it can check the binding (cause binding can be made to any class and any property on your DataContext..., and your datacontext may change on runtime).

ASKER

Got it! Let's continue on my new post for programming design of this app. I give you 900 points! :)))

ASKER

I do not see WPF section. In which category it located?

https://www.experts-exchange.com/Microsoft/Development/Microsoft_Programming/WPF_and_aSilverlight/

Sorry, there is an a before the work Silverlight, the link should be:

https://www.experts-exchange.com/Microsoft/Development/Microsoft_Programming/WPF_and_Silverlight/

ASKER

Ok, I posted my Q. Apperently I can only give maximum of 500 points :)))

https://www.experts-exchange.com/questions/27044225/MVVM-design-pattern-in-WPF-C.html