DevExpress one Ribbon for multiple RichEditControls

Question

I have two RichEditControls and one autogenerated Ribbon.

To use the Ribbon for both Controls, I did the following (guided by this suggestion):

1. I added this in my XAML: <dxre:RichEditControlProvider x:Name="recp" />

2. This is my XAML.CS

   public TaskView()
   {
       InitializeComponent();
       richEditControl1.GotFocus += RichEditControl1OnGotFocus;
       richEditControl2.GotFocus += RichEditControl2OnGotFocus;
   }
   
   
   private void RichEditControl1OnGotFocus(object sender, RoutedEventArgs routedEventArgs)
   {
       recp.RichEditControl = richEditControl1;
       richEditControl2.BarManager = null;
       richEditControl1.BarManager = barManager1;
   }
   
   
   private void RichEditControl2OnGotFocus(object sender, RoutedEventArgs routedEventArgs)
   {
       recp.RichEditControl = richEditControl2;
       richEditControl1.BarManager = null;
       richEditControl2.BarManager = barManager1;
   }
   

This allows me to use the ribbon for the second RichEditControl as well.

My problem now is that there are optional RibbonPages table editing and image editing, these are only shown when a table or image is selected. Unfortunately these do not get synchronized with selected RichEditControl, so I can only use them for the first control.

This is the auto generated XAML code for the picture editing pages:

Ribbon:

                <dxr:RibbonPageCategory x:Name="catPictureTools"
                                        Caption="{Binding ConverterParameter=Caption_PageCategoryFloatingObjectPictureTools, Converter={StaticResource stringIdConverter}, Mode=OneTime, Source={StaticResource stringIdConverter}}"
                                        dxre:AttachedCommand.Command="{Binding ToolsFloatingPictureCommandGroup, Mode=OneTime, Source={StaticResource commands}}">
                    <dxr:RibbonPage x:Name="pagePictureToolsFormat"
                                    Caption="{Binding ConverterParameter=Caption_PageFloatingObjectPictureToolsFormat, Converter={StaticResource stringIdConverter}, Mode=OneTime, Source={StaticResource stringIdConverter}}">
                        <dxr:RibbonPageGroup x:Name="grpPictureToolsFormatShapeStyles"
                                             Caption="{Binding ConverterParameter=Caption_GroupFloatingPictureToolsShapeStyles, Converter={StaticResource stringIdConverter}, Mode=OneTime, Source={StaticResource stringIdConverter}}"
                                             ShowCaptionButton="False">
                            <dxr:RibbonPageGroup.ItemLinks>
                                <dxr:BarButtonGroupLink BarItemName="biShapeColors" />
                                <dxr:BarButtonGroupLink BarItemName="biShapeOutlineWeight" />
                            </dxr:RibbonPageGroup.ItemLinks>
                        </dxr:RibbonPageGroup>
                        <dxr:RibbonPageGroup x:Name="grpPictureToolsFormatArrange"
                                             Caption="{Binding ConverterParameter=Caption_GroupFloatingPictureToolsArrange, Converter={StaticResource stringIdConverter}, Mode=OneTime, Source={StaticResource stringIdConverter}}"
                                             ShowCaptionButton="False">
                            <dxr:RibbonPageGroup.ItemLinks>
                                <dxb:BarSubItemLink BarItemName="biPictureWrapText" />
                                <dxb:BarSubItemLink BarItemName="biPicturePosition" />
                                <dxb:BarSubItemLink BarItemName="biPictureBringForwardPlaceholder" />
                                <dxb:BarSubItemLink BarItemName="biPictureSendBackwardPlaceholder" />
                            </dxr:RibbonPageGroup.ItemLinks>
                        </dxr:RibbonPageGroup>
                    </dxr:RibbonPage>
                </dxr:RibbonPageCategory>

