Design a WPF Tab control similar to the Wpf Ribbon

Hi,
  I have a requirement to show the list of tools similar to that of a Microsoft word's Ribbon, but then i find some limitations in the Wpf Ribbon i..e it can not be completely customised, for example- The Ribbon tab header's height has to be increased
when selected as shown in the figure, but I couldn't  find any relevant solution to accomplish it, so I have decided to use the native Tab Control and make it look like a Ribbon bar as suggested by  Andy
ONeill  
Expected Ribbon Tab header Style(Done using native Tab Control)
   But the issue here is I'm not able to handle the resize behaviour of the Wpf tab control.. when the tab control is resized it has to arrange all the elements in the same way that the ribbon bar does
on  Dynamic Resizing.. 
can you help me building a Tab control with this feature...
Thanks,
Sai Kiran Reddy

Thanks for your valuable reply Mr. Andy ONeill can you please tell me how to mimic the Dynamic
Resizing behaviour of Ribbon bar using the WPF Tab Control.. 
There is an awful lot of functionality in a ribbon.
And it's pretty tricky to use.
Personally, I usually go with a tabcontrol and then add functionality I need from there.
Often two tabitems with horizontally arranged listviews are sufficient.
You can see that approach in use in my article:
http://social.technet.microsoft.com/wiki/contents/articles/28209.wpf-entity-framework-mvvm-walk-through-1.aspx
<TabControl HorizontalAlignment="Left" x:Name="CommandTab">
<TabItem Header="Navigate" FontSize="10">
<ListView ItemsSource="{Binding Views}" BorderBrush="Transparent" FontSize="12" FontWeight="Bold"
ScrollViewer.CanContentScroll="False"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Navigate}"
BorderThickness="0" Height="32" Width="100"
Background="{StaticResource LightBrightGradientBrush}"
Foreground="{StaticResource DarkDullBrush}"
>
<TextBlock Text="{Binding ViewDisplay}"
TextAlignment="Center"
/>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</TabItem>
<TabItem Header="Edit" x:Name="EditTabItem" FontSize="10">
<ListView ItemsSource="{Binding Commands}" BorderBrush="Transparent" FontSize="12" FontWeight="Bold"
ScrollViewer.CanContentScroll="False"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Send}"
BorderThickness="0"
Margin="0" Padding="0"
>
<Path Data="{Binding IconGeometry}" Stretch="Uniform"
Style="{StaticResource PathOpacityStyle}"
Fill="{StaticResource MidDullBrush}" Width="32" Height="32"/>
<Button.ToolTip>
<TextBlock Text="{Binding CommandDisplay}"/>
</Button.ToolTip>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</TabItem>
</TabControl>
By the way.
I think if you really work at it you can customise the ribbon by re templating the thing.
On one project I ran  that work and wrangling the riibbon generally turned out to pretty much eat up all the time of one of my guys though. 
Hope that helps.
Recent Technet articles:
Property List Editing ;  
Dynamic XAML

