CODEWITHSUNDEEP
wpfwpf-style
javirs
javirs

Reputation: 1100

WPF: affect border from style triggers

I'm creating my own radiobuttons. I just want to change the graphics of it. They look as they want them to look but I'm unable to change the look of the IsChecked one ... This is what I have so far

<RadioButton x:Class="gMaterialWPF.MaterialRadioButton" [....]>
    <RadioButton.Style>
        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Border x:Name="backPanel" 
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="10">

                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Content="{TemplateBinding Content}"
                                          />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </RadioButton.Style>
</RadioButton>

The problem is how to access the backPannel to change the color from the <Trigger Property="IsChecked" ??? I tried with TargetName but it cannot find the panel over there :(

Upvotes: 0

Views: 369

Answers (2)

mm8
mm8

Reputation: 169200

I tried with TargetName but it cannot find the panel over there :(

You need to move the trigger to the ControlTemplate if you want to be able to reference the Border element using the TargetName property:

<Style TargetType="{x:Type RadioButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <Border x:Name="backPanel" 
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="10">

                    <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Content="{TemplateBinding Content}"
                                          />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="backPanel" Property="Background" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

But since you have bound the Background property of the Border element to the Background property of the RadioButton using a TemplateBinding in your example, you don't really have to use a TargetName.

Upvotes: 1

Rekshino
Rekshino

Reputation: 7325

You can access RadioButton.IsChecked from Style.Triggers of Border:

<ControlTemplate TargetType="{x:Type RadioButton}">
    <Border x:Name="backPanel" 
Background="{TemplateBinding Background}"                            
BorderThickness="10">
        <Border.Style>
            <Style TargetType="{x:Type Border}">                                            
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType=RadioButton}}" Value="true">
                        <DataTrigger.Setters>
                            <Setter Property="BorderBrush" Value="Green"/>
                        </DataTrigger.Setters>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType=RadioButton}}" Value="false">
                        <DataTrigger.Setters>
                            <Setter Property="BorderBrush" Value="Yellow"/>
                        </DataTrigger.Setters>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>

        <ContentPresenter HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="{TemplateBinding Content}"
                />
    </Border>
</ControlTemplate>

Upvotes: 0

Related Questions