RadToolBar binding to RichTextBox.Commands problem

[Jakub]

Hi,

I have simple RadToolBar with RadRibbonButtons mostly:

<UserControl
    x:Class="EditorToolBar"
    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:local="Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    d:DesignHeight="300"
    d:DesignWidth="300"
    mc:Ignorable="d">
    <telerik:RadToolBarTray DataContext="{Binding .}">
        <telerik:RadToolBarTray.Resources>
            <telerik:FontFamiliesProvider x:Key="FontFamiliesProvider" />
        </telerik:RadToolBarTray.Resources>

        <telerik:RadToolBar Height="32">
            <telerik:RadButtonGroup>
                <telerik:RadRibbonButton
                    Name="button"
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding PrintCommand}"
                    Size="Medium"
                    SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/ApplicationMenu/print.png" />
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ShowSpellCheckingDialogCommand}"
                    Size="Medium"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/EnableSpellCheck.png" />
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ShowFindReplaceDialogCommand}"
                    Size="Medium"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/Find.png"
                    Text="Find/Replace" />
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding CutCommand}"
                    CollapseToSmall="WhenGroupIsMedium"
                    Size="Medium"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/cut.png"
                    ToolTip="Cut" />
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding CopyCommand}"
                    CollapseToSmall="WhenGroupIsMedium"
                    Size="Medium"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/copy.png"
                    ToolTip="Copy" />
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding PasteCommand}"
                    CollapseToSmall="WhenGroupIsMedium"
                    Size="Medium"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/paste.png"
                    ToolTip="Paste" />
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding UndoCommand}"
                    Size="Small"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/undo.png"
                    Text="Undo" />
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding RedoCommand}"
                    Size="Small"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/redo.png"
                    Text="Redo" />
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadComboBox
                    x:Name="FontFamilySelector"
                    Width="132"
                    Height="21"
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontFamilyCommand}"
                    telerik:ScreenTip.Description="Change the font family."
                    telerik:ScreenTip.Title="Font"
                    CanAutocompleteSelectItems="False"
                    CanKeyboardNavigationSelectItems="False"
                    CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=SelectedValue}"
                    IsReadOnly="True"
                    OpenDropDownOnFocus="True" />
                <telerik:RadComboBox
                    x:Name="FontSizeSelector"
                    Width="45"
                    Height="21"
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontSizeCommand}"
                    CanAutocompleteSelectItems="False"
                    CanKeyboardNavigationSelectItems="False"
                    CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Tag}"
                    IsReadOnly="True"
                    IsTextSearchEnabled="False"
                    OpenDropDownOnFocus="True">
                    <telerik:RadRibbonComboBoxItem Content="12" Tag="16" />
                </telerik:RadComboBox>
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:FormattingColorPicker
                    x:Name="FontForeColorPicker"
                    Height="22"
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontForeColorCommand}"
                    ActiveColor="Red"
                    Image="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/FontForeColor.png" />
                <telerik:FormattingColorPicker
                    x:Name="FontHighlightColorPicker"
                    Height="22"
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontHighlightColorCommand}"
                    ActiveColor="Yellow"
                    AutomaticColor="Transparent"
                    Image="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/highlight.png"
                    NoColorText="No color" />
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ClearFormattingCommand}"
                    Size="Small"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/ClearFormatting16.png" />
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=InsertPictureCommand}"
                    Size="Medium"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/32/Picture.png" />
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ShowInsertHyperlinkDialogCommand}"
                    Size="Small"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/32/inserthyperlink.png" />
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadRibbonToggleButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleBoldCommand}"
                    Size="Small"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/bold.png" />
                <telerik:RadRibbonToggleButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleItalicCommand}"
                    Size="Small"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/italic.png" />
                <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleUnderlineCommand}" SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/underline.png" />
                <telerik:RadRibbonToggleButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleStrikethroughCommand}"
                    Size="Small"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/Strikethrough16.png" />
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadRibbonToggleButton CommandParameter="Left" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ChangeTextAlignmentCommand}" Size="Small" SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignleft.png" Text="Align Left" />
                <telerik:RadRibbonToggleButton CommandParameter="Center" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ChangeTextAlignmentCommand}" Size="Small" SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/aligncenter.png" Text="Center" />
                <telerik:RadRibbonToggleButton CommandParameter="Right" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ChangeTextAlignmentCommand}" Size="Small" SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignright.png" Text="Align Right" />
                <telerik:RadRibbonToggleButton CommandParameter="Justify" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ChangeTextAlignmentCommand}" Size="Small" SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignjustify.png" Text="Justify" />
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ToggleBulletsCommand}" Size="Small" SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-bullets.png" />
                <telerik:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ToggleNumberedCommand}" Size="Small" SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-numbered.png" />
                <telerik:RadRibbonDropDownButton Size="Small" SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/MultilevelList.png">
                    <telerik:RadRibbonDropDownButton.DropDownContent>
                        <StackPanel>
                            <telerik:RadGroupHeader Content="List Library" />
                            <telerik:RadGallery ItemHeight="88" ItemWidth="88" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ChangeListStyleCommand}" ViewportHeight="176" ViewportWidth="266">
                                <telerik:RadGalleryItem Image="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNone.png" Tag="None" />
                                <telerik:RadGalleryItem Image="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListBulleted.png" Tag="Bulleted" />
                                <telerik:RadGalleryItem Image="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumbered.png" Tag="Numbered" />
                                <telerik:RadGalleryItem Image="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumberedParenthesis.png" Tag="NumberedParenthesis" />
                                <telerik:RadGalleryItem Image="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/MultilevelListNumberedHierarchical.png" Tag="NumberedHierarchical" />
                            </telerik:RadGallery>
                        </StackPanel>
                    </telerik:RadRibbonDropDownButton.DropDownContent>
                </telerik:RadRibbonDropDownButton>
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadRibbonButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ShowInsertSymbolWindowCommand}"
                    LargeImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/32/Symbol.png"
                    Size="Large"
                    Text="Symbol" />
                <telerik:RadRibbonDropDownButton
                    CollapseToMedium="WhenGroupIsMedium"
                    Command="{Binding InsertTableCommand}"
                    LargeImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/32/InsertTable.png"
                    Size="Large"
                    Text="Insert">
                    <telerik:RadRibbonDropDownButton.DropDownContent>
                        <StackPanel>
                            <telerik:RadRibbonButton ClickMode="Press">
                                <telerik:TableSizePicker Command="{Binding InsertTableCommand}" />
                            </telerik:RadRibbonButton>
                            <telerik:RadMenuItem IsSeparator="True" />
                            <telerik:RadRibbonButton
                                HorizontalAlignment="Stretch"
                                telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ShowInsertTableDialogCommand}"
                                Size="Medium"
                                SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/InsertTable.png"
                                Text="Insert Table..." />
                        </StackPanel>
                    </telerik:RadRibbonDropDownButton.DropDownContent>
                </telerik:RadRibbonDropDownButton>
            </telerik:RadButtonGroup>
            <telerik:RadToolBarSeparator />
            <telerik:RadButtonGroup>
                <telerik:RadRibbonToggleButton
                    VerticalAlignment="Bottom"
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ToggleSubscriptCommand}"
                    Size="Small"
                    SmallImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/subscript.png" />
                <telerik:RadRibbonToggleButton
                    telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ToggleSuperscriptCommand}"
                    LargeImage="pack://application:,,,/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/superscript.png"
                    Size="Small" />
            </telerik:RadButtonGroup>
        </telerik:RadToolBar>
    </telerik:RadToolBarTray>