BarItems:

            <dxr:BarButtonGroup x:Name="biShapeColors">
                <dxr:BarButtonGroup.ItemLinks>
                    <dxre:BarSplitButtonColorEditItemLink BarItemName="biPictureShapeFillColor" />
                    <dxre:BarSplitButtonColorEditItemLink BarItemName="biPictureShapeOutlineColor" />
                </dxr:BarButtonGroup.ItemLinks>
            </dxr:BarButtonGroup>
            <dxre:BarSplitButtonColorEditItem x:Name="biPictureShapeFillColor"
                                              Command="{Binding PictureShapeFillColor, Mode=OneTime, Source={StaticResource commands}}">
                <dxb:PopupControlContainerInfo>
                    <dxe:ColorEdit EditValue="{Binding EditValue, ElementName=biPictureShapeFillColor, Mode=TwoWay}"
                                   ShowDefaultColorButton="False"
                                   ShowNoColorButton="True"
                                   ShowBorder="False" />
                </dxb:PopupControlContainerInfo>
            </dxre:BarSplitButtonColorEditItem>
            <dxre:BarSplitButtonColorEditItem x:Name="biPictureShapeOutlineColor"
                                              Command="{Binding PictureShapeOutlineColor, Mode=OneTime, Source={StaticResource commands}}">
                <dxb:PopupControlContainerInfo>
                    <dxe:ColorEdit EditValue="{Binding EditValue, ElementName=biPictureShapeOutlineColor, Mode=TwoWay}"
                                   ShowDefaultColorButton="False"
                                   ShowNoColorButton="True"
                                   ShowBorder="False" />
                </dxb:PopupControlContainerInfo>
            </dxre:BarSplitButtonColorEditItem>
            <dxr:BarButtonGroup x:Name="biShapeOutlineWeight">
                <dxr:BarButtonGroup.ItemLinks>
                    <dxb:BarEditItemLink BarItemName="biPictureShapeOutlineWeight" />
                </dxr:BarButtonGroup.ItemLinks>
            </dxr:BarButtonGroup>
            <dxb:BarEditItem x:Name="biPictureShapeOutlineWeight"
                             Content=""
                             Command="{Binding PictureShapeOutlineWeight, Mode=OneTime, Source={StaticResource commands}}"
                             EditWidth="150">
                <dxb:BarEditItem.EditSettings>
                    <dxre:RichEditBorderLineWidthEditSettings RichEditControl="{Binding ElementName=richEditControl1}" />
                </dxb:BarEditItem.EditSettings>
            </dxb:BarEditItem>
            <dxb:BarSubItem x:Name="biPictureWrapText"
                            Command="{Binding PictureWrapText, Mode=OneTime, Source={StaticResource commands}}">
                <dxb:BarSubItem.ItemLinks>
                    <dxb:BarCheckItemLink BarItemName="biPictureWrapTextSquare" />
                    <dxb:BarCheckItemLink BarItemName="biPictureWrapTextTight" />
                    <dxb:BarCheckItemLink BarItemName="biPictureWrapTextThrough" />
                    <dxb:BarCheckItemLink BarItemName="biPictureWrapTextTopAndBottom" />
                    <dxb:BarCheckItemLink BarItemName="biPictureWrapTextBehind" />
                    <dxb:BarCheckItemLink BarItemName="biPictureWrapTextInFrontOf" />
                </dxb:BarSubItem.ItemLinks>
            </dxb:BarSubItem>
            <dxb:BarCheckItem x:Name="biPictureWrapTextSquare"
                              Command="{Binding PictureWrapTextSquare, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarCheckItem x:Name="biPictureWrapTextTight"
                              Command="{Binding PictureWrapTextTight, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarCheckItem x:Name="biPictureWrapTextThrough"
                              Command="{Binding PictureWrapTextThrough, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarCheckItem x:Name="biPictureWrapTextTopAndBottom"
                              Command="{Binding PictureWrapTextTopAndBottom, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarCheckItem x:Name="biPictureWrapTextBehind"
                              Command="{Binding PictureWrapTextBehind, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarCheckItem x:Name="biPictureWrapTextInFrontOf"
                              Command="{Binding PictureWrapTextInFrontOf, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarSubItem x:Name="biPicturePosition"
                            Command="{Binding PicturePosition, Mode=OneTime, Source={StaticResource commands}}">
                <dxb:BarSubItem.ItemLinks>
                    <dxb:BarButtonItemLink BarItemName="biPictureTopLeftAlignment" />
                    <dxb:BarButtonItemLink BarItemName="biPictureTopCenterAlignment" />
                    <dxb:BarButtonItemLink BarItemName="biPictureTopRightAlignment" />
                    <dxb:BarButtonItemLink BarItemName="biPictureMiddleLeftAlignment" />
                    <dxb:BarButtonItemLink BarItemName="biPictureMiddleCenterAlignment" />
                    <dxb:BarButtonItemLink BarItemName="biPictureMiddleRightAlignment" />
                    <dxb:BarButtonItemLink BarItemName="biPictureBottomLeftAlignment" />
                    <dxb:BarButtonItemLink BarItemName="biPictureBottomCenterAlignment" />
                    <dxb:BarButtonItemLink BarItemName="biPictureBottomRightAlignment" />
                </dxb:BarSubItem.ItemLinks>
            </dxb:BarSubItem>
            <dxb:BarButtonItem x:Name="biPictureTopLeftAlignment"
                               Command="{Binding PictureTopLeftAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureTopCenterAlignment"
                               Command="{Binding PictureTopCenterAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureTopRightAlignment"
                               Command="{Binding PictureTopRightAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureMiddleLeftAlignment"
                               Command="{Binding PictureMiddleLeftAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureMiddleCenterAlignment"
                               Command="{Binding PictureMiddleCenterAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureMiddleRightAlignment"
                               Command="{Binding PictureMiddleRightAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureBottomLeftAlignment"
                               Command="{Binding PictureBottomLeftAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureBottomCenterAlignment"
                               Command="{Binding PictureBottomCenterAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureBottomRightAlignment"
                               Command="{Binding PictureBottomRightAlignment, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarSubItem x:Name="biPictureBringForwardPlaceholder"
                            Command="{Binding PictureBringForwardPlaceholder, Mode=OneTime, Source={StaticResource commands}}">
                <dxb:BarSubItem.ItemLinks>
                    <dxb:BarButtonItemLink BarItemName="biPictureBringForward" />
                    <dxb:BarButtonItemLink BarItemName="biPictureBringToFront" />
                    <dxb:BarButtonItemLink BarItemName="biPictureBringInFrontOfText" />
                </dxb:BarSubItem.ItemLinks>
            </dxb:BarSubItem>
            <dxb:BarButtonItem x:Name="biPictureBringForward"
                               Command="{Binding PictureBringForward, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureBringToFront"
                               Command="{Binding PictureBringToFront, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureBringInFrontOfText"
                               Command="{Binding PictureBringInFrontOfText, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarSubItem x:Name="biPictureSendBackwardPlaceholder"
                            Command="{Binding PictureSendBackwardPlaceholder, Mode=OneTime, Source={StaticResource commands}}">
                <dxb:BarSubItem.ItemLinks>
                    <dxb:BarButtonItemLink BarItemName="biPictureSendBackward" />
                    <dxb:BarButtonItemLink BarItemName="biPictureSendToBack" />
                    <dxb:BarButtonItemLink BarItemName="biPictureSendBehindText" />
                </dxb:BarSubItem.ItemLinks>
            </dxb:BarSubItem>
            <dxb:BarButtonItem x:Name="biPictureSendBackward"
                               Command="{Binding PictureSendBackward, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureSendToBack"
                               Command="{Binding PictureSendToBack, Mode=OneTime, Source={StaticResource commands}}" />
            <dxb:BarButtonItem x:Name="biPictureSendBehindText"
                               Command="{Binding PictureSendBehindText, Mode=OneTime, Source={StaticResource commands}}" />

