Avalon Dock: How to set LayoutAnchorablePaneControl's BorderBrush - wpf

I snooped the desired property and I can change it in real-time:
But I don't know what exactly to set in the code.
When I edit the XAML like this:
<dock:DockingManager x:Name="dockManager" ...>
...
<dock:DockingManager.AnchorablePaneControlStyle>
<Style TargetType="{x:Type dock:LayoutAnchorablePaneControl}">
<Setter Property="BorderBrush" Value="DarkRed"/>
</Style>
</dock:DockingManager.AnchorablePaneControlStyle>
...
I get the border color changed but the rest of behavior is unusable:

I am not get the big picture yet for what you wanna get, but I think you have to edit the Theme.xaml file containing all AvalonDock Styles and have a look there at the following style:
<Style x:Key="AvalonDock_AnchorablePaneControlStyle" TargetType="{x:Type avalonDockControls:LayoutAnchorablePaneControl}">
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{Binding Model.Root.Manager.Foreground, RelativeSource={RelativeSource Self}}" />
<Setter Property="Background" Value="{DynamicResource AvalonDock_BaseColor8}" />
<Setter Property="Template">...
Then you can see that the Background property is binded to a DynamicResource. You have to change the value of AvalonDock_BaseColor8 resource accordingly to what you want to achieve.

Related

Style inherittance between different target types

I don't know if I am just not understanding right. I am trying to make 2 different button styles for my application: BlueOnWhiteButton and WhiteOnBlueButton.
Both these buttons should be identical, but the foreground and backgrounds are reversed. So far, oh so simple.
Here is the catch: I need my buttons to have rounded corners. This simple requirement doesn't seem to be so simple after all. Also there maybe a little border of a different color on both versions.
Using some things I found on google and stack, I came up with this style for the first one, and it looked promising:
<Style x:Key="WhiteOnBlueButton"
TargetType="Button">
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
</Style>
</Style.Resources>
</Style>
So far so good, my button looks how I want it. But then, when I try to make a second style underneath, I get an error at runtime because of the Style.Resources redefine. I'll save you the code block, figure the same with a different name and reversed colors.
I am trying to keep the use of the style as simple as possible, I have tried versions with templates, but it made the style a lot more complicated, and I even lost the button text...
What I would like to have is something like this:
<Style x:Key="RoundedButtonCornersNoBorder" TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="RoundedButtonCorners" TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="2" />
</Style>
<Style x:Key="WhiteOnBlueButton"
TargetType="Button">
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<!-- Somehow tell the borders should be taken from the style RoundedButtonCornersNoBorder-->
</Style>
<Style x:Key="BlueOnWhiteButton"
TargetType="Button">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="{StaticResource MainBlue}" />
<Setter Property="FontWeight" Value="bold" />
<!-- Somehow tell the borders should be taken from the style RoundedButtonCorners-->
</Style>
Is there any way to code that without writing 300 lines of incomprehensible code?
The final goal is to apply the style by simply doing:
<Button
Style="{DynamicResource WhiteOnBlueButton}"
Content="CLICK ME!" />
You could move the Border Style in the Resources of a common base Style and derive the final Button Styles from the common base Style by means of the BasedOn property.
Do not set the BorderBrush in the Border Style, but either in the base or final Button Styles. The Border in the Button Template will pick it up from the Button via a TemplateBinding.
<Style x:Key="RoundedButtonCorners" TargetType="Button">
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
</Style.Resources>
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}"/>
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style x:Key="WhiteOnBlueButton" TargetType="Button"
BasedOn="{StaticResource RoundedButtonCorners}">
<Setter Property="Background" Value="{StaticResource MainBlue}"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style x:Key="BlueOnWhiteButton" TargetType="Button"
BasedOn="{StaticResource RoundedButtonCorners}">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="{StaticResource MainBlue}"/>
</Style>
Turns out we have a library that has a button exposing the border directly.
Final styles look like this:
<Style x:Key="WhiteOnBlueButton" TargetType="telerik:RadButton">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="FontWeight" Value="bold" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="BlueOnWhiteButton" TargetType="telerik:RadButton">
<Setter Property="Foreground" Value="{StaticResource MainBlue}" />
<Setter Property="Background" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="0" />
</Style>
And then building my button:
<telerik:RadButton
x:Name="xamlFullTextSearchButton"
Style="{StaticResource BlueOnWhiteButton}"
Grid.Column="2"
Grid.Row="0"
Content="CLICK ME"
CornerRadius="4"/>
With this, I don't even loose the clicking animation! It's perfect for what I need!

#FFFAFAFA is not valid value for the system.windows.controls.panel.background

Im just writing my own personal styles.
Everything is ok, no error inside styles.
I have following code
<Color x:Key="DialogButtonBorderBrushColor" A="255" R="177" G="177" B="177" />
<SolidColorBrush x:Key="BorderBrush" Color="{StaticResource DialogButtonBorderBrushColor}" />
There is a style for my dialog button.
<Style x:Key="DialogButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="80" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="BorderBrush" Value="{StaticResource BorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="{StaticResource DialogButtonBackgroundColor1}"/>
</Style>
Im just using this dialogButtonStyle in xaml Button as a style.
But when I use this style I get following error:
#FFFAFAFA is not a valid value for the System.Windows.Controls.Panel.Background property on setter.
I have really no idea what to do with this.
Can you help me? Thanks.
<Setter Property="Background" Value="{StaticResource DialogButtonBackgroundColor1}"/>
Background property expects Brush value. Judging by the name of resource, DialogButtonBackgroundColor1 is a Color. You should use Brush resource similar to BorderBrush

Textbox background color not applying from Style

My textbox is in WPF User control and style is being applied as:
<ResourceDictionary Source="pack://application:,,,/MyStyles1;component/Themes/MyTheme.xaml"/>
Style is as follows:
<Style x:Key="OutputTextBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="15" />
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="15" />
<Setter Property="Padding" Value="2" />
</Style>
It is noted that all properties(e.g. Foreground, BorderBrush, BorderThickness etc) are working as required. But TextBox Background is not applied.
Please assist.
There are two ways of setting this style to text boxes:
Explicitly using:
<TextBox Style="{StaticResource OutputTextBoxStyle}" />
This is the usual way when only a few text boxes in the project need this style applying to them.
Implicitly using implicit styles. To get implicit styles working your definition shouldn't contain an x:Key definition.
So you either add a second definition like this:
<Style TargetType="TextBox"
BasedOn="{StaticResource OutputTextBoxStyle}" />
or remove the x:Key definition from your existing style.
You'll need to do the former if you ever want to explicitly reference the style from somewhere else.
You can also override a specific part of the style by specifying it:
<TextBox Style="{StaticResource OutputTextBoxStyle}"
Background="{Aqua}" />
or
<TextBox Background="{Aqua}" />
EDIT: I've only now noticed that you discussed this with Chris through comments, he pretty much asked you what I asked below.
Works with me:
<Window.Resources>
<Style x:Key="OutputTextBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="15" />
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="15" />
<Setter Property="Padding" Value="2" />
</Style>
</Window.Resources>
<Grid>
<TextBox Text="123123" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{DynamicResource OutputTextBoxStyle}"/>
</Grid>
How does your TextBox actually look like (XAML)?
I suspect you've set the Background Property which is overriding the value that's inside your Style.

Remove magnify effect from ListViewItem

I've followed this question to get rid of the highlight effect in my ListView. The highlight effect is disabled correctly, but I'm still getting a magnify effect on the MouseOver. It's very anoying especially when moving over the ListView because it give a blury effect.
Here is my code
<ListView ItemsSource="{Binding Roles}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Focusable" Value="False"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Focusable" Value="False" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
And this:
is the behavior I'm willing to get rid off.
Does anyone know how to get rid of this magnify effect?
rather than changing border thickness
<Setter Property="BorderThickness" Value="0" />
hide it by changing border color
<Setter Property="BorderBrush" Value="{x:Null}" />

How to Change the Style on AvalonEdit CodeCompletion Window?

I'm trying to figure out how to change the style of the AvalonEdit CodeCompletion window. However, I can't figure out the right combination of xaml style target/properties to change it. The main thing I'd like to do is get rid of the border, but maybe some additional changes as well.
Here is the xaml I've tried. None of it is affecting the UI.
xmlns:ae="clr-namespace:ICSharpCode.AvalonEdit.CodeCompletion;assembly=ICSharpCode.AvalonEdit"
<Style TargetType="{x:Type ae:CompletionWindow}">
<Setter Property="WindowStyle" Value="None" />
</Style>
<Style TargetType="{x:Type ae:CompletionWindowBase}">
<Setter Property="WindowStyle" Value="None" />
</Style>
<Style TargetType="{x:Type ae:CompletionListBox}">
<Setter Property="Background" Value="Red" />
</Style>
<Style TargetType="{x:Type ae:CompletionList}">
<Setter Property="Background" Value="Orange" />
</Style>
Use this style to remove border on window:
<Style TargetType="{x:Type avalonEdit:CompletionWindow}">
<Setter Property="WindowStyle" Value="None"></Setter>
<Setter Property="ResizeMode" Value="NoResize"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
</Style>
To make the styles affect the UI, you can put them in a resource dictionary xaml and parse that with (ResourceDictionary)XamlReader.Parse(ResourcesAsXaml).
Then assign the ResourceDictionary to the Resources property of the CompletionWindow.

Resources