CODEWITHSUNDEEP
c#wpfxamlcontroltemplate
stil
stil

Reputation: 5576

More flexible setters in ControlTemplate.Triggers

I'm trying to style a button in XAML. Below you can see what I created so far.

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#f2f2f7"/>
    <Setter Property="Padding" Value="6,4"/>
    <Setter Property="Foreground" Value="#222222" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#b1b1c0">
                    <Border CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0" BorderBrush="#f8f8fa" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                        </ContentPresenter>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#8e8eba" />
                        <Setter Property="Foreground" Value="#f2f291" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The problem is, that this button has two <Border> elements nested one in another. I'd like to have different BorderBrush="" attribute when IsMouseOver trigger is activated. For example, when I put mouse over button, the inner border would red, and outer border would be blue.

Can you help me with that?

Upvotes: 4

Views: 3409

Answers (2)

Anatoliy Nikolaev
Anatoliy Nikolaev

Reputation: 22702

Try set the Name for Borders and use TargetName in Trigger like this:

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#f2f2f7"/>
    <Setter Property="Padding" Value="6,4"/>
    <Setter Property="Foreground" Value="#222222" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="OuterBorder" CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#b1b1c0">
                    <Border Name="InnerBorder" CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0" BorderBrush="#f8f8fa" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#8e8eba" />
                        <Setter Property="Foreground" Value="#f2f291" />

                        <!-- Here use TargetName -->
                        <Setter TargetName="OuterBorder" Property="BorderBrush" Value="Red" />
                        <Setter TargetName="InnerBorder" Property="BorderBrush" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Some notes

  • TargetName can be set in only <ControlTemplate.Triggers>, not in <Style.Triggers>
  • TargetName operates only within the one ControlTemplate section

Upvotes: 5

Mike Eason
Mike Eason

Reputation: 9723

Give the Border a name and use the TargetName property on the trigger setter.

<Setter TargetName="MyBorderName" Property="BorderBrush" Value="Red" />

Upvotes: 3

Related Questions