StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Try this:</p> <pre><code><Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <ResourceDictionary> <ControlTemplate x:Key="template1"> <Ellipse Width="30" Margin="-15 -15" Height="30" Fill="Black"/> </ControlTemplate> </ResourceDictionary> </Window.Resources> <Canvas Name="myCanvas"> <Thumb Name="myThumb" DragDelta="onDragDelta" Canvas.Left="0" Canvas.Top="30" Template="{StaticResource template1}"/> <Thumb Name="myThumb2" DragDelta="onDragDelta" Canvas.Left="400" Canvas.Top="30" Template="{StaticResource template1}"/> <Line X1="{Binding ElementName=myThumb,Path=(Canvas.Left)}" Y1="{Binding ElementName=myThumb,Path=(Canvas.Top)}" X2="{Binding ElementName=myThumb2,Path=(Canvas.Left)}" Y2="{Binding ElementName=myThumb2,Path=(Canvas.Top)}" Stroke="Black" /> </Canvas> </code></pre> <p></p> <p>code behind:</p> <pre><code>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.Controls.Primitives; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfApplication1 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } void onDragDelta(object sender, DragDeltaEventArgs e) { var i = sender as UIElement; if (i != null) { Canvas.SetLeft(i, Canvas.GetLeft(i) + e.HorizontalChange); //Canvas.SetTop(myThumb, Canvas.GetTop(myThumb) + e.VerticalChange); } } } } </code></pre> <p>EDIT:</p> <p>Explanation: this has two draggable circles (x-axis only) and a line connecting both. I've created a binding for the X-Num,Y-Num properties and bound them to the Canvas.Top/Left attached properties of the thumb objects (using ElementName Binding). This places both ends of the line in the 0,0 coords of each object. So I used a negative margin to put the circle's center in 0,0.</p> <p>Hope that helps.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload