SfRichTextBoxAdv ribbon (SfRichTextRibbon) doesn't work as expected

[sally an]

Hi I am using sample code for SfRichTextBoxAdv/SfRichTextRibbon, the ribbon has issues:

1. Tool bar font options not working (the font family drop down is empty, highlight text and try to change font size/color etc does not work) - but the context menu in document does work

2. in office2013 visual style file menu doesn't work

3. if cursor is not focused in document, file open doesn't work

Below is my xaml. Please advise, thanks.

<DockPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Column="0">

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <Syncfusion:SfRichTextRibbon x:Name="richTextRibbon" />

                <Syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv" Background="#F1F1F1" Grid.Row="1" ></Syncfusion:SfRichTextBoxAdv>

            </Grid>

        </DockPanel>

        <DockPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Column="1">

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <Syncfusion:SfRichTextRibbon x:Name="richTextRibbon2" Syncfusion:SkinStorage.VisualStyle="Office2013"/>

                <Syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAd2" Background="#F1F1F1" Grid.Row="1" ></Syncfusion:SfRichTextBoxAdv>

            </Grid>

        </DockPanel> 

[Premkumar Sundaramoorthy]

Hi Sally,

Thanks for using Syncfusion products.

On analyzing the provided code you have missed to bind SfRichTextBoxAdv with SfRichTexRibbon. So, as we mentioned in help documentation bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon. To make the interaction between these two controls. 

<Syncfusion:SfRichTextRibbon x:Name="richTextRibbon SnapsToDevicePixels="True" DataContext="{Binding ElementName=richTextBoxAdv}" /> 

Note:
Prefer using SfRichTextRibbon within RibbonWindow in your application, since the backstage of Ribbon will be opened only when the ribbon is loaded under the RibbonWindow.

Also, we have created a sample to demonstrate the same, which can be downloaded from the following location.
https://www.syncfusion.com/downloads/support/forum/158309/ze/GettingStarted_RTE201720220

https://help.syncfusion.com/wpf/richtextbox/getting-started#creating-document-editor-with-ribbon

Please let us know if you have any other questions.

Regards,
Premkumar 

[sally an]

thanks for fast response!

I still have 2 issues regarding this:

1. in office2013 style, the file menu still doesn't work; I expect it to dropdown and show open/save etc menu, but right now clicking it hides Home/Insert etc tab on ribbon

2. I have 2 sets of ribbon/richtexteditor in my app, the 1st one is not office 2013 so the file menu works, but when I open file from this menu, the file appears in second editor (the 2013 style). I have updated code as you suggested as below.

Could you please advise? thanks.

<DockPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Column="0">

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <Syncfusion:SfRichTextRibbon x:Name="richTextRibbon"  SnapsToDevicePixels="True" DataContext="{Binding ElementName=richTextBoxAdv}"/>

                <Syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv" Background="#F1F1F1" Grid.Row="1" ></Syncfusion:SfRichTextBoxAdv>

            </Grid>

        </DockPanel>

        <DockPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Column="1">

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <Syncfusion:SfRichTextRibbon x:Name="richTextRibbon2" SnapsToDevicePixels="True" 

                                             DataContext="{Binding ElementName=richTextBoxAd2}" Syncfusion:SkinStorage.VisualStyle="Office2013"/>

                <Syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAd2" Background="#F1F1F1" Grid.Row="1" Syncfusion:SkinStorage.VisualStyle="Office2013"></Syncfusion:SfRichTextBoxAdv>

            </Grid>

        </DockPanel>

[Premkumar Sundaramoorthy]

Hi Sally,

Thanks for your update,

As we suggested before prefer using SfRichTextRibbon within RibbonWindow in your application, since the backstage (file menu) of Ribbon will be opened properly only when the ribbon is loaded under the RibbonWindow.

And regarding the file opening issue, file will be loaded to control which has the focus currently when more then one control is present. If you load document by place the cursor in second control, then the document will be loading in second control. So, please check the focus before you load the document.

Please let us know if you need any further assistance,

Regards,
Premkumar 

[sally an]

Thanks for reply!

I updated code to have only one sfRichTextBox, the focus issue is gone.

But I already used RibbonWindow, and File menu in Office2013 style still doesn't behave correctly, below is my code, please advise, thanks a lot.

<Syncfusion:RibbonWindow x:Class="RichTextEditorDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"

        xmlns:Syncfusion="http://schemas.syncfusion.com/wpf"

        Title="MainWindow" Height="350" Width="525" 

        >

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="100"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

            <RowDefinition Height="30"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <DockPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Column="0">

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <Syncfusion:SfRichTextRibbon x:Name="richTextRibbon"  SnapsToDevicePixels="True" DataContext="{Binding ElementName=richTextBoxAdv}"

                                             Syncfusion:SkinStorage.VisualStyle="Office2013"/>

                <Syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv" Background="#F1F1F1" Grid.Row="1"

                                             Syncfusion:SkinStorage.VisualStyle="Office2013"></Syncfusion:SfRichTextBoxAdv>

            </Grid>

        </DockPanel>

        <DockPanel Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1">

                <TextBox />

        </DockPanel>

        <StackPanel Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Orientation="Horizontal">

            <Button Content="SaveBlob" Click="SaveBlob"></Button>

            <Button Content="LoadBlob" Click="LoadBlob"></Button>

        </StackPanel>

    </Grid>

</Syncfusion:RibbonWindow>

[Premkumar Sundaramoorthy]

Hi Sally,

Thanks for your update,

Please apply Office2013 theme to Ribbonwindow instead of assigning it for SfRichTextBoxAdv and SfRichTextRibbon. Please find the below code example for more details.

 

<Syncfusion:RibbonWindow x:Class="GettingStarted_RTE.MainWindow" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

        xmlns:local="clr-namespace:GettingStarted_RTE" 

        mc:Ignorable="d" 

        Title="MainWindow" Height="450" Width="800" 

        xmlns:Syncfusion="http://schemas.syncfusion.com/wpf" 

                         Syncfusion:SkinStorage.VisualStyle="Office2013"> 

 

    <Grid> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="100"></RowDefinition> 

            <RowDefinition Height="*"></RowDefinition> 

            <RowDefinition Height="30"></RowDefinition> 

        </Grid.RowDefinitions> 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition Width="*"></ColumnDefinition> 

            <ColumnDefinition Width="*"></ColumnDefinition> 

        </Grid.ColumnDefinitions> 

        <DockPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Column="0"> 

            <Grid> 

                <Grid.RowDefinitions> 

                    <RowDefinition Height="Auto"/> 

                    <RowDefinition Height="*"/> 

                </Grid.RowDefinitions> 

                <Syncfusion:SfRichTextRibbon x:Name="richTextRibbon"  SnapsToDevicePixels="True" DataContext="{Binding ElementName=richTextBoxAdv}" 

                                             /> 

                <Syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv" Background="#F1F1F1" Grid.Row="1" 

                                             ></Syncfusion:SfRichTextBoxAdv> 

            </Grid> 

        </DockPanel> 

        <DockPanel Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1"> 

            <TextBox /> 

        </DockPanel> 

    </Grid> 

</Syncfusion:RibbonWindow> 

Please let us know if you need any further assistance.

Regards,
Premkumar 

[sally an]

thank you very much! I am all set now!