Override Style using Resource Dicitionary

SyntaxEditor for WPF Forum

Posted 8 years ago by Christel
Version: 11.2.0554
Avatar

Hi,

How can I change the assets and styles of  the Syntax Editor during run-time?

I don't want to have the blue border any more, when MouseIsOver, another Background and BorderBrush, and some Control.Template Triggers,etc.

In our application the SyntaxEditor is wrapped in a custom control, which is integrated in the application, only using the wrapper-dll.

Now the styles of the application should be attached to the wrapped Syntaxeditor-Control as well.

I tried to implement the sample from ThemesSamples/ThemeOverride, but the SyntaxEditor look and feel doesn't change not at all.

This is the codesnippet from the xaml, I want to use as resource:

<ResourceDictionary 
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes"
		xmlns:editor="clr-namespace:Gradient.WPF.Actipro.Controls.SyntaxEditor"
		>

	<Style x:Key="{x:Type editor:BaseSyntaxEditor}" TargetType="{x:Type editor:BaseSyntaxEditor}">
		<Setter Property="Background" Value="#FFFF7F50"/>
		<Setter Property="BorderBrush" Value="{DynamicResource grau50}"/>
		<Setter Property="BorderThickness" Value="0.6" />
		<Setter Property="Margin" Value="4"/>
		<Setter Property="Padding" Value="1,2"/>		
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type editor:BaseSyntaxEditor}">
					<Grid>
						<Border x:Name="hg" CornerRadius="0,3,3,3" Background="{StaticResource weiss}"/>
						<Border x:Name="Border" CornerRadius="0,3,3,3" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
						</Border>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="true">
							<Setter Property="Background" Value="{StaticResource grau10}"/>
							<Setter Property="BorderBrush" Value="{DynamicResource grau80}"/>
						</Trigger>
						<Trigger Property="IsFocused" Value="true">
							<Setter Property="Background" Value="{StaticResource aktiv50}"/>
							<Setter Property="BorderBrush" Value="{DynamicResource aktiv}"/>
						</Trigger>
						<Trigger Property="IsKeyboardFocused" Value="true">
							<Setter Property="BorderBrush" Value="{DynamicResource aktiv}"/>
							<Setter Property="Background" Value="{DynamicResource aktiv50}"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

</ResourceDictionary>

 

How can I bind this resource not static but dependent perhaps on a property to syntax editor, when it is loaded or during run-time?

Thanks!

Comments (5)

Posted 8 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Christel,

Sorry but we'd probably need more information about your setup (not really sure what BaseSyntaxEditor is) to provide assistance.  If you want to build a new minimal sample project that shows the problem and email it to our support address, we can take a look at it.

In general, you can provide styles on SyntaxEditor either implicitly, where you make an app Resources style that targets the SyntaxEditor control but doesn't set a x:Key, or explicitly, where you set the SyntaxEditor instance's Style property to StaticResource reference for a Style defined in app resources.


Actipro Software Support

Posted 8 years ago by Christel
Avatar

Hi,

thank you for the first help.

BaseSyntaxEditor is just a wrapper around the normal SyntaxEditor - ist does nothing special and can b e replaced by Syntaxditor.

After further research I have some more questions - perhaps more detailed:

1. How can I achieve, that the border of the syntaxeditor will NOT move to blue when the mouse is over the control?

2. In the resource-example above there is the ControlTemplate. After definition of the Grid and Border in the Grid, what kind of class can I use for the syntaxeditor to get something like a ContentPresenter part of the syntax editor, so that I can bind background and text of the syntaxeditor there. For a simple textbox it will like this example below.  For syntaxeditor control I look for an equivalent to the ScrollViewer

which bind content and background...

Can I as well use something like MouseOver for syntaxeditor control?

<Style x:Key="detail_text" TargetType="{x:Type TextBox}">
        <Setter Property="SelectionBrush" Value="{StaticResource aktiv}"/>
        <Setter Property="Background" Value="{StaticResource grau05}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource grau50}"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Margin" Value="4"/>
        <Setter Property="Padding" Value="1,2"/>
        <Setter Property="TextBlock.LineHeight" Value="18"/>
        <Setter Property="MinHeight" Value="20"/>
        <Setter Property="TextAlignment" Value="left"/>
        <Setter Property="AcceptsReturn" Value="True"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="BorderThickness" Value="0.6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Border x:Name="hg" CornerRadius="0,3,3,3" Background="{StaticResource weiss}"/>
                        <Border x:Name="Border" CornerRadius="0,3,3,3" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <ScrollViewer x:Name="PART_ContentHost" Background="{x:Null}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" Value="{StaticResource grau10}"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource grau80}"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter Property="Background" Value="{StaticResource aktiv50}"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource aktiv}"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="BorderBrush" Value="{DynamicResource aktiv}"/>
                            <Setter Property="Background" Value="{DynamicResource aktiv50}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

3. I tried to change the background colour of the syntaxeditor. But using only the Background-Property of syntaxeditor for this, It will not fill the whole control with the colour. E.g. a small bar on the left side and a small quarter in the right corner stay white.

What kind of Property I have to use to set the whole background of the editorcontrol?

Sorry for such a lot of questions- which are more for the style of syntaxeditor than for its appreciate feastures. But I'm quite new with using resources.

Thanks for any help!

Posted 8 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Christel,

SyntaxEditor is far more complex than a normal TextBox since there are things like margins, etc., each of which can have their own background colors.  So there are properties like SyntaxEditor.LineNumberMarginBackground, OutliningMarginBackground, and so on.

I think what might help is if you look at our default styles for both SyntaxEditor and EditorView.  If you see those, then I think it will be pretty obvious on how you would customize things for your needs.  The SyntaxEditor style setters have a lot of background settings and the EditorView style is where you'd customize the chrome for any view instance (like its borders and mouseover).  But you also can see in the EditorView style which default brush resources are used for borders, mouseover effects, etc.  So you could customize those brush resources as needed in app Resources.

The default styles are available to you from your account if your company has WPF Studio licenses.  Or if you only own a license for the individual SyntaxEditor control, you can e-mail our support address and we can e-mail them to you.


Actipro Software Support

Posted 8 years ago by Christel
Avatar

I have an account and my company has WPF Studio licenses. But I can't find the place,where to download the default styles.

Should we use the same account, where we get the studio upgrades from?

Posted 8 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Yes, whoever is the one getting your download and license will see a link to download the default XAML styles there too.


Actipro Software Support

The latest build of this product (v2019.1 build 0683) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.