How to properly set the BasedOn in XAML style

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

My question was:

I have this as the style template:

<Style x:Key="myDogToggleButton1" TargetType="ToggleButton" BasedOn="{x:Null}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid>
                    <Image Name="Normal" Source="/images/dogs/dog1.png"/>
                    <Image Name="Pressed" Source="/images/dogs/dog3.png" Visibility="Hidden"/>
                    <Image Name="Disabled" Source="images/dogs/dog5.png" Visibility="Hidden"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And now I want another one which is based on the upper one, and this doesn’t work:

<Style x:Key="myDogToggleButton2" TargetType="ToggleButton" BasedOn="{DynamicResource myDogToggleButton1}">
    <Setter Property="Normal" Value="/images/dogs/dog2.png" />
    <Setter Property="Pressed" Value="/images/dogs/dog2.png" />
    <Setter Property="Disabled" Value="/images/dogs/dog2.png" />
</Style>

The error message I get is:

The member "Pressed" is not recognized or is not accessible.
The member "Normal" is not recognized or is not accessible.
The member "Disabled" is not recognized or is not accessible.

I suspect that my different style calling is wrong, so please point out the error.

The answer, by user Heena Patil, was:

Try this

Resource

<Window.Resources>
    <Style x:Key="myDogToggleButton1" TargetType="ToggleButton">
        <Style.Resources>
            <BitmapImage x:Key="Normal" UriSource="Images/darblue_tab.png"/>
            <BitmapImage x:Key="Pressed" UriSource="Images/img-whitebg.png" />
            <BitmapImage x:Key="Disabled" UriSource="Images/img-greenbg.png"/>
        </Style.Resources>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <Image Name="Normal" Source="{DynamicResource ResourceKey=Normal}" Stretch="Fill"/>
                        <Image Name="Pressed" Source="{DynamicResource ResourceKey=Pressed}" Visibility="Hidden"/>
                        <Image Name="Disabled" Source="{DynamicResource ResourceKey=Disabled}" Visibility="Hidden"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                            <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                            <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="myDogToggleButton2" TargetType="ToggleButton" BasedOn="{StaticResource myDogToggleButton1}">
        <Style.Resources>
            <BitmapImage x:Key="Normal" UriSource="Images/img-darkbg.png" />
            <BitmapImage x:Key="Pressed" UriSource="Images/Screenshot_5.png"/>
            <BitmapImage x:Key="Disabled" UriSource="Images/img-bluebg.png"/>
        </Style.Resources>
    </Style>
</Window.Resources>

Xaml

<Grid>
    <ToggleButton HorizontalAlignment="Left" Style="{StaticResource myDogToggleButton1}"/>
    <ToggleButton  HorizontalAlignment="Right" Style="{StaticResource myDogToggleButton2}"/>
</Grid>

Update Using single style.

<Grid>
    <ToggleButton Height="300" Width="300" HorizontalAlignment="Left" Style="{StaticResource myDogToggleButton1}"/>
    <ToggleButton  Height="300" Width="300" Style="{StaticResource myDogToggleButton1}" HorizontalAlignment="Right">
        <ToggleButton.Resources>
            <BitmapImage x:Key="Normal" UriSource="Images/img-darkbg.png" />
            <BitmapImage x:Key="Pressed" UriSource="Images/Screenshot_5.png"/>
            <BitmapImage x:Key="Disabled" UriSource="Images/img-bluebg.png"/>
        </ToggleButton.Resources>
    </ToggleButton>
</Grid>