CODEWITHSUNDEEP
wpfxamlwpf-style
ChrisV
ChrisV

Reputation: 1309

WPF: Setting border on mouseover in a resource style

I have this style as a resource in App.xaml

<Style x:Key="StackPanelLink" TargetType="{x:Type StackPanel}">
    <Setter Property="Width" Value="500" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" Value="GhostWhite" />
            <Setter Property="Border.BorderBrush" Value="LightBlue" />
            <Setter Property="Border.BorderThickness" Value="10" />
        </Trigger>
    </Style.Triggers>
</Style>

The background-changing trigger works but the border-changing one does not. All the examples I have seen online have used a Border element inside the StackPanel and I don't understand how to apply this to a style in a resource file.

Rant: So far I really hate WPF. It's about the least discoverable, least intuitive technology I have ever used. Every trivial thing I try to do is an hour of Googling and some solution involving like 30 lines of XML.

Upvotes: 1

Views: 3229

Answers (1)

mm8
mm8

Reputation: 169200

The background-changing trigger works but the border-changing one does not.

That's because these properties don't exist on the StackPanel. A StackPanel has no border. It's just a Panel that arranges child elements into a single line that can be oriented horizontally or vertically.

It sounds like you want to use a Border element and Style:

<Style x:Key="StackPanelLink" TargetType="{x:Type Border}">
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Width" Value="500" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" Value="GhostWhite" />
            <Setter Property="Border.BorderBrush" Value="LightBlue" />
            <Setter Property="Border.BorderThickness" Value="10" />
        </Trigger>
    </Style.Triggers>
</Style>
...
<Border Style="{StaticResource StackPanelLink}">
    <TextBlock>....</TextBlock>
</Border>

Upvotes: 4

Related Questions