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.
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}"/>
Comments
Post a Comment