ScrollViewer Theme with AvalonEdit Control

[Zach]

When I put in a scrollViewer Theme like

<Style TargetType="ScrollViewer">
        <Setter Property="t:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>

Then I put in a simple AvalonEdit Control into the Grid, I have to place the cursor in the very first character of the first line to be able to select the text box. How can I get around this? I would like to be able to use the Nice looking scroll viewer with the Editor. Ideally it would be nice if Telerik had a radtextbox with Line numbers and Syntax Highlighting.

<Grid>
<avalonEdit:TextEditor Margin="5" Grid.Row="2" Width="Auto" FontFamily="Segoe UI" FontSize="10pt" SyntaxHighlighting="C#" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" ShowLineNumbers="True">
</avalonEdit:TextEditor>
</Grid>

Thanks

[Dimitrina]

Hi,

TextEditor control is not a control provided by Telerik.  As to the control you need, you can check if any of the controls we suggest would be suitable for you on the WPF Demos.

Kind regards,
Didie
the Telerik team

[Hans]

I had a look at the source code of the TextEditor control on CodeProject. The template of this control contains a ScrollViewer. The ScrollViewer has its HorizontalContentAlignment and VerticalContentAlignment properties set to 'Left' and 'Top'. If you change these values to 'Stretch' the control seems to work fine.

I did this myself by taking the original control template from CodeProject, and modifying these two properties as needed. This results in the code below. The below style sits inside a resource dictionary that I've created and I reference it in my App.xaml after theTelerik Themes. I'm using Implicit Styles though, you seem to be using the StyleManager (which I would not recommended).

<Style
        TargetType="avalonEdit:TextEditor">
        <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="Stretch"
                        HorizontalContentAlignment="Stretch"
                        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>

[Dimitrina]

Hi,

Thank you for your input.

You can also refer to Setting a Theme (Using Implicit Styles) article where you can find detailed explanation and an example on how to use Implicit Styles.

Regards,
Didie
Telerik