This is a migrated thread and some comments may be shown as answers.

black border line on top

6 Answers 188 Views

RichTextBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

CarlosLima asked on 16 Jul 2010, 08:02 PM

Hi,

I have one RadRichTextBox with one RadRichTextBoxRibbonUI. The Title and the Application menu is hidden, and i only have the RadRibbonTab visible. The main problem is there is a black line on top of the RadRichTextBoxRibbonUI.
The RadRichTextBoxRibbonUI declaration is:

<UserControl x:Class="GenericComponentSample.MainPage"

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:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:telerikRuler="clr-namespace:Telerik.Windows.Documents.UI.Ruler;assembly=Telerik.Windows.Documents"

xmlns:telerikRibbonBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonBar">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="10"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<telerik:RadRichTextBoxRibbonUI Grid.Row="1" Name="radRichTextBoxRibbonUI1" Background="Transparent" DataContext="{Binding ElementName=txta}" ApplicationButtonVisibility="Collapsed" ApplicationName="Something" TitleBarVisibility="Collapsed" IsMinimized="True">

<telerikRibbonBar:RadRibbonTab Header="Tools">

<telerikRibbonBar:RadRibbonGroup Header="Clipboard">

<telerikRibbonBar:RadRibbonGroup.Variants>

<telerikRibbonBar:GroupVariant Priority="0" Variant="Medium" />

</telerikRibbonBar:RadRibbonGroup.Variants>

<StackPanel>

<StackPanel Orientation="Horizontal">

<telerikRibbonBar:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=CutCommand}" Size="Medium" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/cut.png" Text="Cut" />

<telerikRibbonBar:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=CopyCommand}" Size="Medium" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/copy.png" Text="Copy" />

<telerikRibbonBar:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=PasteCommand}" Size="Medium" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/paste.png" Text="Paste" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<telerikRibbonBar:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=SaveCommand}" Size="Medium" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/save.png" Text="Save" />

<telerikRibbonBar:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=UndoCommand}" Size="Medium" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/undo.png" Text="Undo" />

<telerikRibbonBar:RadRibbonButton CollapseToSmall="WhenGroupIsMedium" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=RedoCommand}" Size="Medium" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/redo.png" Text="Redo" />

</StackPanel>

</telerikRibbonBar:RadRibbonGroup>

<telerikRibbonBar:RadRibbonGroup Header="Font">

<telerikRibbonBar:RadRibbonGroup.Variants>

<telerikRibbonBar:GroupVariant Priority="2" Variant="Medium" />

<telerikRibbonBar:GroupVariant Priority="4" Variant="Small" />

<telerikRibbonBar:GroupVariant Priority="5" Variant="Collapsed" />

</telerikRibbonBar:RadRibbonGroup.Variants>

<telerikRibbonBar:RadOrderedWrapPanel>

<StackPanel Orientation="Horizontal">

<telerikRibbonBar:RadRibbonComboBox CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem}" Height="21" IsEditable="True" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontFamilyCommand}" Width="135">

<telerikRibbonBar:RadRibbonComboBoxItem Content="Arial" FontFamily="Arial" Tag="Arial" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Arial Black" FontFamily="Arial Black" Tag="Arial Black" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Calibri" FontFamily="Calibri" Tag="Calibri" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Comic Sans MS" FontFamily="Comic Sans MS" Tag="Comic Sans MS" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Courier New" FontFamily="Courier New" Tag="Courier New" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Georgia" FontFamily="Georgia" Tag="Georgia" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Lucida Sans Unicode" FontFamily="Lucida Sans Unicode" Tag="Lucida Sans Unicode" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Times New Roman" FontFamily="Times New Roman" Tag="Times New Roman" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Trebuchet MS" FontFamily="Trebuchet MS" Tag="Trebuchet MS" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="Verdana" FontFamily="Verdana" Tag="Verdana" />

</telerikRibbonBar:RadRibbonComboBox>

<telerikRibbonBar:RadRibbonComboBox CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Tag}" Height="21" IsEditable="True" IsReadOnly="True" IsTextSearchEnabled="False" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontSizeCommand}" Width="45">

<telerikRibbonBar:RadRibbonComboBoxItem Content="8" Tag="10.67" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="9" Tag="12" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="10" Tag="13.33" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="11" Tag="14.67" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="12" Tag="16" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="14" Tag="18.67" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="16" Tag="21.33" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="18" Tag="24" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="20" Tag="26.67" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="22" Tag="29.33" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="24" Tag="32" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="26" Tag="34.67" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="28" Tag="37.33" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="36" Tag="48" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="48" Tag="64" />

