Cant set 3 toggle button text content which use same style

Question

i have three toggle buttons which use a singe style resource on wpf, now i cant set their content, content is declared more than once error, each toggle button has a different content. Each toggle button uses an image as background also.

<UserControl.Resources>
    <Style x:Key="Chromeless" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">

                    <Border BorderThickness="0" Width="197" Height="60">

                        <ContentPresenter TextElement.FontFamily="{TemplateBinding TextElement.FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,0,0,0"/>
                    </Border>

                </ControlTemplate>

            </Setter.Value>
        </Setter>

    </Style>
    <Image  x:Key="page1Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_1.png" Height="60" Width="197" />
    <Image  x:Key="page1" Source="/graph_engine;Component/cucaracha/LD3/button_1_pressed.png" Height="60" Width="197" />

    <Image  x:Key="page2Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_2.png" Height="60" Width="197" />
    <Image  x:Key="page2" Source="/graph_engine;Component/cucaracha/LD3/button_2_pressed.png" Height="60" Width="197" />

    <Image  x:Key="page3Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_3.png" Height="60" Width="197" />
    <Image  x:Key="page3" Source="/graph_engine;Component/cucaracha/LD3/button_3_pressed.png" Height="60" Width="197" />

</UserControl.Resources>
<Viewbox Stretch="Fill" StretchDirection="Both">
    <Grid Height="60" Name="grid1" Width="591" Margin="0,0,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="197" />
            <ColumnDefinition Width="197" />
            <ColumnDefinition Width="197" />
        </Grid.ColumnDefinitions>
        <ToggleButton  Style="{StaticResource Chromeless}"  Name="page1" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Checked="page1_Checked" Unchecked="page1_Unchecked">
            <DynamicResource ResourceKey="page1"/>
        </ToggleButton>
        <ToggleButton Grid.Column="1" Style="{StaticResource Chromeless}"  Name="page2" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Unchecked="page2_Unchecked" Checked="page2_Checked">
            <DynamicResource ResourceKey="page2"/>
        </ToggleButton>

        <ToggleButton Grid.Column="2" Style="{StaticResource Chromeless}"  Name="page3" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Checked="page3_Checked" Unchecked="page3_Unchecked">
            <DynamicResource ResourceKey="page3"/>
        </ToggleButton>
    </Grid>
</Viewbox>

Answer 1

Do you mean you can't change the image when you pressed down the toggle button? You only set a image to the content of toggle button. You can use Visual State Manager to change the background like this

If you just want to set the image and failed. Please check the image path.