Similar Messages

  • Why is the 3d tab not showing on the top ribbon?

    I just started a close for photoshop and they have on their top ribbon "3d" tab why does it not show on mine?

    Good day!
    What exactly are you talking about?
    Is 3D available under Window > Workspace > …?
    Regards,
    Pfaffenbichler

  • Horizontal tabs when they are on the left side of tab control

    I have a tab control for a touch screen where I was going to use buttons along the left side to change tabs, and hide the tabs. However, I realized I can put the tabs on the left side of the tab control and remove my buttons all together. Only issue is, I would like them (along with their font) to be horizontal, not vertical as they are shown in my screenshot. Is there a way to change this?
    CLA, LabVIEW Versions 2010-2013
    Solved!
    Go to Solution.
    Attachments:
    touchscreen.PNG ‏118 KB

    It's a really poor design aspect of tab controls that the text is sideways when the tabs are on the left or right side.
    I've looked into it and found no way to re-orient the text.
    However you can put images on the tabs instead of text, and the images can be of text (correctly oriented of course).
    The attached code can be used to generate such a tab control.
    Attachments:
    Create_Good_Tab_2.llb ‏98 KB

  • The waveform chart in the tab control

    Hi,
    I'd like to change the plot number and the plot name of a waveform chart in a tab control.
    First of all, it works fine without a tab control, but I have many charts(such as temperature, pressure, voltage...) so that I put each chart into the pages of a tab control.
    Error 1077 happened when I "add" the plot number and change the plot name.
    The following is a sample I made to describe this problem.
    Let's begin if the number is 20, so there are 20 plots in that chart in page 2.

    Do not turn on the switch, change C to 3, minus N to 18, and run it and it can be seen that the tab control will switch to page1.
    Switch to page 2, and the plot names are updated but left some relic.
    Add N to 22, change C  to 2, and run it again.
    Error 1077 happened! Switch to page 2, and the plot number is still 20, and the plot names are updated to 20.
    Run it again, and it works fine!
    It is very tricky for me.
    If I switch to the page 2 first and run the program, it works fine too.
    (That is, if the switch is turn on, then the program works fine.) 
    The LabVIEW version of mine is 2011.
    I'm not sure I missed or misunderstanded something about this problem.
    Does someone can give me some suggestion? Thanks a lot
    Solved!
    Go to Solution.

    Hi, Bob_Schor,
    I'm sorry my poor expression confused you.
    All I want is to demonstrate that the chart in the 'hidden' page of the tab control results in the error when the user tried to add plot number and change the plot name.
    To make a scenario more specific, there is two pages in a tab control, one is for setting, the other is for the plotting.
    When the user change the channel configuration, the chart is going to change correspondingly.
    If I'd like to change the plot number and plot names, there is possiby a problem when staying in the setting page.
    I hope I do not mislead you to the wrong direction
    You're right I should make the parameters more clear to facilitate reader understand my purpose easily.
    Switch True means switch to the chart page before the modification of the chart, and return to the first page after the modification. Switch False means stay in the first page while the chart is modified.
    C is used to make the plot name different among each execution. If the plot names of the chart in the previous execution are [101, 102, 103, 104, 105], and I'd like to decrease the plot names to three items [101, 102, 103], but in the case of the false switch, it will be [101, 102, 103, 104, 105], it is hard to tell if it is really updated. I can change C to 2, and the plot names in this execution will be [201, 202, 203, 104, 105], it could be shown it is updated indeed but left some unexpected plot names[104, 105](I call it relic...).
    N is just the plot number the user can increase or decrease it.
    I'm afraid of being the guy you mentioned...
    Like my original post, I probably have several charts to show their results(temperature, pressure, voltage...) so that I make a tab control of 6 pages, and put a chart in each page. The user can also determine the channel numbers of each kind of measurement before the acquisition. I didn't think too much about it(actually now I still have this direct simple idea only...), what would you do if you have to show these data? Very thanks to your reply

  • Cannot drag an indicator off a tab control page

    I inherit this VI and try to change certain controls in the tab control pages. But the controls are locked together, every time I select an item on the control, everything is selected. And when I make a new string indicator and drop onto the page, I cannot select or delete it. also when I use the arrow down key to move a control onto the tab control page, it does not have a normal shadowed effect to indicate that it's a floating control.
    The tab control is in the attachment.
    Attachments:
    Untitled 2.vi ‏22 KB

    Click on the control, then click on the Reorder button in the toolbar (should be the far right) then click Ungroup.
    Unofficial Forum Rules and Guidelines - Hooovahh - LabVIEW Overlord
    If 10 out of 10 experts in any field say something is bad, you should probably take their opinion seriously.

  • Reorder tabs in "tab control"

    To all those willing to help:
    I am using LabVIEW 8.6.  I have created several applications using "Tab Controls" to reduce the size of the UI.  This last one has been problematic in that the first tab does not display when the application is launched.  I have reviewed all project files and configuration settings without luck.  I have also searched through the help files and the NI web site without success.  So I am posting my question here...
    How does one change the tabbing order for the tabs of a "tab control"?  Any and all help would be appreciated.  My thanks ahead of time. 
    Bill Buxton
    Bill Buxton

    Bill,
    Guenters solution will work if you can programatically determine your tab order.  If you would rather rearange your tabs though (see example)
    You can right click the tab control
    and up pops
    I haven't found a way to set this programatically-
    Jeff

  • Array of Tab Control page names

    Hi,
    I wish to programatically create an array of the names of the pages within a Tab Control.
    See the attached VI for my attempt at this.
    It works, but as it runs it changes which page is displayed on the front panel.
    Is there a way to do this without changing the page displayed on the front panel?
    Cheers,
    Dan
    Dan
    CLD
    Solved!
    Go to Solution.
    Attachments:
    array of tab control page names.vi ‏9 KB

    Hi,
    Take a look at the attachment.
    Hope it helps,
    Paulo
    Attachments:
    array of tab control page names2.vi ‏10 KB

  • Bug? Tab control breaks graph autoscale (+workarou​nd)

    I had this really annoying problem where two of my graphs did autoscale and the other two didn't... Although all the code and graph properties were exactly the same.
    I finally figured it out...  The graphs are in a tab control. And only the graphs that are on top get autoscaling.  Labview 'forgets' to autoscale the other graphs when you show those other tabs. Even when I use a property node, I can't force the graphs to autoscale, unless they are on the showing tab.
    Feels like a bug to me.... I can understand that graphs aren't updated/autoscaled when they're not shown for performance reasons... but I think the axis should then be updated/autoscaled as soon as the corresponding tab is shown.  And it certainly would be nice if the axis does autoscale when I explicitely ask for it using the property node...
    Now that I understood the problem, I could also make a work-around.   I made a 'value changed' event for the tab control, and put the property node autoscale code in it.  That way, I ask for an autoscale right after showing the new tab page.  (See attached vi for example of the problem and work-around.)
    The workaround works fine... but I think that this should be default built-in behaviour for graphs in tabs that have the autoscale enabled.
    Attachments:
    tabcontrol autoscale.vi ‏32 KB

    Hi Anthony,
    This is a known issue that was partially fixed in LabVIEW 8, which you appear to be using. By partially, I mean that the behavior only persists when you update the value of your graph using a property node (either Value or Value Signaling). If you update the value using a direct wire connection to the graph terminal, or using a local variable, then the problem goes away. I would recommend using either of these methods, because they will fix your issue. Also, in general a direct wire connection or a local variable will greatly improve LabVIEW's efficiency in terms of updating the front panel. The only situation where this fails is if you need to update your graphs from inside a subVI using control references.
    Because that last note is a very real situation, we will notify R&D of this matter so that they can investigate this further. Thanks for bringing this to our attention.
    Jarrod S.
    National Instruments

  • Tab control text orientation

    I can create a tab control and place the tabs on the right-side.  When I do this the text is vertical.  Can I make the tab text horizontal AND have the tabs on the right side?
    Thanks,
    Dan

    Christian_M wrote:
    Hey Dan,
    I didn't find any settings to change the alignment for the text.
    You could make the page text invisible and use customized stringcontrols which you set visible/invisible (when switching between pages) instead of the original labels.
    hope this helps
    Or another approach could use the "import Image" method to set the image to be the text you desire.
    The following illustrates the effect and the code used to achieve that effect.
    Note: There used to be a thread here on the forums that explained how to impor the images with reorting to doing programatically. I wonder if I just can't find the button to push to do it while editing. If you know about that old thread or know how to do this by editing please chime in!
    Ben
    Message Edited by Ben on 04-22-2009 07:55 AM
    Ben Rayner
    I am currently active on.. MainStream Preppers
    Rayner's Ridge is under construction
    Attachments:
    Import_Image.PNG ‏527 KB

  • Can't edit or select items on tab control

    I have no idea what happened... was programming my app and now i can't select, edit or move anything that is placed with-in the tab control area of the program, I can't even select the tab control from the front panel. Any ideas? i really dont want to have and start all over again!!!

    See if you acidentally locked it (see image)?
    Maybe you placed a huge transpared decoration over it all?
    Is the VI in edit mode or run mode? (ctrl+m to toggle)
    Attach the VI and we can check for some other possibilities.
    Message Edited by altenbach on 04-26-2008 12:49 PM
    LabVIEW Champion . Do more with less code and in less time .
    Attachments:
    unlock.png ‏11 KB

  • Executions on both tab control and list tab

    In my TestStand OI, on the left exists the listbox that contains the Sequence Files and Executions.  On the right is the tab control that shows the Test Sequence only.  Then, when a sequence file is run, the Executions and Report tab appear.  What do I add/change such that the Executions tab is displayed next to the Sequence tab at all times.

    Hi mrbean,
    I am not quite sure how this will benefit you as the Execution tab is solely for executions and when you start up your OI, there is no executions you are running.  However, if you open up the Full OI's block diagram, you will notice a subVI called "Full OI - Show Appropriate Tabs". This is the VI that sets when the tabs are visible. If you change up that case structure for the ListBar (setting the different boolean constants), you can dictate which tabs are visible.
    Hope this helps!
    Best Regards,
    Jonathan N.
    National Instruments

  • FieldPoint WEB Remote Panel Tab Control

    Using a TAB control on Fieldpoint (FP 2000) and Labview 7.1
    I wanted to implement a password feature mainly for the Web browser
    remote panel feature for my Filedpoint application, as suggested in "Developing Remote Front Panel LabVIEW Applications"
    http://zone.ni.com/devzone/conceptd.nsf/2d17d611efb58b22862567a9006ffe76/e789515b9976253786256b1f007e039b?OpenDocument#5
    (see bottom of the page)
    "Alternatively, you can program security into the VI itself. For
    example, you can require a user to log in when the VI first runs, and
    disable all other aspects of the VI until you verify the login. To do
    so, place a login field on one page of a tab control, the other
    controls on subsequent pages, and enable the other pages after the user
    successfully logs in.
    I find that I can "Hide tabs" using the "Page Selector Visible" feature
    if the Remote panel is hosted by Labview in Development Mode but this
    feature does function with the Web remote panel mode. In fact you can
    use the Tab Control normally from the Web remote panel.
    I find that I can disable a specific tab if the Remote panel is hosted by Labview in Development Mode but this feature is ignored by the Web remote panel mode.
    Thus: -
      Do you know of any limitations (a list would be usefull, if there are specific limitations)?
      If its a limitation, is it of FieldPoint or the Web remote panel or the Runtime Engine installed in the Browser or ...?
      Do you know of a better way of getting a password feature.
        ( I am aware of IP security available - the IP
    addresses are DHCP supplied - " 'Doh' says Homer Simpson", the P.C's
    will change as well)
    I lookforward to any insights..., wisdom or experiences you may have had

    This discussion covers some restrictions placed by LabVIEW-RT:
    http://forums.ni.com/ni/board/message?board.id=170&message.id=133674#M133674
    Regards,
    -Khalid

  • Tab controling Tab

    My goal is following
    When i press the A tab on the test tab control, the B tab shall disepear in test tab control and only the A tab should be visible in test2 tab control( not greyed out) . The same thing shall happen when B are pressed, that wil say only will be visible.
    In other word , i want to use one tab control to control another tabcontrols visible tabs
    Solved!
    Go to Solution.
    Attachments:
    Tabcontrol.vi ‏6 KB

    You can create a property node of a tab control to give you references to all of the pages (a 1-D array).  From there, you can create a property node on a particular reference and set the visibility of that page.
    Attachments:
    Tabcontrol[1]_BD.png ‏13 KB

  • Difference between dialog tab control vs. Containers tab control

    Other than the fact that the dialog tab control color is controlled by widows. Does any one no what the differences are between the two is there any advantage to using one over the other?

    Hi,
    Are you referring to the tab controls found under the 2 different controls palettes: Dialog Control and Containers? If so, then here is a KB that describes the difference between the different controls that are available in LabVIEW:
    KB 2X9ELOLD: What is the Difference Between 3D, Classic (2D), and Dialog Controls in LabVIEW?
    Just for clarification, the Dialog controls are not controlled by Windows (or any OS). These controls are just made to look like the native controls of that OS. When deciding between which controls to use, the Classic and Dialog controls have less overhead so it will be in your interest to use those controls if you don't mind the more traditional look-and-feel of those controls.
    Thanks again!
    Kileen

  • Identifying selected tabs within tab control

    I'm looking for a way to determine which tab is selected within the CVI tab control. The index is available, but the index isn't that helpful if the tabs aren't always in the same order. The Constant Name is used to identify controls on the tab page, but it doesn't look like there is a function to find the actual tab ID.
    I was thinking that a work-around is to programmatically add the panels to the tab control and track the IDs against the index in a table.
    The header file that is generated from the UIR only refers to the Constant Name as part of the #define associated with the controls.
    Any ideas ?

    It's true that you can use the label text and discover the active panel by means of a series of comparisons between strings, but it seems to me not the best way to go and surely not the fastest. The same consideration applies to ATTR_CONSTANT_NAME (the panel attributes which returns the text of the constant name, e.g. "MyPanel"). Moreover, this last solution leads to these additional critical points
    1. If you load a panel more than once, this approach doesn't give you a unique solution
    2. On the other side, supposing you can retrieve the value associated to the constant name, this value is unique only if all tab panel are defined in the same UIR file, otherwise their IDs could overlap
    In my opinion your solution of programmatically load panels and save panel handles in a array is the only possible way to go, since only panel handles are unique throughout the whole application.
    BTW, in the header file associated with the UIR panel constant names are listed too: in every group of #defines that refer to a panel and its controls, the very first is the panel constant name with its associated value (used in LoadPanel).
    Message Edited by Roberto Bozzolo on 01-05-2007 12:15 AM
    Proud to use LW/CVI from 3.1 on.
    My contributions to the Developer Zone Community
    If I have helped you, why not giving me a kudos?

Maybe you are looking for