Answer 1

Looks like I have found an answer. When I asked my question I hadn't done steps 5 and 6 yet. Also code was missing in the code-behind.

If you want to have multiple RichEditControls with one ribbon, follow these steps:

1. Add one RichEditControl (e.g. with drag and drop from the toolbox)
2. Autogenerate your Ribbon:
   • In the designer click on the button in top right corner (1)
   • Select one ribbon page or all (2)
   • Autogenerate it by clicking on the blue text (3) Do this multiple times to generate more pages
3. Add your second RichEditControl
4. Now add a RichEditControlProvider somewhere in your xaml-code.
5. Use the Visual Studio replace function (CTRL+H) to replace all Binding ElementName=richEditControl1 with Binding Path=RichEditControl, ElementName=richEditControlProvider1 or whatever your first RichEditControl and your RichEditControlProvider are called.
6. Clear the BarManager and Ribbon properties of your richEditControl1.

7. Code-Behind:

   public MyView()
   {
       InitializeComponent();
       richEditControl1.GotFocus += RichEditControl1OnGotFocus;
       richEditControl2.GotFocus += RichEditControl2OnGotFocus;
       RichEditControl1OnGotFocus(null, null);
   }
   
   
   private void RichEditControl1OnGotFocus(object sender, RoutedEventArgs routedEventArgs)
   {
       richEditControlProvider1.RichEditControl = richEditControl1;
       richEditControl1.Ribbon = ribbonControl1;
       richEditControl2.Ribbon = null;
       richEditControl1.BarManager = barManager1;
       richEditControl2.BarManager = null;
   }
   
   
   private void RichEditControl2OnGotFocus(object sender, RoutedEventArgs routedEventArgs)
   {
       richEditControlProvider1.RichEditControl = richEditControl2;
       richEditControl1.Ribbon = null;
       richEditControl2.Ribbon = ribbonControl1;
       richEditControl1.BarManager = null;
       richEditControl2.BarManager = barManager1;
   }