Show border on avalonEdit: TextEditor

Question

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

I added BorderBrush="Black" BorderThickness="2" , but obviously something is missing.

I searched googled, but despite my efforts, I can’t find anything - I suspect that I may not know the correct terminology for Google, because it seems that it should be easy!

Enter the 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 is as follows:

but the "avalonEdit" field does not seem to display the border, so it looks invisible if / until the user clicks on it and starts to print.

I would really like the border to look just like a simple text box at the top of a user control, but right now I'm agreeing to anything!

Answer 1

I only worked with Avalon before, so I prepared a quick project that does what you want.

As a disclaimer, AvalonEdit seems to ruin any attempt to place a border around it, as 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 the grid will also help with other problems in the long run.

Answer 2

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

 <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 of 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 the border as Guerudo or change the template in the Avalon code TextEditor.xaml .

Answer 3

I did not work with avalonEdit, but I can offer you another way: you can wrap TextEditor inside <Border> </Border> .

This is probably not the best solution, but it is one.