<telerikRibbonBar:RadRibbonComboBoxItem Content="72" Tag="96" />

</telerikRibbonBar:RadRibbonComboBox>

</StackPanel>

<telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=IncrementFontSizeCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/font-increasesize.png" />

<telerikRibbonBar:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=DecrementFontSizeCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/font-decreasesize.png" />

</telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ClearFormattingCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/ClearFormatting16.png" />

</telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleBoldCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/bold.png" />

<telerikRibbonBar:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleItalicCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/italic.png" />

<telerikRibbonBar:RadRibbonSplitButton IsToggle="True" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleUnderlineCommand}" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/underline.png">

<telerikRibbonBar:RadRibbonSplitButton.DropDownContent>

<telerikRibbonBar:RadGallery ItemHeight="26" ItemWidth="156" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeUnderlineDecorationCommand}" ViewportHeight="210" ViewportWidth="157">

<telerikRibbonBar:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline1.png" Tag="Line" />

<telerikRibbonBar:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline2.png" Tag="DoubleLine" />

<telerikRibbonBar:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline3.png" Tag="ThickLine" />

<telerikRibbonBar:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline4.png" Tag="DottedLine" />

<telerikRibbonBar:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline5.png" Tag="DashedLine" />

<telerikRibbonBar:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline6.png" Tag="DotDashedLine" />

<telerikRibbonBar:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline7.png" Tag="DotDotDashedLine" />

<telerikRibbonBar:RadGalleryItem Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/underline8.png" Tag="Wave" />

</telerikRibbonBar:RadGallery>

</telerikRibbonBar:RadRibbonSplitButton.DropDownContent>

</telerikRibbonBar:RadRibbonSplitButton>

<telerikRibbonBar:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleStrikethroughCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/Strikethrough16.png" />

<telerikRibbonBar:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleSubscriptCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/subscript.png" />

<telerikRibbonBar:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleSuperscriptCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/superscript.png" />

</telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadRibbonSplitButton CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=DropDownContent.SelectedColor}" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontHighlightColorCommand}">

<telerikRibbonBar:RadRibbonSplitButton.DropDownContent>

<telerik:RadColorSelector Name="highlightColorSelector" NoColorVisibility="Collapsed" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontHighlightColorCommand}" SelectedColor="Yellow" />

</telerikRibbonBar:RadRibbonSplitButton.DropDownContent>

<Grid>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/highlight.png" Stretch="None" />

<Rectangle Height="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">

<Rectangle.Fill>

<SolidColorBrush Color="{Binding Path=SelectedColor, ElementName=highlightColorSelector}" />

</Rectangle.Fill>

</Rectangle>

</Grid>

</telerikRibbonBar:RadRibbonSplitButton>

<telerikRibbonBar:RadRibbonSplitButton.DropDownContent>

<telerik:RadColorSelector Name="foreColorSelector" NoColorVisibility="Collapsed" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontForeColorCommand}" SelectedColor="Red" />

</telerikRibbonBar:RadRibbonSplitButton.DropDownContent>

<Grid>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/fontcolor.png" Stretch="None" />

<Rectangle Height="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">

<Rectangle.Fill>

<SolidColorBrush Color="{Binding Path=SelectedColor, ElementName=foreColorSelector}" />

</Rectangle.Fill>

</Rectangle>

</Grid>

</telerikRibbonBar:RadRibbonSplitButton>

</telerikRibbonBar:RadButtonGroup>

</telerikRibbonBar:RadOrderedWrapPanel>

</telerikRibbonBar:RadRibbonGroup>

<telerikRibbonBar:RadRibbonGroup DialogLauncherVisibility="Visible" Header="Paragraph" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ShowParagraphPropertiesDialogCommand}">

<telerikRibbonBar:RadRibbonGroup.Variants>

<telerikRibbonBar:GroupVariant Priority="1" Variant="Medium" />

<telerikRibbonBar:GroupVariant Priority="3" Variant="Collapsed" />

</telerikRibbonBar:RadRibbonGroup.Variants>

<telerikRibbonBar:RadOrderedWrapPanel>

<telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleBulletsCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-bullets.png" />

<telerikRibbonBar:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleNumberedCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-numbered.png" />

</telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=DecrementParagraphLeftIndentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/outdent.png" />

