I'm working with UWP and have this problem. I try to manipulate LineGeometry. When I change StartPoint or EndPoint by TranslateTransform.TransformPoint() my line is cutted by some rectangle. I think it's Bounds part, but is it possible to change it or do something to repair it?
Part to draw Violet Points
Path ellipsePoint = new Path();
ellipsePoint.Stroke = new SolidColorBrush(Colors.BlueViolet);
ellipsePoint.StrokeThickness = 3;
ellipsePoint.Fill = new SolidColorBrush(Colors.DarkViolet);
var geometry = new EllipseGeometry();
geometry.Center = point;
geometry.Transform = CompositeTransform;
geometry.RadiusX = geometry.RadiusY = 15;
ellipsePoint.Tag = isStartPoint;
ellipsePoint.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;
var dragTranslation = new TranslateTransform();
ellipsePoint.RenderTransform = dragTranslation;
ellipsePoint.ManipulationDelta +=
(s, e) =>
{
dragTranslation.X += e.Delta.Translation.X;
dragTranslation.Y += e.Delta.Translation.Y;
var manPoint = s as Path;
if (manPoint != null)
if ((bool)manPoint.Tag)
Line.StartPoint = dragTranslation.TransformPoint(point);
else
Line.EndPoint = dragTranslation.TransformPoint(point);
};
ellipsePoint.Data = geometry;`
Line is prepared like below
Line = new LineGeometry();
Line.StartPoint = _Points.First();
Line.EndPoint = _Points.Last();
Related
I have been experimenting with charts and so far I got this experimental code:
static void Main(string[] args)
{
Random rnd = new Random();
Chart thisChart = new Chart();
thisChart.Height = 400;
thisChart.Width = 500;
thisChart.BackColor = SystemColors.Window;
thisChart.Palette = ChartColorPalette.EarthTones;
thisChart.Titles.Add("Test");
thisChart.Visible = true;
ChartArea ca = new ChartArea();
ca.Name = "Default";
ca.BackColor = Color.White;
ca.BorderColor = Color.FromArgb(26, 59, 105);
ca.BorderWidth = 0;
ca.BorderDashStyle = ChartDashStyle.Solid;
ca.AxisX = new Axis();
ca.AxisY = new Axis();
thisChart.ChartAreas.Add(ca);
Series series = thisChart.Series.Add("Default");
series.ChartType = SeriesChartType.Spline;
series.ChartArea = "Default";
series.Points.AddXY("1", 20);
series.Points.AddXY("2", 25);
series.Points.AddXY("3", 30);
series.Points.AddXY("4", 35);
series.Points.AddXY("5", 40);
series.Points.AddXY("6", 45);
//SetPosition for multiple Y-axis labels
thisChart.ChartAreas["Default"].Position = new ElementPosition(25, 10, 68, 85);
thisChart.ChartAreas["Default"].InnerPlotPosition = new ElementPosition(10, 0, 90, 80);
// Create extra Y axis for second and third series
Series series2 = thisChart.Series.Add("Series2");
series2.ChartType = SeriesChartType.Spline;
series2.ChartArea = "Default";
series2.Points.AddXY("1", 50);
series2.Points.AddXY("2", 55);
series2.Points.AddXY("3", 60);
series2.Points.AddXY("4", 70);
series2.Points.AddXY("5", 75);
series2.Points.AddXY("6", 80);
//series2.Legend = "Default";
thisChart.Series["Series2"].ChartArea = "Default";
CreateYAxis(thisChart, thisChart.ChartAreas["Default"], thisChart.Series["Series2"], 13, 8);
// Create extra X axis for second and third series
Series series3 = thisChart.Series.Add("Series3");
series3.ChartType = SeriesChartType.Spline;
series3.ChartArea = "Default";
series3.Points.AddXY("1,5", 75);
series3.Points.AddXY("2,5", 175);
series3.Points.AddXY("3,5", 300);
series3.Points.AddXY("4,5", 75);
series3.Points.AddXY("5,5", 150);
series3.Points.AddXY("6,6", 125);
thisChart.Series["Series3"].ChartArea = "Default";
CreateXAxis(thisChart, thisChart.ChartAreas["Default"], thisChart.Series["Series3"], -10, 8);
//thisChart.DataBind();
thisChart.SaveImage(#"C:\Temp\TestChart.png", ChartImageFormat.Png);
}
private static void CreateYAxis(Chart chart, ChartArea area, Series series, float axisOffset, float labelsSize)
{
// Create new chart area for original series
ChartArea areaSeries = chart.ChartAreas.Add("ChartArea_" + series.Name);
areaSeries.BackColor = Color.Transparent;
areaSeries.BorderColor = Color.Transparent;
areaSeries.Position.FromRectangleF(area.Position.ToRectangleF());
areaSeries.InnerPlotPosition.FromRectangleF(area.InnerPlotPosition.ToRectangleF());
areaSeries.AxisX.MajorGrid.Enabled = false;
areaSeries.AxisX.MajorTickMark.Enabled = false;
areaSeries.AxisX.LabelStyle.Enabled = false;
areaSeries.AxisY.MajorGrid.Enabled = false;
areaSeries.AxisY.MajorTickMark.Enabled = false;
areaSeries.AxisY.LabelStyle.Enabled = false;
areaSeries.AxisY.IsStartedFromZero = area.AxisY.IsStartedFromZero;
areaSeries.AxisY.TitleAlignment = StringAlignment.Far;
areaSeries.AxisY.TextOrientation = TextOrientation.Horizontal;
areaSeries.AxisY.Title = "Y-axis Title1";
areaSeries.AxisY.TitleForeColor = Color.Blue;
areaSeries.AxisY.TitleFont = new Font("Tahoma", 7, FontStyle.Bold);
areaSeries.AxisY.Maximum = 300;
series.ChartArea = areaSeries.Name;
// Create new chart area for axis
ChartArea areaAxis = chart.ChartAreas.Add("AxisY_" + series.ChartArea);
areaAxis.BackColor = Color.Transparent;
areaAxis.BorderColor = Color.Transparent;
areaAxis.Position.FromRectangleF(chart.ChartAreas[series.ChartArea].Position.ToRectangleF());
areaAxis.InnerPlotPosition.FromRectangleF(chart.ChartAreas[series.ChartArea].InnerPlotPosition.ToRectangleF());
areaAxis.AxisY.TitleAlignment = StringAlignment.Center;
areaAxis.AxisY.Title = "Y-axis Title";
areaAxis.AxisY.TitleForeColor = Color.Blue;
areaAxis.AxisY.TitleFont = new Font("Tahoma", 7, FontStyle.Bold);
areaAxis.AxisY.TitleAlignment = StringAlignment.Far;
areaAxis.AxisY.TextOrientation = TextOrientation.Horizontal;
areaAxis.AxisY.Maximum = 200;
// Create a copy of specified series
Series seriesCopy = chart.Series.Add(series.Name + "_Copy");
seriesCopy.ChartType = series.ChartType;
foreach (DataPoint point in series.Points)
{
seriesCopy.Points.AddXY(point.XValue, point.YValues[0]);
}
// Hide copied series
seriesCopy.IsVisibleInLegend = false;
seriesCopy.Color = Color.Transparent;
seriesCopy.BorderColor = Color.Transparent;
seriesCopy.ChartArea = areaAxis.Name;
// Disable drid lines & tickmarks
areaAxis.AxisX.LineWidth = 0;
areaAxis.AxisX.MajorGrid.Enabled = false;
areaAxis.AxisX.MajorTickMark.Enabled = false;
areaAxis.AxisX.LabelStyle.Enabled = false;
areaAxis.AxisY.MajorGrid.Enabled = false;
areaAxis.AxisY.IsStartedFromZero = area.AxisY.IsStartedFromZero;
areaAxis.AxisY.LabelStyle.Font = area.AxisY.LabelStyle.Font;
// Adjust area position
areaAxis.Position.X -= axisOffset;
areaAxis.InnerPlotPosition.X += labelsSize;
}
private static void CreateXAxis(Chart chart, ChartArea area, Series series, float axisOffset, float labelsSize)
{
// Create new chart area for original series
ChartArea areaSeries = chart.ChartAreas.Add("ChartArea_" + series.Name);
areaSeries.BackColor = Color.Transparent;
areaSeries.BorderColor = Color.Transparent;
areaSeries.Position.FromRectangleF(area.Position.ToRectangleF());
areaSeries.InnerPlotPosition.FromRectangleF(area.InnerPlotPosition.ToRectangleF());
areaSeries.AxisY.MajorGrid.Enabled = false;
areaSeries.AxisY.MajorTickMark.Enabled = false;
areaSeries.AxisY.LabelStyle.Enabled = false;
areaSeries.AxisX.MajorGrid.Enabled = false;
areaSeries.AxisX.MajorTickMark.Enabled = false;
areaSeries.AxisX.LabelStyle.Enabled = false;
areaSeries.AxisX.IsStartedFromZero = area.AxisX.IsStartedFromZero;
series.ChartArea = areaSeries.Name;
// Create new chart area for axis
ChartArea areaAxis = chart.ChartAreas.Add("AxisX_" + series.ChartArea);
areaAxis.BackColor = Color.Transparent;
areaAxis.BorderColor = Color.Transparent;
areaAxis.Position.FromRectangleF(chart.ChartAreas[series.ChartArea].Position.ToRectangleF());
areaAxis.InnerPlotPosition.FromRectangleF(chart.ChartAreas[series.ChartArea].InnerPlotPosition.ToRectangleF());
// Create a copy of specified series
Series seriesCopy = chart.Series.Add(series.Name + "_Copy");
seriesCopy.ChartType = series.ChartType;
foreach (DataPoint point in series.Points)
{
seriesCopy.Points.AddXY(point.XValue, point.YValues[0]);
}
// Hide copied series
seriesCopy.IsVisibleInLegend = false;
seriesCopy.Color = Color.Transparent;
seriesCopy.BorderColor = Color.Transparent;
seriesCopy.ChartArea = areaAxis.Name;
// Disable drid lines & tickmarks
areaAxis.AxisY.LineWidth = 0;
areaAxis.AxisY.MajorGrid.Enabled = false;
areaAxis.AxisY.MajorTickMark.Enabled = false;
areaAxis.AxisY.LabelStyle.Enabled = false;
areaAxis.AxisX.MajorGrid.Enabled = false;
//areaAxis.AxisX.IntervalOffset = Convert.ToDouble("0,5");
areaAxis.AxisX.IsStartedFromZero = area.AxisX.IsStartedFromZero;
areaAxis.AxisX.LabelStyle.Font = area.AxisX.LabelStyle.Font;
areaAxis.AxisX.CustomLabels.Add(0, 1, "0.5");
areaAxis.AxisX.CustomLabels.Add(1, 2, "1.5");
areaAxis.AxisX.CustomLabels.Add(2, 3, "2.5");
areaAxis.AxisX.CustomLabels.Add(3, 4, "3.5");
areaAxis.AxisX.CustomLabels.Add(4, 5, "4.5");
areaAxis.AxisX.CustomLabels.Add(5, 6, "5.5");
areaAxis.AxisX.CustomLabels.Add(6, 7, "6.5");
// Adjust area position
areaAxis.Position.Y -= axisOffset;
areaAxis.InnerPlotPosition.Y += labelsSize;
}
This produces the following result:
PROBLEM:
I can not figure out how to make it so that the title aligns itself above the respective y-axis, any ideas?
I don't think you do that.
Afaik the recommended workaround is adding more chart Titles.
You can style them as usual and to move them on top of a axis you can align them to the top left of the respective Chartearea.InnerPlotPosition:
ChartArea ca1 = thisChart.ChartAreas[0];
RectangleF rip1 = ca1.InnerPlotPosition.ToRectangleF();
Title ty1 = thisChart.Titles.Add("ty1");
ty1.Text = "Y-Axis 1\nTitle";
ty1.ForeColor = Color.DarkSlateBlue;
ty1.Position.X = rip1.Left;
ty1.Position.Y = rip1.Y;
Make sure to have enough space at the top of the chart for the titles..
Do note that the values of all ElementPositions, including InnerPlotPosition are in percent of the respective containers, i.e. of the ChartArea for the InnerPlotPosition and of the Chart for the ChartArea..
I am working on MapControl in Windows 10 and I want to allow the user to drag the pin and when the user drops the pin want to get latitude and longitude of that position and get the location address by using API.I added Map Icon using following code
MapControl map = frameworkElement as MapControl;
map.MapServiceToken= "my service token";
BasicGeoposition councilPosition = new BasicGeoposition()
{
Latitude = Convert.ToDouble(Info.GetType().GetRuntimeProperty("LATITUDE").GetValue(councilInfo, null)),
Longitude = Convert.ToDouble(Info.GetType().GetRuntimeProperty("LONGITUDE").GetValue(councilInfo, null))
};
Geopoint pinPoint = new Geopoint(councilPosition);
MapIcon locationPin = new MapIcon();
locationPin.Image= RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Images/pushpin.png"));
locationPin.Title = councilInfo.COUNCIL_NAME;
locationPin.CollisionBehaviorDesired = MapElementCollisionBehavior.RemainVisible;
locationPin.Location = councilPoint;
locationPin.NormalizedAnchorPoint = new Point(0.5, 1.0);
locationPin.ZIndex = 0;
map.MapElements.Add(locationPin);
await map.TrySetViewAsync(locationPin.Location, 15D, 0, 0, MapAnimationKind.Bow);
Can someone suggest which events are required to be used to achieve pick location functionality?
Refer this link. They have specified display points using XAML. Instead of border you can have Grid with background pushpin image,listen to manipulation events for that grid.
here is the code to achieve what i told above.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
BasicGeoposition snPosition = new BasicGeoposition() { Latitude = 47.7356039173901, Longitude = -122.310697222129
};
Geopoint snPoint = new Geopoint(snPosition);
// Create a XAML border.
Grid grid = new Grid
{
Width=100,
Height=100,
Background = new ImageBrush() {ImageSource= new BitmapImage(new Uri("ms-appx:///Assets/icon.png", UriKind.RelativeOrAbsolute)), Stretch = Stretch.UniformToFill}
};
grid.ManipulationMode = ManipulationModes.TranslateX|ManipulationModes.TranslateY;
grid.ManipulationCompleted += Grid_ManipulationCompleted;
grid.ManipulationDelta +=Grid_ManipulationDelta;
// Center the map over the POI.
MapControl1.Center = snPoint;
MapControl1.ZoomLevel = 14;
CompositeTransform tran = new CompositeTransform();
grid.RenderTransform = tran;
// Add XAML to the map.
MapControl1.Children.Add(grid);
MapControl.SetLocation(grid, snPoint);
MapControl.SetNormalizedAnchorPoint(grid, new Point(0.5, 0.5));
}
private void Grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Grid grid = sender as Grid;
CompositeTransform xform = grid.RenderTransform as CompositeTransform;
xform.TranslateX += e.Delta.Translation.X;
xform.TranslateY += e.Delta.Translation.Y;
// Rect point = grid.TransformToVisual(MapControl1).TransformBounds(new Rect(0,0, grid.Width, grid.Height));
e.Handled = true;
// Geopoint gPoint;
// MapControl1.GetLocationFromOffset(new Point(point.X, point.Y), out gPoint);
// Debug.WriteLine(gPoint.Position.Latitude);
// Debug.WriteLine(gPoint.Position.Longitude);
}
private void Grid_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
Grid grid = sender as Grid;
Rect point = grid.TransformToVisual(MapControl1).TransformBounds(new Rect(0, 0, grid.Width, grid.Height);
Geopoint gPoint;
MapControl1.GetLocationFromOffset(new Point(point.X, point.Y), out gPoint);
Debug.WriteLine(gPoint.Position.Latitude);
Debug.WriteLine(gPoint.Position.Longitude);
}
Location fetched after drag is not that accurate. You can do bit R&D on how to fetch accuarate point wrt to MapControl
I was unable to get the accepted answer to work. After a lot of research and help from this answer, I finally got it working. Here's a working sample:
public sealed partial class MainPage : Page
{
public MainPage()
{
InitializeComponent();
var position = new Geopoint(new BasicGeoposition
{
Latitude = 30.3618,
Longitude = -91.1067
});
var grid = new Grid
{
Width = 32,
Height = 50
};
var pushpin = new Image()
{
Source = new BitmapImage(new Uri("ms-appx:///Assets/Pushpin.png")),
Stretch = Stretch.Uniform,
ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY,
RenderTransform = new TranslateTransform()
};
pushpin.ManipulationStarted += Pushpin_ManipulationStarted;
pushpin.ManipulationDelta += Pushpin_ManipulationDelta;
pushpin.ManipulationCompleted += Pushpin_ManipulationCompleted;
grid.Children.Add(pushpin);
Map.Center = position;
Map.Children.Add(grid);
MapControl.SetLocation(grid, position);
MapControl.SetNormalizedAnchorPoint(grid, new Point(0.5, 1));
}
private Geopoint GetPosition(Image pushpin)
{
var grid = pushpin.Parent as Grid;
var anchor = MapControl.GetNormalizedAnchorPoint(grid);
var offset = pushpin.TransformToVisual(Map).TransformPoint(new Point(grid.Width * anchor.X, grid.Height * anchor.Y));
Map.GetLocationFromOffset(offset, out Geopoint position);
return position;
}
private void Pushpin_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
Map.PanInteractionMode = MapPanInteractionMode.Auto;
var pushpin = sender as Image;
var grid = pushpin.Parent as Grid;
var position = GetPosition(pushpin);
MapControl.SetLocation(grid, position);
var transform = pushpin.RenderTransform as TranslateTransform;
transform.X = 0;
transform.Y = 0;
}
private void Pushpin_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var pushpin = sender as Image;
var transform = pushpin.RenderTransform as TranslateTransform;
transform.X += e.Delta.Translation.X;
transform.Y += e.Delta.Translation.Y;
}
private void Pushpin_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
Map.PanInteractionMode = MapPanInteractionMode.Disabled;
}
}
This is what I did in the constructor:
drawPoints.Clear();
paintToCalaculate = false;
chart1.Invalidate();
Series S0 = chart1.Series[0];
S0.ChartType = SeriesChartType.Column;
S0.IsValueShownAsLabel = true;
chart1.Series["Series1"]["PixelPointWidth"] = "0.6";
chart1.Series["Series1"]["DrawingStyle"] = "Cylinder";
S0.Color = Color.Transparent;
S0.LegendText = "";
area.BackColor = Color.White;
area.BackSecondaryColor = Color.LightSteelBlue;
area.BackGradientStyle = GradientStyle.DiagonalRight;
area = chart1.ChartAreas[0];
chart1.Series["Series1"].Points.AddXY(10, 10);
area.AxisX.Minimum = 1;
area.AxisX.Maximum = 30;
area.AxisY.Minimum = 1;
area.AxisY.Maximum = 120;
area.AxisX.MajorGrid.LineColor = Color.LightSlateGray;
area.AxisY.MajorGrid.LineColor = Color.LightSlateGray;
The problem is that I'm using the chart paint event to draw points and lines:
Pen pen = new Pen(Color.Blue, 2.5f);
SolidBrush myBrush = new SolidBrush(Color.Red);
private void chart1_Paint(object sender, PaintEventArgs e)
{
if (paintToCalaculate)
{
Series s = chart1.Series.FindByName("dummy");
if (s == null) s = chart1.Series.Add("dummy");
drawPoints.Clear();
s.Points.Clear();
foreach (PointF p in valuePoints)
{
s.Points.AddXY(p.X, p.Y);
DataPoint pt = s.Points[0];
double x = chart1.ChartAreas[0].AxisX.ValueToPixelPosition(pt.XValue);
double y = chart1.ChartAreas[0].AxisY.ValueToPixelPosition(pt.YValues[0]);
drawPoints.Add(new Point((int)x, (int)y));
s.Points.Clear();
}
paintToCalaculate = false;
chart1.Series.Remove(s);
}
foreach (Point p in drawPoints)
{
e.Graphics.FillEllipse(Brushes.Red, p.X - 2, p.Y - 2, 4, 4);
}
if (drawPoints.Count > 1)
{
e.Graphics.DrawLines(pen, drawPoints.ToArray());
}
}
I wanted it to look like this style:
It should look like in the example. But since I'm using the paint event maybe it's not possible this way.
Edit tried this solution i added a new chart control for the test in the form1 designer called chart2. Then in the constructor i did:
chart2.Titles.Add(("Introducing Chart Controls"));
ChartArea chartarea2 = new ChartArea("Main");
chart2.ChartAreas.Add(chartarea2);
Series seriesColumns = new Series("RandomColumns");
seriesColumns.Color = Color.Blue;
chart2.Series.Add(seriesColumns);
Random rnd = new Random(10);
for (int i = 0; i < 10; i++)
{
seriesColumns.Points.Add((rnd.Next(100)));
}
DataPoint dp = new DataPoint(seriesColumns);
dp.Color = Color.Red;
dp.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.LeftRight;
seriesColumns.Points.Add(dp);
But no fade in/out color change. Nothing happen.
This is how chart2 look like:
To get the gradient effect you don't necessarily have to use the Paint event. The DataPoint has the BackGradientStyle property that will generate the gradient automatically for you. It will use the colour of the DataPoint. You set it like in the sample below:
var dp = new DataPoint(8D, 12D);
dp.Color = Color.Red;
dp.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.LeftRight;
var series = this.chart1.Series[0];
series.Points.Add(dp);
Here the gradient is fading out. If you want it to pass into another color set the BackSecondaryColor property.
dp.BackSecondaryColor = Color.Green;
Click the points, I want to make from the polygon area on image.
myPolygon = new Polygon();
myPolygon.Stroke = Brushes.Black;
myPolygon.Fill = Brushes.LightYellow;
myPolygon.StrokeThickness = 2;
myPolygon.HorizontalAlignment = HorizontalAlignment.Left;
myPolygon.VerticalAlignment = VerticalAlignment.Center;
myPolygon.PreviewMouseLeftButtonDown += new MouseButtonEventHandler(Polygon_MouseDown);
myPolygon.PreviewMouseLeftButtonUp += new MouseButtonEventHandler(Polygon_MouseUp);
private void Polygon_MouseDown(object sender, MouseButtonEventArgs e)
{
Point p = e.GetPosition(image);
myPolygon.Points = new PointCollection() { new Point(p.X,p.Y) };
RootCanvas.Children.Add(myPolygon);
} //MouseClick Event BUT, did not click behavior.. I want draw a line along the points.
How can I do...?
We can draw Polygon using WPF canvas which is a collection of children objects.
Polygon p = new Polygon();
p.Stroke = Brushes.Black;
p.Fill = Brushes.LightBlue;
p.StrokeThickness = 1;
p.HorizontalAlignment = HorizontalAlignment.Left;
p.VerticalAlignment = VerticalAlignment.Center;
p.Points = new PointCollection() { new Point(10, 10), new Point(100, 100), new Point(200, 200) };
freeCanvas.Children.Add(p);
For more information,. please refer the following urls
http://www.codeproject.com/Articles/128705/WPF-rounded-corners-polygon
http://classicalprogrammer.wikidot.com/draw-dynamic-polygons-in-wpf
http://msdn.microsoft.com/en-us/library/ms747393.aspx
I use the following code to connect two ScatterViewItems. Unfortunately this does not work because the center property isn't asingle value. But I can't read out values x and y from the CenterProperty:
Line l = new Line();
l.Stroke = Brushes.Green;
l.StrokeThickness = 10;
Binding x1 = new Binding(); x1.Path = new PropertyPath(ScatterViewItem.CenterProperty);
x1.Converter = new MyConverter();
x1.ConverterParameter = root;
Binding y1 = new Binding(); y1.Path = new PropertyPath(ScatterViewItem.CenterProperty);
y1.Converter = new MyConverter();
y1.ConverterParameter = root;
Binding x2 = new Binding(); x2.Path = new PropertyPath(ScatterViewItem.CenterProperty);
x2.Converter = new MyConverter();
x2.ConverterParameter = level1;
Binding y2 = new Binding(); y2.Path = new PropertyPath(ScatterViewItem.CenterProperty);
y2.Converter = new MyConverter();
y2.ConverterParameter = level1;
x1.Source = y1.Source = root;
x2.Source = y2.Source = level1;
l.SetBinding(Line.X1Property, x1);
l.SetBinding(Line.Y1Property, y1);
l.SetBinding(Line.X2Property, x2);
l.SetBinding(Line.Y2Property, y2);
Dependencies.Children.Add(l);
l.Tag = new Call(focus, file);
Contacts.AddPreviewContactDownHandler(l, OnLineDown);
SizeChangedEventHandler act = (Object s, SizeChangedEventArgs args) =>
{
BindingOperations.GetBindingExpressionBase(l, Line.X1Property).UpdateTarget();
BindingOperations.GetBindingExpressionBase(l, Line.Y1Property).UpdateTarget();
BindingOperations.GetBindingExpressionBase(l, Line.X2Property).UpdateTarget();
BindingOperations.GetBindingExpressionBase(l, Line.Y2Property).UpdateTarget();
};
root.SizeChanged += act;
level1.SizeChanged += act;
I'm now using the followng solution, proposed in the Microsoft Surface Development forum by Sebastian:
XAML:
<s:SurfaceWindow
x:Class="Lines.SurfaceWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
Title="Lines"
>
<Grid>
<Canvas x:Name="LineHost"/>
<s:ScatterView x:Name="ScatterView"/>
</Grid>
</s:SurfaceWindow>
Code-behind:
private void BindLineToScatterViewItems(Line line, ScatterViewItem origin,
ScatterViewItem destination)
{
// Bind line.(X1,Y1) to origin.ActualCenter
BindingOperations.SetBinding(line, Line.X1Property, new Binding {
Source = origin, Path = new PropertyPath("ActualCenter.X") });
BindingOperations.SetBinding(line, Line.Y1Property, new Binding {
Source = origin, Path = new PropertyPath("ActualCenter.Y") });
// Bind line.(X2,Y2) to destination.ActualCenter
BindingOperations.SetBinding(line, Line.X2Property, new Binding {
Source = destination, Path = new PropertyPath("ActualCenter.X") });
BindingOperations.SetBinding(line, Line.Y2Property, new Binding {
Source = destination, Path = new PropertyPath("ActualCenter.Y") });
}
Then if you want to create a line between two ScatterViewItems, simply do this:
var origin = new ScatterViewItem();
var destination = new ScatterViewItem();
Line line = new Line { Stroke = Brushes.Black, StrokeThickness = 2.0 };
BindLineToScatterViewItems(line, origin, destination);
ScatterView.Items.Add(origin);
ScatterView.Items.Add(destination);
LineHost.Children.Add(line);