Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>A canvas is definitely the wrong approach in my opinion.</p> <p>I strongly recommend looking up Adorners. You could create a custom adorner to do exactly this.</p> <p>An Adorner is basically a "non-interactive window" that sits on top of all UIElements. It allows you to do anything you'd like (create controls, draw things, etc...) that will appear on top of the control itself.</p> <p>Picture a wooden coffee table with a piece of clear glass on top of it. If you draw on the clear glass, you still see through to the coffee table. The only difference would be that you can actually reach straight through clear glass on the coffee table and touch the wood itself.</p> <p>I hate posting MSDN links...but...eh. In this case it would be a good start:</p> <p><a href="http://msdn.microsoft.com/en-us/library/ms743737.aspx" rel="nofollow">http://msdn.microsoft.com/en-us/library/ms743737.aspx</a></p> <p>EDIT:</p> <p>I threw something together quickly. Hopefully this helps?</p> <pre><code>&lt;Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:loc="clr-namespace:WpfApplication1" Title="MainWindow" Height="350" Width="525"&gt; &lt;Grid&gt; &lt;loc:GridWithRulerxaml&gt;&lt;/loc:GridWithRulerxaml&gt; &lt;Button Height="20" Width="50" &gt;Click me&lt;/Button&gt; &lt;TextBox Width="150" Height="25" HorizontalAlignment="Left"&gt;This is a text box&lt;/TextBox&gt; &lt;/Grid&gt; &lt;/Window&gt; </code></pre> <p>USERCONTROL:</p> <pre><code>&lt;UserControl x:Class="WpfApplication1.GridWithRulerxaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"&gt; &lt;Grid&gt; &lt;/Grid&gt; &lt;/UserControl&gt; </code></pre> <p>THE USERCONTROL CODE-BEHIND:</p> <pre><code>using System.Windows; using System.Windows.Controls; using System.Windows.Documents; namespace WpfApplication1 { /// &lt;summary&gt; /// Interaction logic for GridWithRulerxaml.xaml /// &lt;/summary&gt; public partial class GridWithRulerxaml : UserControl { public GridWithRulerxaml() { InitializeComponent(); //Loaded event is necessary as Adorner is null until control is shown. Loaded += GridWithRulerxaml_Loaded; } void GridWithRulerxaml_Loaded(object sender, RoutedEventArgs e) { var adornerLayer = AdornerLayer.GetAdornerLayer(this); var rulerAdorner = new RulerAdorner(this); adornerLayer.Add(rulerAdorner); } } } </code></pre> <p>FINALLY THE ADORNER ITSELF:</p> <pre><code>using System.Windows; using System.Windows.Documents; using System.Windows.Media; namespace WpfApplication1 { public class RulerAdorner : Adorner { private FrameworkElement element; public RulerAdorner(UIElement el) : base(el) { element = el as FrameworkElement; } protected override void OnRender(System.Windows.Media.DrawingContext drawingContext) { base.OnRender(drawingContext); double height = element.ActualHeight; double width = element.ActualWidth; double linesHorizontal = height/50; double linesVertical = width/50; var pen = new Pen(Brushes.RoyalBlue, 2) { StartLineCap = PenLineCap.Triangle, EndLineCap = PenLineCap.Triangle }; int offset = 0; for (int i = 0; i &lt;= linesVertical; ++i) { offset = offset + 50; drawingContext.DrawLine(pen, new Point(offset, 0), new Point(offset, height)); } offset = 0; for (int i = 0; i &lt;= linesHorizontal; ++i) { offset = offset + 50; drawingContext.DrawLine(pen, new Point(0, offset), new Point(width, offset)); } } } } </code></pre> <p>If you would like me to elaborate more on the code itself let me know.</p> <p>I confirmed that this will draw a grid over top of whatever is on your main page. You should still be able to interact with what's beneath.</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