I have a simply buttonStyle defined for TargetType
of Button
; but setting the style to button gives an exeption.
<Window>
<Window.Resources>
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Magenta"/>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Button Content="1" FocusVisualStyle="{StaticResource buttonStyle}"/>
</StackPanel>
</Window>
Additional information: 'Button' TargetType does not match type of element 'Control'.
Further, setting the TargetType
as Control
removes the run-time error, but visual style of button doesn't change when it gets Focus
.
Style works when set as Button.Style
Edit I have two specific questions:
I agree to the fact that FocusVisualStyle
is a property of FrameworkElement
and FrameworkContentElement
, but why is there an error setting it on button, despite the fact that Style is a namedstyle and not a typedstyle ?
Why does FocusVisualStyle
don't get rendered on the Button
? Is the Button.FocusVisualStyle
over-ridden internally by any higher priority value like Templates, Triggers or Template Triggers ?
a FocusVisualStyle
allows you to provide visual feedback to the user when a control is focused. For example, adding a Rectangle
which looks like a border of the control.
A Style
is the look and feel of the control itself. It's all explained here.
FocusVisualStyle
is not the style for the Button
itself, it's the style for when the Button
is focused.
See here for more information.
I think what you are after is a Trigger
.
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Magenta"/>
</Trigger>
</Style.Triggers>
</Style>
Then, you can set the Style
of your Button
, like so:
<Button Style="{StaticResource buttonStyle}" ... />
You should use it like this
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Magenta" />
</Trigger>
</Style.Triggers>
</Style>
and set it like this:
<Button Content="1" Style="{StaticResource buttonStyle}"/>
To see this better:
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Magenta" />
</Trigger>
</Style.Triggers>
</Style>
From MSDN
The focus visual style feature provides a common "object model" for introducing visual user feedback based on keyboard navigation to any UI element. This is possible without applying a new template to the control, or knowing the specific template composition.
To illustrate the difference between button and focus visual style, consider this:
<Style x:Key="rectFocusVisual" TargetType="{x:Type Rectangle}">
<Setter Property="Margin" Value="2" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Stroke" Value="Red" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="StrokeDashArray" Value="1 3" />
</Style>
<Style x:Key="focusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Style="{StaticResource rectFocusVisual}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="button" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green" />
</Style>
and:
<Button
Content="I am a green button with red focus rectangle"
FocusVisualStyle="{StaticResource focusVisual}"
Style="{StaticResource button}" />
<ComboBox FocusVisualStyle="{StaticResource focusVisual}" />
The difference will be apparent when the button is given focus. The button should appear green and if focused will show a red focus rectangle. If the combo box gets focus, it will have a similar red rectangle.
While the button style can only be used for Button elements, the focusVisual style can be used for any element that supports it. This way a consistent focus style can be used for any element, regardless of its underlying control type.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With