c# - How to draw a cross? -


i have wpf control.

i need draw below in wpf control. on resizing control, cross should follow size? have type letters below. should able set foreground , background programmatically, binding viewmodel property.

enter image description here

the cross straightforward if use path draw lines/arrows. use viewbox scale container size:

<viewbox>     <grid width="100" height="100">         <textblock text="n" horizontalalignment="left" verticalalignment="center" />         <textblock text="s" horizontalalignment="right" verticalalignment="center" />         <textblock text="e" verticalalignment="top" horizontalalignment="center" />         <textblock text="w" verticalalignment="bottom" horizontalalignment="center"/>         <path stroke="black" strokethickness="1"                 data="m 15,50 l 85,50 m 80,45 l 85,50 m 80 55 l 85,50"                 />         <path stroke="black" strokethickness="1"                 data="m 50,15 l 50,85 m 45,80 l 50,85 m 55 80 l 50,85"                 />     </grid> </viewbox> 

now, can wrap above in usercontrol. has properties foreground/background, it's matter of binding them. inside control, use relativesource bindings:

<usercontrol x:class="myproject.controls.compass"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      <grid x:name="layoutroot"            background="{binding relativesource={relativesource ancestortype=usercontrol},path=background}">         <viewbox>             <grid width="100" height="100">                 <textblock text="n" horizontalalignment="left" verticalalignment="center"                             foreground="{binding relativesource={relativesource ancestortype=usercontrol},path=foreground}" />                 <textblock text="s" horizontalalignment="right" verticalalignment="center"                             foreground="{binding relativesource={relativesource ancestortype=usercontrol},path=foreground}" />                 <textblock text="e" verticalalignment="top" horizontalalignment="center"                             foreground="{binding relativesource={relativesource ancestortype=usercontrol},path=foreground}" />                 <textblock text="w" verticalalignment="bottom" horizontalalignment="center"                            foreground="{binding relativesource={relativesource ancestortype=usercontrol},path=foreground}" />                 <path stroke="{binding relativesource={relativesource ancestortype=usercontrol},path=foreground}" strokethickness="1"                       data="m 15,50 l 85,50 m 80,45 l 85,50 m 80 55 l 85,50" />                 <path stroke="{binding relativesource={relativesource ancestortype=usercontrol},path=foreground}" strokethickness="1"                       data="m 50,15 l 50,85 m 45,80 l 50,85 m 55 80 l 50,85" />             </grid>         </viewbox>     </grid> </usercontrol> 

now can create instances of control (assuming view-model has brush type properties named "foreground" , "background"):

<controls:compass foreground="{binding foreground}" background="{binding background}"/> 

compass screenshot


Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -