Create a Navbar with buttons wpf .net -

Create a Navbar with buttons wpf .net -

i want create navigationbar similar used create website in wpf. want this:

i have code in xaml:

<grid> <grid.rowdefinitions> <rowdefinition height="auto" /> </grid.rowdefinitions> <grid.columndefinitions> <columndefinition width="auto" /> <columndefinition width="auto" /> <columndefinition width="auto" /> <columndefinition width="auto" /> <columndefinition width="auto" /> <columndefinition width="auto" /> <columndefinition width="auto" /> </grid.columndefinitions> <button grid.row="0" grid.column="0" content="companies" /> <button grid.row="0" grid.column="1" content="orders" /> <button grid.row="0" grid.column="2" content="employes" /> <button grid.row="0" grid.column="3" content="timesheets" /> <button grid.row="0" grid.column="4" content="payroll" /> <button grid.row="0" grid.column="5" content="billing" /> <button grid.row="0" grid.column="6" content="reports" /> </grid>

and layout:

how can "navbar" ? possible create amazing that? if yes how can ?

this should work it's not buttons (styling problems) , doesn't have arrow bit

private sub load() handles me.loaded menureset() end sub private sub menureset() handles menu1.mouseleave, menu2.mouseleave, menu3.mouseleave dim fore, back, border new solidcolorbrush fore.color = color.fromrgb(0, 0, 0) back.color = color.fromargb(0, 0, 0, 0) border.color = color.fromargb(0, 0, 0, 0) menu1.foreground = fore menu1.background = menu1.borderbrush = border menu2.foreground = fore menu2.background = menu2.borderbrush = border menu3.foreground = fore menu3.background = menu3.borderbrush = border end sub private sub menumousemove(sender label, e eventargs) handles menu1.mousemove, menu2.mousemove, menu3.mousemove dim grad new lineargradientbrush dim fore, border new solidcolorbrush grad.startpoint = new point(0.5, 0) grad.endpoint = new point(0.5, 1) grad.gradientstops.add(new gradientstop(color.fromrgb(146, 179, 19), 0)) grad.gradientstops.add(new gradientstop(color.fromrgb(116, 158, 9), 1)) fore.color = color.fromrgb(255, 255, 255) border.color = color.fromargb(255, 0, 0, 0) sender.background = grad sender.foreground = fore sender.borderbrush = border end sub <grid background="#ff86878a"> <grid x:name="menu" margin="0" verticalalignment="top" height="30"> <grid.columndefinitions> <columndefinition width="auto"/> <columndefinition width="auto"/> <columndefinition width="auto"/> <columndefinition width="auto"/> </grid.columndefinitions> <grid.background> <lineargradientbrush endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#ffc4c4c4" offset="0.873"/> <gradientstop color="#ffdedede"/> <gradientstop color="#ff9c9c9c" offset="0.92"/> <gradientstop color="#ff626466" offset="0.96"/> </lineargradientbrush> </grid.background> <label x:name="menu1" grid.column="0" content="file" horizontalalignment="left" margin="0" verticalcontentalignment="center" horizontalcontentalignment="center" padding="20,0,20,0" borderbrush="black" borderthickness="0,0,0,3"> <label.background> <lineargradientbrush endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#ff92b312" offset="0"/> <gradientstop color="#ff749e09" offset="1"/> </lineargradientbrush> </label.background> </label> <label x:name="menu2" grid.column="1" content="gates" horizontalalignment="left" margin="0" verticalcontentalignment="center" horizontalcontentalignment="center" padding="20,0,20,0" borderbrush="black" borderthickness="0,0,0,3"> <label.background> <lineargradientbrush endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#ff92b312" offset="0"/> <gradientstop color="#ff749e09" offset="1"/> </lineargradientbrush> </label.background> </label> <label x:name="menu3" grid.column="2" content="flip flops" horizontalalignment="left" margin="0" verticalcontentalignment="center" horizontalcontentalignment="center" padding="20,0,20,0" borderbrush="black" borderthickness="0,0,0,3"> <label.background> <lineargradientbrush endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#ff92b312" offset="0"/> <gradientstop color="#ff749e09" offset="1"/> </lineargradientbrush> </label.background> </label> </grid> </grid>

.net wpf xaml navbar