mvvm - WPF page menu change button colour -

i achieve when thinking seems straightforward.

i have mvvm application of sorts, have window multiple pages/views , along top have itemscontrol of buttons take various pages. i'd current pages button change colour , stay way while you're on page.

here of code:

<dockpanel>     <border dockpanel.dock="top" borderbrush="#faaa" borderthickness="0,0,0,3" background="#fddd">         <itemscontrol itemssource="{binding pageviewmodels}">             <itemscontrol.itemspanel>             <itemspaneltemplate>                 <stackpanel orientation="horizontal"/>             </itemspaneltemplate>         </itemscontrol.itemspanel>             <itemscontrol.itemtemplate>                 <datatemplate>                     <button width="75"                             height="30"                             content="{binding name}"                             command="{binding datacontext.changepagecommand, relativesource={relativesource ancestortype={x:type window}}}"                             commandparameter="{binding }"                             style="{staticresource menubutton}"/>                 </datatemplate>             </itemscontrol.itemtemplate>         </itemscontrol>     </border>      <contentcontrol content="{binding currentpageviewmodel}" /> </dockpanel> 

i told data triggers may don't know how implement itemscontrol. have break apart, display buttons manually , set based on name or something?

thanks

wpf have control described behavior called tabcontrol. can styled buttons if prefer instead of regular tabs, modify control template tab items. below sample code making selected tab red.

xaml:

<window x:class="wpfapplication.mainwindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:local="clr-namespace:wpfapplication"         title="mainwindow" height="350" width="525">      <window.resources>          <lineargradientbrush x:key="lightbrush" startpoint="0,0" endpoint="0,1">             <gradientbrush.gradientstops>                 <gradientstopcollection>                     <gradientstop color="#fff" offset="0.0"/>                     <gradientstop color="#eee" offset="1.0"/>                 </gradientstopcollection>             </gradientbrush.gradientstops>         </lineargradientbrush>          <solidcolorbrush x:key="solidborderbrush" color="#888" />          <solidcolorbrush x:key="disabledbackgroundbrush" color="#eee" />          <solidcolorbrush x:key="disabledborderbrush" color="#aaa" />          <solidcolorbrush x:key="disabledforegroundbrush" color="#888" />          <style targettype="{x:type tabitem}">             <setter property="template">                 <setter.value>                     <controltemplate targettype="{x:type tabitem}">                         <grid>                             <border                                  name="border"                                 margin="0,0,-4,0"                                  background="{staticresource lightbrush}"                                 borderbrush="{staticresource solidborderbrush}"                                  borderthickness="1,1,1,1"                                  cornerradius="2,12,0,0" >                                 <contentpresenter x:name="contentsite"                                     verticalalignment="center"                                     horizontalalignment="center"                                     contentsource="header"                                     margin="12,2,12,2"                                     recognizesaccesskey="true"/>                             </border>                         </grid>                         <controltemplate.triggers>                             <trigger property="isselected" value="true">                                 <setter property="panel.zindex" value="100" />                                 <setter targetname="border" property="background" value="red" />                                 <setter targetname="border" property="borderthickness" value="1,1,1,0" />                             </trigger>                             <trigger property="isenabled" value="false">                                 <setter targetname="border" property="background" value="{staticresource disabledbackgroundbrush}" />                                 <setter targetname="border" property="borderbrush" value="{staticresource disabledborderbrush}" />                                 <setter property="foreground" value="{staticresource disabledforegroundbrush}" />                             </trigger>                         </controltemplate.triggers>                     </controltemplate>                 </setter.value>             </setter>         </style>      </window.resources>      <stackpanel>          <tabcontrol              itemssource="{binding path=pageviewmodels}">             <tabcontrol.itemtemplate>                 <datatemplate>                     <textblock text="{binding header}" />                 </datatemplate>             </tabcontrol.itemtemplate>             <tabcontrol.contenttemplate>                 <datatemplate>                     <textblock text="{binding content}" />                 </datatemplate>             </tabcontrol.contenttemplate>         </tabcontrol>      </stackpanel>  </window> 

code behind:

using system.collections.generic; using system.windows;  namespace wpfapplication {     public partial class mainwindow : window     {         public mainwindow()         {             initializecomponent();              datacontext = this;         }          public list<pageviewmodel> pageviewmodels         {                         {                 return new list<pageviewmodel>() { new pageviewmodel() { header = "a", content = "aaa" }, new pageviewmodel { header = "b", content = "bbb" } };             }         }     }      public class pageviewmodel     {         public string header { get; set; }          public string content { get; set; }     } }