Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TargetType does not match type of element

Tags:

wpf

xaml

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:

  1. 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 ?

  2. 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 ?

like image 519
Marshal Avatar asked Jun 12 '15 13:06

Marshal


3 Answers

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}" ... />
like image 162
Mike Eason Avatar answered Sep 23 '22 10:09

Mike Eason


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.

like image 39
Olaru Mircea Avatar answered Sep 23 '22 10:09

Olaru Mircea


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.

like image 31
Daap Avatar answered Sep 22 '22 10:09

Daap