c# - Can I draw a grid of dots within a custom WPF canvas control? -

i've built custom control inherits canvas. uses arrangeoverride method add drag drop functionality child elements, , includes grid snapping 50 pixels , other custom behaviour such persisting element positions.

what i'd extend while dragging, shows grid of dots or crosses in background can see snap points are.

however, can't modify template of control because it's panel. tried making custom control contains canvas, , passing ienumerable items source through, became tricky pick on collection changing, , collection contained models , not framework elements.

so i'm not sure path should taking. feels though there may simple solution i've overlooked, i'm open suggestions!

thanks in advance.

i've done similar once: drawing grid lines on usercontrol, , adding controls on top of it. simple scheduler app used assign working shift in current month. had have column headers (days) , row headers (people) , scrollable grid inside, add/remove controls. don't know extent solution you, here is.

i use headeredscrollviewer here. ucheader usercontrol rotated textboxes dates. magic happens in uc_gridlines.

<grid>     <lib:headeredscrollviewer horizontalscrollbarvisibility="auto" verticalscrollbarvisibility="auto" background="aliceblue">     <lib:headeredscrollviewer.topheader>         <lib:ucheader name="ucheader"/>     </lib:headeredscrollviewer.topheader>     <lib:headeredscrollviewer.leftheader>         <border borderbrush="black" borderthickness="1,2,1,1">             <stackpanel orientation="vertical"  name="sprows" />         </border>     </lib:headeredscrollviewer.leftheader>     <grid name="gridcontentall">         <border canvas.zindex="1"  background="transparent"             borderthickness="1,1,1,2" borderbrush="transparent">                 <grid cliptobounds="true" name="gridcontent"  background="transparent" />         </border>         <border canvas.zindex="0" borderthickness="1,1,1,2" borderbrush="black" background="white">             <lib:uc_gridlines name="ucgridlines" borderthickness="0"/>         </border>     </grid> </lib:headeredscrollviewer> </grid> 

important here are:

• setting background="transparent" control containing child controls
• setting zindex correctly, controls shown on grid.
• setting snapstodevicepixels="true" , uselayoutrounding="true" on root element (e.g. window)

uc_gridlines in .xaml file has nothing (only <grid></grid>). drawing grid lines happens in codebehind:

    protected override void onrender(drawingcontext drawingcontext)     {         // vm contains data of grid, used draw gridlines         // such number of days etc.         if (this.vm == null)         {             base.onrender(drawingcontext);             return;         }         double dpifactor = 1;         try         {             matrix m = presentationsource.fromvisual(this)                      .compositiontarget.transformtodevice;             dpifactor = 1 / m.m11;         }         catch { }          pen pen = new pen(brushes.black, 1 * dpifactor);         double halfpenwidth = pen.thickness / 2;          guidelineset guidelines = new guidelineset();          double width = this.vm.days.count * this.vm.daywidth - 16 * (this.vm.daywidth / 24);         double height = this.vm.rowheight * rowcount;          (int = 1; < this.vm.days.count; i++)         {             guidelines.guidelinesx.add(i * this.vm.daywidth + halfdashpenwidth);         }          (int = 1; < rowcount; i++)         {             guidelines.guidelinesy.add(i * this.vm.rowheight + halfpenwidth);         }          drawingcontext.pushguidelineset(guidelines);          (int = 1; < this.vm.days.count; i++)         {             drawingcontext.drawline(dashpen, new point(i * this.vm.daywidth, 0), new point(i * this.vm.daywidth, height));         }          (int = 1; < rowcount; i++)         {             drawingcontext.drawline(pen, new point(0, * this.vm.rowheight), new point(width, * this.vm.rowheight));         }          drawingcontext.pop();     }