</UserControl>

 

Its task is to execute RichTextBox commands.

So I created a binding for commands property:

<local:EditorToolBar
            x:Name="DescEditorToolbar"
            Grid.Column="0"
            DataContext="{Binding ElementName=DescEditor, Path=Commands}" />

<telerik:RadRichTextBox
            x:Name="DescEditor"
            Grid.Row="2"
            Margin="1,2,0,0"
            telerik:XamlDataProvider.Source="{Binding Description, Mode=TwoWay}"
            BorderThickness="0"
            DocumentInheritsDefaultStyleSettings="True"
            FontFamily="Verdana"
            FontSize="16"
            IsImageMiniToolBarEnabled="False"
            IsSelectionMiniToolBarEnabled="False"
            IsSpellCheckingEnabled="False" LayoutMode="Paged"/>

 

At application start, property Description in ViewModel is filled with empty RadDocument xaml string and then user can edit it. It works fine, but for unknown reasons sometimes after application start, toolbar looks like it isn't binded to RichTextBox commands. Pressing Toolbar buttons doesn't change anything in edited Document. It looks like Toolbar and RichTextBox are not connected in any way.

 

Commands in RadRichTextBox are fine, because ctrl+z is working. Should I perform some refresh actions on Toolbar or something?

 

Thanks for any help,

Jakub.

[Peshito]

Hello Jakub,

I used your code to create a sample application reproducing the issue but to no avail. The bindings worked fine. Could you provide the exact steps to reproduce the issue? This will help in solving the problem.

Regards,
Peshito
Progress Telerik