<telerikRibbonBar:RadRibbonButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=IncrementParagraphLeftIndentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/indent.png" />

</telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadRibbonToggleButton telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleFormattingSymbolsCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/formatting-symbols.png" />

</telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadButtonGroup>

<telerikRibbonBar:RadRibbonToggleButton CommandParameter="Left" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeTextAlignmentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignleft.png" Text="Align Left" />

<telerikRibbonBar:RadRibbonToggleButton CommandParameter="Center" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeTextAlignmentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/aligncenter.png" Text="Center" />

<telerikRibbonBar:RadRibbonToggleButton CommandParameter="Right" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeTextAlignmentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignright.png" Text="Align Right" />

<telerikRibbonBar:RadRibbonToggleButton CommandParameter="Justify" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeTextAlignmentCommand}" Size="Small" SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/alignjustify.png" Text="Justify" />

</telerikRibbonBar:RadButtonGroup>

</telerikRibbonBar:RadOrderedWrapPanel>

</telerikRibbonBar:RadRibbonGroup>

</telerikRibbonBar:RadRibbonTab>

</telerik:RadRichTextBoxRibbonUI>

<telerik:RadRichTextBox Grid.Row="2" Margin="10" x:Name="txta"/>

</Grid>

</UserControl>

How can i take this line out?

By the way, how can i put the "button" "Tools" with other color instead of white?

Thank you!

6 Answers, 1 is accepted

answered on 19 Jul 2010, 03:45 PM

Hi David Petronzio,

This black line on the top comes from problem with RadRibbonBar control. This issue will be addressed in the next Latest Internal Build (and in Q2 SP1 in about three weeks).

If you need a solution immediately, as a quick workaround, you can manually collapse the rectangle that causes it. Here you can find it:

<telerik:RadRichTextBoxRibbonUI Name="radRichTextBoxRibbonUI1" LayoutUpdated="radRichTextBoxRibbonUI1_LayoutUpdated" ...

private void radRichTextBoxRibbonUI1_LayoutUpdated(object sender, EventArgs e)

{

Grid grid = (Grid)VisualTreeHelper.GetChild(radRichTextBoxRibbonUI1, 0);

Rectangle rectangle = (Rectangle)VisualTreeHelper.GetChild(grid, 2);

rectangle.Visibility = Visibility.Collapsed;

}

Note that the code above depends on the internal control structure and may stop working with new versions of controls, if the design changes.

Regarding changing the color of RadRibbonGroup header, you have two options:

Set Header property of RadRibbonGroup with content you want
Use one of built-in themes, as described here: Setting a Theme

All the best,
Bobby
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 19 Jul 2010, 06:46 PM

Hi,

Thanks for the reply, but this code give one error:

{System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values.

Parameter name: childIndex

at System.Windows.Media.VisualTreeHelper.GetChild(DependencyObject reference, Int32 childIndex)

at System.Windows.FrameworkElement.OnLayoutUpdated(Object sender, EventArgs e)

at MS.Internal.JoltHelper.RaiseEvent(IntPtr target, UInt32 eventId, IntPtr coreEventArgs, UInt32 eventArgsTypeIndex)}

One other thing, when i tried to put this radRichTextBox (the code i wrote in the other post) inside of a radwindow, with IsMinimized="True" in the RadRichTextBoxRibbonUI component, the radWindow will not open, gives a error.

answered on 21 Jul 2010, 03:31 PM

Hi David Petronzio,

Unfortunately we can't reproduce the ArgumentOutOfRangeException. It seems the event LayoutUpdated is fired earlier than Ribbon template is loaded. You may try executing the code in another event handler, like Ribbon.Loaded. If the problem persists please open a support ticket and send us sample code that demonstrates the problem.

Regarding the scenario with minimized RadRichTextBoxRibbonUI in RadWindow, there is an issue related to RadRibbonBar, which will be fixed in Q2 SP1 (scheduled in about three weeks). Thank you for reporting it, the points in your account have been updated.

Regards,
Bobby
the Telerik team

Accepted

answered on 23 Jul 2010, 01:23 PM

radcontrolssilverlightapp-328975.rar

Hi David Petronzio,

Only the fix regarding RadWindow will be available in the next LIB.

Black border issue will be fixed in Q2 SP1. Anyway, I am attaching you a sample that demonstrates the workaround for it. I hope this will resolve the issue for now.

Any other feedback will be highly appreciated.

Sincerely yours,
Boby
the Telerik team