Search code examples
c#wpfwpf-controlsmarginsavalonedit

How to add a right margin to AvalonEdit number line?


I'm using AvalonEdit WPF control with a .Net Framework 4.8 project, using Visual Studio 2019 under Windows 10 64bit.

I need to add a right margin to the linenumbers. To understand what i need i attach a selfexplanatory image:

enter image description here

My actual xaml code is next:

<avalonEdit:TextEditor
    Grid.Column="2" Grid.Row="2"
    xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit"
    xmlns:editing="clr-namespace:ICSharpCode.AvalonEdit.Editing;assembly=ICSharpCode.AvalonEdit"
    xmlns:rendering="clr-namespace:ICSharpCode.AvalonEdit.Rendering;assembly=ICSharpCode.AvalonEdit"
    Name="TextEditor"
    FontFamily="Consolas"
    SyntaxHighlighting="C#"
    ShowLineNumbers="True"
    FontSize="10pt" Margin="0">
</avalonEdit:TextEditor>

Hope that someone can give me a hand on this, i spend two days trying to add this margin but couldn't achieve a proper solution. Thanks in advance.


Solution

  • While the approach in my comment will work, I thought of an even easier way. Just copy the style for TextArea from the source and modify it to include some margin on the right of the ItemsControl that contains all the editor's margins. The style is here:

    https://github.com/icsharpcode/AvalonEdit/blob/395ef8166870e2c6e1f63a7d97ac22e5e646e790/ICSharpCode.AvalonEdit/TextEditor.xaml#L42

    And here's a complete example:

    <Window x:Class="WpfApp1_SO_AvalonEdit.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit"
        xmlns:editing="clr-namespace:ICSharpCode.AvalonEdit.Editing;assembly=ICSharpCode.AvalonEdit"
        Title="Main Window"
        Width="800"
        Height="450">
    
    <Window.Resources>
        <Style x:Shared="False" TargetType="{x:Type editing:TextArea}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="SelectionBrush">
                <Setter.Value>
                    <SolidColorBrush Opacity="0.7" Color="#3399FF" />
                </Setter.Value>
            </Setter>
            <Setter Property="SelectionBorder">
                <Setter.Value>
                    <Pen>
                        <Pen.Brush>
                            <SolidColorBrush Color="#3399FF" />
                        </Pen.Brush>
                    </Pen>
                </Setter.Value>
            </Setter>
            <Setter Property="SelectionForeground">
                <Setter.Value>
                    <SolidColorBrush Color="White" />
                </Setter.Value>
            </Setter>
    
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type editing:TextArea}">
                        <DockPanel Focusable="False">
                            <ItemsControl Margin="0,0,10,0" Focusable="False" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LeftMargins}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>
                            <ContentPresenter Panel.ZIndex="-1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextView}" Focusable="False" />
                        </DockPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <Grid>
        <avalonEdit:TextEditor Name="TextEditor" FontFamily="Consolas" FontSize="10pt" ShowLineNumbers="True" />
    </Grid>
    

    enter image description here