Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1225
Dropdown and/or textbox?
posted

Can you add a dropdown or a textbox to the ribbon? 

Parents
No Data
Reply
  • 1354
    posted

    Note: This will only work after the first service release for 10.1

    Ok, here's a quick explanation on how to add a combobox tool to the XamWebRibbon.

    First you're going to want to create two new classes,  ComboBoxTool and ComboBoxToolControl. The tool is what we'll put into a XamWebRibbonGroup's items collection, the tool then generates the tool control.

    public class ComboBoxTool : RibbonTool

        {

            protected override RibbonToolBaseControl ResolveToolControl()

            {

                return new ComboBoxToolControl(this);

            }

            public IEnumerable ItemsSource { get; set; }    

        }

        public class ComboBoxToolControl : RibbonToolBaseControl, IRibbonControl

        {

            private ComboBox _combo;

            public ComboBoxToolControl()

            {           

                this.DefaultStyleKey = typeof(ComboBoxToolControl);            

            }

            public ComboBoxToolControl(RibbonToolBase tool) : base(tool)

            {

                this.DefaultStyleKey = typeof (ComboBoxToolControl);

            }

            public override void OnApplyTemplate()

            {

                base.OnApplyTemplate();

                this._combo = GetTemplateChild("Combo") as ComboBox;

                if (this._combo != null)

                    this._combo.ItemsSource = ((ComboBoxTool) this.Tool).ItemsSource;

            }

        }

    Then you need to define the style for the ComboBoxToolControl in your generic.xaml file:

     

    <Style TargetType="cust:ComboBoxToolControl">

            <Setter Property="Foreground" Value="Green"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="cust:ComboBoxToolControl">

                        <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" Background="Transparent">

                            <Grid >

                                <ComboBox x:Name="Combo" Width="100" Height="24" />

                            </Grid>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

     

     

    At this point you should be able to add your combo box tool to the ribbon:

     

    <igr:XamWebRibbonTabItem>

                        <igr:XamWebRibbonGroup>

                            <cust:ComboBoxTool ItemsSource="{StaticResource inventory}">                       

                          </cust:ComboBoxTool>

                        </igr:XamWebRibbonGroup>                  

     </igr:XamWebRibbonTabItem>

     

     

    Now, a few things to keep in mind.  First and most importantly, this will not work until after the first service release has gone out.  This should be happening soon, but I just wanted to make sure that was clear.  Also, this is just a very basic implementation, you'll probably want to create different visual states for the control depending on where it was being displayed in the ribbon (QuickAccessToolbar, ApplicationMenu, Submenu, etc).

    Now, you might be thinking, "but what if I don't want to do all of that?"

    Rest assured we will be adding additional tools to the ribbon over time, and one of the first ones we do will most likely be a combo box, so if you can hold out for a bit we'll have you covered soon.  But if you absolutely need a combo box right now, this other option is available for you.

    Let me know if you run into any issues with this, I'll be glad to help.

     

Children