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!

Delk

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

Memory

Thanks for this explanation/solution which is definately an improvement. Any idea how I can make the border look the same style as the border around the simple text box above it? – Delk

This should show the default style for the textbox. If you copy the colors, radius and more it should be the same. – Memory

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.

Rebarebah

Answer 3

I didn't work with avalonEdit but I can suggest you an other way : you could wrap your TextEditor inside a <Border> </Border>.

It's probably not the best solution but it is one.

Eccrinology

Thanks very much for the suggestion but I'm hoping for a better solution. As is this suggestion just renders a border around the whole thing (not just the avalonEdit text box) - I could probably kludge it together to make it better by tweaking margins etc but it feels like it misses something simple somewhere – Delk

I would suggest you dig into the template to find out whats going on! – Blitz

Answer 4

The AvalonEdit community nicely fixed this problem by changing the TextEditor style from the project:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type AvalonEdit:TextEditor}">
            <Border
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
                <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"
                    Padding="{TemplateBinding Padding}"
                />
            </Border>

Elisabethelisabethville