基于WPF实现代码查看器控件_开发_开发者

如何实现 wpF 代码查看器控件

框架使用.NET40；

Visual Studio 2019;

代码展示需要使用到AvalonEdit是基于WPF的代码显示控件，项目地址[2]，支持C#，Javascript,C++,XML,html,Java等语言的关键字高亮显示。

AvalonEdit也是支持自定义的高亮配置，对于需要编写脚本编辑器的场景非常适用。

可通过配置CustomHighlighting.xshd文件，可以对高亮显示做自定义设置。

实现代码

以下能够实现ifelse高亮格式设置，代码如下：

<?xml version="1.0"?>
<SyntaxDefinition name="Custom Highlighting" xmlns="http://icsharpcode.net/sharpdevelop/syntaxdefinition/2008">
    <RuleSet>
        <Keywords fontWeight="bold" foreground="Blue">
            <Word>if</Word>
            <Word>else</Word>
        </Keywords>
    </RuleSet>
</SyntaxDefinition>

1）新建 SourceCodeModel.cs用作记录代码源码地址源码类型等。

namespaceWPFDevelopers.Samples.Controls
{
publicclassSourceCodeModel
{
publicCodeTypeCodeType{get;set;}
publicstringHaader{get;set;}

publicstringCodeSource{get;set;}

}
publicenumCodeType
{
Xaml,
CSharp,
}
}

2）新建 CodeViewer.xaml 代码如下：

<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls">
<StyleTargetType="{x:Typecontrols:CodeViewer}">
<SetterProperty="FontSize"Value="{StaticResourceNormalFontSize}"/>
<SetterProperty="Template">
<Setter.Value>
<ControlTemplateTargetType="{x:Typecontrols:CodeViewer}">
<TabContrLkPirYHNvolx:Name="PART_TabControl">
<TabControl.Resources>
<StyleTargetType="TabPanel">
<SetterProperty="HorizontalAlignment"Value="Right"/>
</Style>
</TabControl.Resources>
<TabItemx:Name="PART_TabItemContent"Header="Sample"Content="{TemplateBindingContent}"/>

</TabControl>
<ControlTemplate.Triggers>
<TriggerProperty="Content"Value="{x:Null}">
<SetterProperty="Visibility"TargetName="PART_TabItemContent"Value="Collapsed"/>
<SetterProperty="SelectedIndex"TargetName="PART_TabControl"Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

3）新建 CodeViewer.cs开发者_Go培训继承ContentControl 代码如下：

Content用来展示控件。

php

增加公共集合属性用做存放代码信息SourceCodes，重写控件时循环SourceCodes增加TabItem到PART_TabControl中。

usingICSharpCode.AvalonEdit;
usingICSharpCode.AvalonEdit.Editing;
usingICSharpCode.AvalonEdit.Highlighting;
usingSystem;
usingSystem.Collections.ObjectModel;
usingSystem.IO;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingstaticSystem.Windows.Forms.VisualStyles.VisualStyleElement.TextBox;

namespaceWPFDevelopers.Samples.Controls
{
[TemplatePart(Name=TabControlTemplateName,Type=typeof(TabControl))]
publicclassCodeViewer:ContentControl
{
privatestaticreadonlyType_typeofSelf=typeof(CodeViewer);
publicObservableCollection<SourceCodeModel>SourceCodes{get;}=newObservableCollection<SourceCodeModel>();
privateconststringTabControlTemplateName="PART_TabControl";
privateTabControl_tabControl=null;
staticCodeViewer()
{
DefaultStyleKeyProperty.OverrideMetadata(_typeofSelf,
newFrameworkPropertyMetadata(_typeofSelf));
}
publicoverridevoidOnApplyTemplate()
{
base.OnApplyTemplate();

_tabControl=GetTemplateChild(TabControlTemplateName)asTabControl;
foreach(variteminSourceCodes)
{
vartabItem=CreateTabItem(item);
_tabControl.Items.Add(tabItem);
}
}
TabItemCreateTabItem(SourceCodeModelcodeModel)
{
if(codeModel==null)returnnull;
varpartTextEditor=newTextEditor();
partTextEditor.Options=newTextEditorOptions{ConvertTabsToSpaces=true};
partTextEditor.TextArea.SelectionCornerRadius=0;
partTextEditor.SetResourceReference(TextArea.SelectionBrushProperty,"WindowBorderBrushSolidColorBrush");
partTextEditor.TextArea.SelectionBorder=null;
partTextEditor.TextArea.SelectionForeground=null;
partTextEditor.IsReadOnly=false;
partTextEditor.ShowLineNumbers=true;
partTextEditor.FontFamily=DrawingContextHelper.FontFamily;
partTextEditor.Text=GetCodeText(codeModel.CodeSource);
vartabItem=newTabItem
{
Content=partTextEditor
};
switch(codeModel.CodeType)
{
caseCodeType.Xaml:
partTextEditor.SyntaxHighlighting=HighlightingManager.Instance.GetDefinitionByExtension(".XML");
tabItem.Header=codeModel.Haader==null?"Xaml":codeModel.Haader;
break;
caseCodeType.CSharp:
partTextEditor.SyntaxHighlightinghttp://www.devze.com=HighlightingManager.Instance.GetDefinitionByExtension(".CS");
tabItem.Header=codeModel.Haader==null?"CSharp":codeModel.Haader;
break;
}

returntabItem;
}
stringGetCodeText(stringcodeSource)
{
varcode=string.Empty;
varuri=newUri(codeSource,UriKind.Relative);
varresourceStream=Application.GetResourceStream(uri);
if(resourceStream!=null)
{
varstreamReader=newStreamReader(resourceStream.Stream);
code=streamReader.ReadToEnd();
returncode;
}
returncode;
}
}
}

4）新建 WPFDevelopers.SamplesCode.csproj 项javascript目，在VS右键项目添加现有项目将所需要读取的代码文件添加为链接就能得到以下地址：

<ResourceInclude="..\WPFDevelopers.Samples\ExampleViews\AnimationNavigationBar3DExample.xaml">
<Link>ExampleViews\AnimationNavigationBar3DExample.xaml</Link>
</Resource>

5）修改Example 代码如下：

<UserControlx:Class="WPFDevelopers.Samples.ExampleViews.AnimationNavigationBar3DExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:编程客栈wpfdev="https://github.com/WPFDevelopersOrg/WPFDevelopers"
xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"
xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
mc:Ignorable="d"
d:DesignHeight="450"d:DesignWidth="800">
<controls:CodeViewer>
<!--此处放展示控件-->
<controls:CodeViewer.SourceCodes>
<controls:SourceCodeModel
CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/AnimationNavigationBar3DExample.xaml"
CodeType="Xaml"/>
<controls:SourceCodeModel
CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/AnimationNavigationBar3DExample.xaml.cs"
CodeType="CSharp"/>
</controls:CodeViewer.SourceCodes>
</controls:CodeViewer>
</UserControl>

效果图

基于WPF实现代码查看器控件