XAML Styles - how to use BasedOn while overriding triggered setter

Question

I'm using a XAML style to create a custom radio button using my own images. The style uses triggers to change the look of the button based on focus, pressed, etc. Here's the style:

<Style x:Key="SmallButtonAsRadioButton" TargetType="RadioButton">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid x:Name="Container">
                    <Image x:Name="img" Source="/Resources/Elements/Buttons/10.png" Margin="6" />
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter TargetName="img" Property="Source" Value="/Resources/Elements/Buttons/11.png" />
                        <Setter TargetName="img" Property="Margin" Value="0" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsKeyboardFocused" Value="True" />
                            <Condition Property="IsChecked" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="img" Property="Source" Value="/Resources/Elements/Buttons/12.png" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsKeyboardFocused" Value="False" />
                            <Condition Property="IsChecked" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="img" Property="Source" Value="/Resources/Elements/Buttons/12a.png" />
                        <Setter TargetName="img" Property="Margin" Value="6" />
                    </MultiTrigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="img" Property="Source" Value="/Resources/Elements/Buttons/12.png" />
                        <Setter TargetName="img" Property="Margin" Value="0" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I need to create a new style based on this that uses different images. Obviously, I'd like to reuse this style, but I'm not sure how to override these image setters. Something like:

<Style x:Key="SmallButtonAsRadioButtonBlue" BasedOn="{StaticResource SmallButtonAsRadioButton}" TargetType="RadioButton">
    <Setter - (Override image...
    <Setter - (Override image...

Any insight is appreciated.

Answer 1

what you could do is derive from radio button in your own custom control with the images as properties. then you would not have to override the style (you could just define it once) and every time you wanted to use different images you could set them in the xaml. (or a style - without redoing the control template again, just by using setters)