他们说,一张图片值得千言万语。
我有一个名为RichTextBoxEditor
的自定义控件:
这是XAML:
<UserControl x:Class="WpfRichText.Ex.Controls.RichTextEditor" x:Name="uxRichTextEditor"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:asis="clr-namespace:WpfRichText.Ex.AttachedProperties">
<Grid >
<!-- Set the styles for the tool bar. -->
<Grid.Resources>
<Style TargetType="{x:Type Button}" x:Key="formatTextStyle">
<Setter Property="FontFamily" Value="Palatino Linotype"></Setter>
<Setter Property="Width" Value="30"></Setter>
<Setter Property="FontSize" Value ="14"></Setter>
<Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>
</Style>
<Style TargetType="{x:Type ToggleButton}" x:Key="formatTextStyle2">
<Setter Property="FontFamily" Value="Palatino Linotype"></Setter>
<Setter Property="Width" Value="30"></Setter>
<Setter Property="FontSize" Value ="14"></Setter>
<!--<Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>-->
</Style>
<Style TargetType="{x:Type Button}" x:Key="formatImageStyle">
<Setter Property="Width" Value="30"></Setter>
<!--<Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>-->
</Style>
</Grid.Resources>
<DockPanel Name="mainPanel">
<!-- This tool bar contains all the editing buttons. -->
<ToolBar Height="30" DockPanel.Dock="Top" ToolBarTray.IsLocked="True">
<Button Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleBold" ToolTip="Bold">
<TextBlock FontWeight="Bold">B</TextBlock>
</Button>
<Button Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleItalic" ToolTip="Italic">
<TextBlock FontStyle="Italic" FontWeight="Bold">I</TextBlock>
</Button>
<ToggleButton Style="{StaticResource formatTextStyle2}" x:Name="ToolStripButtonStrikeout" ToolTip="Strikethrough" Click="ToolStripButtonStrikeout_Click" Foreground="Black" Width="19" Height="19">
<ToggleButton.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/Strikeout.png"/>
</ToggleButton.Background>
</ToggleButton>
<Button x:Name="Tool_Link" Style="{StaticResource formatImageStyle}" ToolTip="Link" Click="Tool_Link_Click" Width="30" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/Link.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Spoiler" Style="{StaticResource formatImageStyle}" ToolTip="Spoiler" Width="30" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/Spoiler.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Image" Style="{StaticResource formatImageStyle}" ToolTip="Image" Height="19">
<Button.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/Images.png" Stretch="Uniform"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Video" Style="{StaticResource formatImageStyle}" ToolTip="Youtube video" Margin="0,1,0,-1" Height="19">
<Button.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/Video.png" Stretch="Uniform"/>
</Button.Background>
</Button>
<Button x:Name="Tool_ALeft" Style="{StaticResource formatImageStyle}" ToolTip="Align Left" Height="19" Width="30">
<Button.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/paragraphleftjustify.png" Stretch="Uniform"/>
</Button.Background>
</Button>
<Button x:Name="Tool_ACenter" Style="{StaticResource formatImageStyle}" ToolTip="Align Center" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/paragraphcenterjustify.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Header" Style="{StaticResource formatImageStyle}" ToolTip="Header" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/charactergrowfont.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Quote" Style="{StaticResource formatImageStyle}" ToolTip="Quote" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/quote.png"/>
</Button.Background>
</Button>
<Button x:Name="Tool_Code" Style="{StaticResource formatImageStyle}" ToolTip="Decrease Indent" Height="19">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="pack://siteoforigin:,,,/Resources/code.png"/>
</Button.Background>
</Button>
</ToolBar>
<StackPanel >
<RichTextBox Name="mainRTB" AcceptsTab="True" Height="160"
asis:RichTextboxAssistant.BoundDocument="{Binding Path=Text, ElementName=uxRichTextEditor}"
VerticalScrollBarVisibility="Visible" Width="365" />
<!--<TextBox Text="{Binding Path=Text, ElementName=uxRichTextEditor}" Height="25" />-->
</StackPanel>
</DockPanel>
</Grid>
这个控制最初来自网络,我忘记了它的位置。但后来我修改了它的一些组成部分。在Designer中它很好,但是当我把它放在主窗口上时,它看起来像这样:
以下是一些可能有用的信息:
提前致谢:)
修改
这是原始的XAML:
<UserControl
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:RTFEditor="clr-namespace:RTFEditor"
mc:Ignorable="d"
x:Class="RTFEditor.RTFBox"
x:Name="RTFEditor"
d:DesignWidth="600" d:DesignHeight="600" Loaded="RTFEditor_Loaded">
<UserControl.Resources>
<ObjectDataProvider x:Key="FontListKlasse" d:IsDataSource="True" ObjectType="{x:Type RTFEditor:FontList}"/>
<ObjectDataProvider x:Key="FontHeightKlasse" d:IsDataSource="True" ObjectType="{x:Type RTFEditor:FontHeight}"/>
</UserControl.Resources>
<DockPanel>
<ToolBar x:Name="ToolBarOben" DockPanel.Dock="Top">
<Button x:Name="ToolStripButtonOpen" Click="ToolStripButtonOpen_Click">
<Image Source="Images\Open.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonPrint" Click="ToolStripButtonPrint_Click">
<Image Source="Images\Print.png" Stretch="None"/>
</Button>
<Separator/>
<Button x:Name="ToolStripButtonCut" Command="ApplicationCommands.Cut" ToolTip="Cut">
<Image Source="Images\Cut.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonCopy" Command="ApplicationCommands.Copy" ToolTip="Copy">
<Image Source="Images\Copy.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonPaste" Command="ApplicationCommands.Paste" ToolTip="Paste">
<Image Source="Images\Paste.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonUndo" Command="ApplicationCommands.Undo" ToolTip="Undo">
<Image Source="Images\Undo.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonRedo" Command="ApplicationCommands.Redo" ToolTip="Redo">
<Image Source="Images\Redo.png" Stretch="None"/>
</Button>
<Separator/>
<ComboBox x:Name="Fonttype" ItemsSource="{Binding Mode=OneWay, Source={StaticResource FontListKlasse}}" DropDownClosed="Fonttype_DropDownClosed" />
<ComboBox x:Name="Fontheight" ItemsSource="{Binding Mode=OneWay, Source={StaticResource FontHeightKlasse}}" DropDownClosed="Fontheight_DropDownClosed" />
</ToolBar>
<ToolBar x:Name="ToolBarUnten" DockPanel.Dock="Top">
<ToggleButton x:Name="ToolStripButtonBold" Command="EditingCommands.ToggleBold" ToolTip="Bold">
<Image Source="Images\Bold.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonItalic" Command="EditingCommands.ToggleItalic" ToolTip="Italic">
<Image Source="Images\Italic.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonUnderline" Command="EditingCommands.ToggleUnderline" ToolTip="Underline">
<Image Source="Images\Underline.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonStrikeout" ToolTip="Strikeout" Click="ToolStripButtonStrikeout_Click">
<Image Source="Images\Strikeout.png" Stretch="None"/>
</ToggleButton>
<Separator/>
<Button x:Name="ToolStripButtonTextcolor" Click="ToolStripButtonTextcolor_Click">
<Image Source="Images\Textcolor.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonBackcolor" Click="ToolStripButtonBackcolor_Click">
<Image Source="Images\Backcolor.png" Stretch="None"/>
</Button>
<Separator/>
<ToggleButton x:Name="ToolStripButtonAlignLeft" Command="EditingCommands.AlignLeft" ToolTip="Align Left" Click="ToolStripButtonAlignLeft_Click">
<Image Source="Images\AlignLeft.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonAlignCenter" Command="EditingCommands.AlignCenter" ToolTip="Align Center" Click="ToolStripButtonAlignCenter_Click">
<Image Source="Images\AlignCenter.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonAlignRight" Command="EditingCommands.AlignRight" ToolTip="Align Right" Click="ToolStripButtonAlignRight_Click">
<Image Source="Images\AlignRight.png" Stretch="None"/>
</ToggleButton>
<Separator/>
<Button x:Name="ToolStripButtonBulletList" Command="EditingCommands.ToggleBullets" ToolTip="Bullets">
<Image Source="Images\BulletList.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonNumbersList" Command="EditingCommands.ToggleNumbering" ToolTip="Numbers">
<Image Source="Images\NumbersList.png" Stretch="None"/>
</Button>
<Separator/>
<Button x:Name="ToolStripButtonIndent" Command="EditingCommands.IncreaseIndentation" ToolTip="Increase Indent">
<Image Source="Images\Indent.png" Stretch="None"/>
</Button>
<Button x:Name="ToolStripButtonIndentDelete" Command="EditingCommands.DecreaseIndentation" ToolTip="Decrease Indent">
<Image Source="Images\IndentRemove.png" Stretch="None"/>
</Button>
<Separator/>
<ToggleButton x:Name="ToolStripButtonSubscript" ToolTip="Subscript" Click="ToolStripButtonSubscript_Click">
<Image Source="Images\Subscript.png" Stretch="None"/>
</ToggleButton>
<ToggleButton x:Name="ToolStripButtonSuperscript" ToolTip="Superscript" Click="ToolStripButtonSuperscript_Click">
<Image Source="Images\Superscript.png" Stretch="None"/>
</ToggleButton>
</ToolBar>
<StatusBar x:Name="StatusBar" DockPanel.Dock="Bottom">
<StatusBarItem>
<Label x:Name="LabelZeileNr" Content="ZeileNr" BorderThickness="1" BorderBrush="DarkGray" />
</StatusBarItem>
<StatusBarItem >
<Label x:Name="LabelSpalteNr" Content="SpalteNr" BorderThickness="1" BorderBrush="DarkGray"/>
</StatusBarItem>
<StatusBarItem>
<Label x:Name="LabelEinfg" Content="Einfg" BorderThickness="1" BorderBrush="DarkGray" />
</StatusBarItem>
<StatusBarItem DockPanel.Dock="Right" Width="100">
<Slider x:Name="SliderZoom" Grid.Column="1" Width="100" Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10" Value="1" Delay="100" Interval="5" TickPlacement="BottomRight" Minimum="1" Maximum="10" ValueChanged="SliderZoom_ValueChanged" HorizontalContentAlignment="Left" />
</StatusBarItem>
</StatusBar>
<RichTextBox x:Name="RichTextControl" SpellCheck.IsEnabled="True" VerticalScrollBarVisibility="Auto" AcceptsReturn="True" AcceptsTab="True" SelectionChanged="RichTextControl_SelectionChanged" TextChanged="RichTextControl_TextChanged" KeyDown="RichTextControl_KeyDown" KeyUp="RichTextControl_KeyUp" />
</DockPanel>
编辑第二名:
如果我没弄错的话就是我所做的:
更多信息:
我尝试复制粘贴原始XAML而不进行修改。当我在主窗口中使用它时,它的工作原理!但是,按钮的所有图像都没有显示(Bold和Italic除外,因为它们不使用任何图像)。
RichTextEditor.xaml.cs:
namespace WpfRichText.Ex.Controls
{
/// <summary>
/// Interaction logic for BindableRichTextbox.xaml
/// </summary>
public partial class RichTextEditor : UserControl
{
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(RichTextEditor),
new PropertyMetadata(string.Empty));
public RichTextEditor()
{
InitializeComponent();
}
public string Text
{
get { return GetValue(TextProperty) as string; }
set {
SetValue(TextProperty, value);
}
}
private void ToolStripButtonStrikeout_Click(object sender, RoutedEventArgs e)
{
TextRange range = new TextRange(mainRTB.Selection.Start, mainRTB.Selection.End);
TextDecorationCollection tdc = (TextDecorationCollection)mainRTB.Selection.GetPropertyValue(Inline.TextDecorationsProperty);
if (tdc == null || !tdc.Equals(TextDecorations.Strikethrough))
{
tdc = TextDecorations.Strikethrough;
}
else
{
tdc = new TextDecorationCollection();
}
range.ApplyPropertyValue(Inline.TextDecorationsProperty, tdc);
}
private void Tool_Link_Click(object sender, RoutedEventArgs e)
{
}
}
}