xaml - Show one of multiple items on the page (tab-like interface) -


i want have tab-like interface have multiple buttons (tabs) , when user press 1 of button show corresponding container , hide other ones.

something like:

 <!-- buttons -->  <stackpanel verticalalignment="stretch" grid.column="0">         <button             style="{staticresource detailsectionbutton}"             content="info" click="button_click"/>         <button             style="{staticresource detailsectionbutton}"             content="map" click="button_click2"/>         <button             style="{staticresource detailsectionbutton}"             content="attachment" click="button_click3"/>  </stackpanel>   <!-- info -->  <scrollviewer  x:name="secinfo" grid.column="1" visibility="collapsed" ...   <!-- map -->  <map:mapcontrol zoomlevel="6" x:name="secmap" grid.column="1"  visibility="collapsed" ...   <!-- attachments -->  <stackpanel x:name="secattachments" grid.column="1" visibility="collapsed"> 

code:

    private void button_click(object sender, routedeventargs e)     {         secinfo.visibility = visibility.visible;         secmap.visibility = visibility.collapsed;         secattachments.visibility = visibility.collapsed;     }      private void button_click_1(object sender, routedeventargs e)     {         secinfo.visibility = visibility.collapsed;         secmap.visibility = visibility.collapsed;         secattachments.visibility = visibility.visible;     }      private void button_click_2(object sender, routedeventargs e)     {         secinfo.visibility = visibility.collapsed;         secmap.visibility = visibility.visible;         secattachments.visibility = visibility.collapsed;     } 

is way or need use different in xaml ?

what have presented should work expect to.

but:

i recommend use mvvm framework (like mvvmlight , there other out there) , bindings in application. if invest time understand concepts behind life become easier later.

invest time , understand platform specifics know desktop development might not apply platform (eg: tabcontrol).

for specific design presented top of head consider using hubcontrol customization presented buttons navigate pages if need rapid access them , changing page require lot of scrolling.


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -