WPF trouble applying a style to a textbox - wpf

Question

I am a bit new to WPF and am in need of some assistance.. I am trying to setup a mouse over trigger event to change the 'style' of a textbox.. ie - when the user moves the mouse over the textbox, I want the border and background to change. So, after doing some digging around and reading here and there on this, I ended up with this:
<Window.Resources>
<Style x:Key="WMCTextBoxStyle" TargetType="{x:Type TextBox}" BasedOn="{StaticResource WMCTextBoxStyle}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="AllowDrop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border1"
CornerRadius="3"
Padding="2"
BorderThickness="1"
Height="Auto"
Width="auto"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA4B3C5" Offset="0"/>
<GradientStop Color="#FFA4B3C5" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border Name="Border2"
CornerRadius="0"
BorderThickness="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
BorderBrush="Black">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.225,-0.616" RadiusY="0.863" RadiusX="0.757">
<GradientStop Color="#EEFFFFFF"/>
<GradientStop Color="#00FFFFFF" Offset="0.696"/>
</RadialGradientBrush>
</Border.Background>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Style" Value="{DynamicResource WMCTextBoxStyle}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
When I try to compile, I get the following two errors:
Error XDG0062 '{DependencyProperty.UnsetValue}' is not a valid value for the 'System.Windows.Controls.Control.Template' property on a Setter." in Line:12
Error XDG0062 Style object is not allowed to affect the Style property of the object to which it applies. in Line 19
I know that I am missing something basic on this, but not sure exactly how to get around it. When remove the --- out of the code, and then create a textbox and manually set the style, it works.. so I know that I am doing something wrong with the triggers... and I am sure it is something basic and 'newbie' ish...
any help would be appreciated.. :)
Here is the latest version
<Window.Resources>
<Style x:Key="WMCTextBoxStyle"
TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border x:Name="border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Opacity"
TargetName="border"
Value="0.56" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="border">
<Setter.Value>
<Border Name="OuterBorder"
CornerRadius="3"
Padding="2"
BorderThickness="1"
Height="Auto"
Width="auto"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA4B3C5" Offset="0"/>
<GradientStop Color="#FFA4B3C5" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border Name="InnerBorder"
CornerRadius="0"
BorderThickness="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
BorderBrush="Black">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.225,-0.616" RadiusY="0.863" RadiusX="0.757">
<GradientStop Color="#EEFFFFFF"/>
<GradientStop Color="#00FFFFFF" Offset="0.696"/>
</RadialGradientBrush>
</Border.Background>
</Border>
</Border>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Ok, for anyone that is interested in this, I decided to stick with one border and then changed a few things... here is what seems to be working.
<Window.Resources>
<Style x:Key="WMCTextBoxStyle"
TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border x:Name="border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity"
TargetName="border" Value="0.56" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="2" />
<Setter Property="Height" Value="Auto" />
<Setter Property="Width" Value="Auto" />
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.225,-0.616" RadiusY="0.863" RadiusX="0.757">
<GradientStop Color="#EEFFFFFF"/>
<GradientStop Color="#00FFFFFF" Offset="0.696"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA4B3C5" Offset="0"/>
<GradientStop Color="#FFA4B3C5" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
--
Thanks for the guidance

Answer 1

To understand how styles work, I recommend the following read (better don't skip it): How to create a style for a control (WPF .NET) (and Styles and templates in WPF).
"Error XDG0062 '{DependencyProperty.UnsetValue}' is not a valid value for the 'System.Windows.Controls.Control.Template' property on a Setter." in Line:12"
You can't base a Style n itself (doesn't make sense either - I'm sure this also creates a designer error, showing squiggles to indicate the exact erroneous piece of code).
<!-- Illegal 'BasedOn' reference to itself as base style -->
<Style x:Key="WMCTextBoxStyle"
BasedOn="{StaticResource WMCTextBoxStyle}">
"Error XDG0062 Style object is not allowed to affect the Style property of the object to which it applies. in Line 19"
You can't set the Style property from inside a Style that is the current value of the Style property. Apart from that it does not make sense to set the Style prooperty to itself.
<!-- Illegal modification of the Style property. Aside from that
'WMCTextBoxStyle' is already the Style, otherwise the triggers are not in effect -->
<Setter Property="Style" Value="{DynamicResource WMCTextBoxStyle}"/>
When you define an explicit Style (a named Style), you must assign it explictly:
<TextBox Style="{StaticResource WMCTextBoxStyle}" />
The simplest Style to change the BorderThickness, Background and BorderBrush on mouse over is:
<Window>
<Window.Resources>
<Style x:Key="WMCTextBoxStyle"
TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border x:Name="border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Opacity"
TargetName="border"
Value="0.56" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="BorderBrush"
Value="OrangeRed" />
<Setter Property="Background"
Value="PaleGreen" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<!-- Apply the Style -->
<TextBox Style="{StaticResource WMCTextBoxStyle}" />
</Window>
If you are not interested in modifying the BorderBrush you can even skip the complete template and move the triggers to the Style.Triggers property.