Show Border on avalonEdit:TextEditor

Question

I am trying to get a border to show around an avalonEdit 'box' in a Wpf control but can't seem to make it happen.

I added BorderBrush="Black" BorderThickness="2" but clearly I am missing something.

I've googled but, despite my endeavors, I cannot find anything - I suspect I may not know the correct terminology to Google for because it feels like it should be straightforward!

Code as follows:

    <Label Content="Account:" HorizontalAlignment="Left" Margin="10,28,0,0" VerticalAlignment="Top"/>
    <TextBox Name ="textBoxAccount" HorizontalAlignment="Left" Height="23" Margin="66,28,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120"/>
    <Label Content="Query:" HorizontalAlignment="Left" Margin="10,59,0,0" VerticalAlignment="Top"/>

    <Button x:Name="btnGo" Content="Go!" HorizontalAlignment="Left" Height="25" Margin="10,342,0,0" VerticalAlignment="Top" Width="146"/>

    <avalonEdit:TextEditor
        xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit"
        x:Name="textEditor"
        FontFamily="Consolas"
        SyntaxHighlighting="AWQL"
        ScrollViewer.VerticalScrollBarVisibility="Hidden"
        WordWrap="True"
        Visibility="Visible"
        BorderBrush="Black" BorderThickness="2"
        FontSize="10pt" Margin="12,89.96,10,0" Height="229" VerticalAlignment="Top"/>
</Grid>

which renders like this:

but the 'avalonEdit' box doesn't seem to render the border so looks invisible unless/until a user clicks inside it and starts typing.

I'd really like the border to look the same as the simple textbox at the top of the user control but right now I'd settle for anything visible!

Answer 1

I only worked once with avalon before so I cooked up a quick project which does what you want.

As a disclaimer, AvalonEdit seems to ruin any attempt to put a border around it like you said. So I set it up using a grid to put a border around it.

It will look something like this:

And the code will look like this:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Width="600" Height="500"
    xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Label Grid.Column="0" Grid.Row="0" Content="Account:" HorizontalAlignment="Left" Margin="20,20" VerticalAlignment="Top" Height="26" Width="56" />
    <TextBox Grid.Column="1" Grid.Row="0" Name="textBoxAccount" HorizontalAlignment="Left" Height="26" Margin="20" TextWrapping="Wrap"
             VerticalAlignment="Top" Width="120" />
    <Label Grid.Column="0" Grid.Row="1" Content="Query:" HorizontalAlignment="Left" Margin="20,0" VerticalAlignment="Top" Height="26" Width="45" />

    <Border Grid.ColumnSpan="2"
            Grid.Row="2"
            Grid.Column="0" BorderBrush="Black" BorderThickness="1"
            Margin="20"
            Height="230">
        <avalonEdit:TextEditor
            x:Name="textEditor"
            FontFamily="Consolas"
            SyntaxHighlighting="AWQL"
            ScrollViewer.VerticalScrollBarVisibility="Hidden"
            WordWrap="True"
            Visibility="Visible"
            FontSize="10pt" VerticalAlignment="Top" Height="226"/>
    </Border>


    <Button Grid.Column="0" Grid.Row="3" x:Name="btnGo" Content="Go!" HorizontalAlignment="Left" Height="25" Margin="20"
            VerticalAlignment="Top" Width="146" />

</Grid>

This is not exactly what you want, but a grid will help with other issues as well in the long run

Answer 2

This is the avalonEdit:TextEditor style (TextEditor.xaml):

<Style TargetType="{x:Type AvalonEdit:TextEditor}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
    <Setter Property="FlowDirection" Value="LeftToRight"/> <!-- AvalonEdit does not support RTL, so ensure we use LTR by default -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type AvalonEdit:TextEditor}">
                <ScrollViewer
                    Focusable="False"
                    Name="PART_ScrollViewer"
                    CanContentScroll="True"
                    VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
                    HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
                    Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextArea}"
                    VerticalContentAlignment="Top"
                    HorizontalContentAlignment="Left"
                    Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                />
                <ControlTemplate.Triggers>
                    <Trigger Property="WordWrap"
                             Value="True">
                        <Setter TargetName="PART_ScrollViewer"
                                Property="HorizontalScrollBarVisibility"
                                Value="Disabled" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And this is an explanation about why ScrollViewer doesn't show borders: https://social.msdn.microsoft.com/Forums/vstudio/en-US/a2310302-167b-44e2-bc23-825ff1610701/scrollviewer-border

So, I think the best way is to wrap the TextEditor inside a Border as Guerudo says or modify the template in Avalon code TextEditor.xaml.