Multiple ToggleButton image with different highlight image in WPF

I am very new to WPF and needed some pointers as to why this is not working correctly.

I am trying to make a maximize button that will change to a restore button when clicked. I thought a toggle button with 2 different styles that would be changed in the code behind could work. I am first trying to get the maximize button working and have ran into a problem. I get the error 'System.Windows.Controls.Image' is not a valid value for the 'System.Windows.Controls.Image.Source' property on a Setter. in my xaml. I seem to be not understanding something completely. Any help would be most helpful :)

Ryan

<Style x:Key="Maximize" TargetType="{x:Type ToggleButton}">
            <Style.Resources>
                <Image x:Key="MaxButtonImg" Source="/Project;component/Images/maxbutton.png" />
                <Image x:Key="MaxButtonHighlight" Source="/Project;component/Images/maxbutton-highlight.png" />
            </Style.Resources>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <Image>
                        <Image.Style>
                            <Style TargetType="{x:Type Image}">
                                <Setter Property="Source" Value="{DynamicResource MaxButtonImg}"/>
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Source" Value="{DynamicResource MaxButtonHighlight}"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                </Setter.Value>
            </Setter>
        </Style>


<ToggleButton Name="MaxButton" Width="31" Height="31" BorderThickness="0" Click="MaxButton_Click" Margin="0,0,10,0" Tag="Max" 
                      Style="{DynamicResource Maximize}" />

My code behind would do something simple like this:

private void MaxButton_Click(object sender, RoutedEventArgs e)
    {
        ToggleButton tg = (ToggleButton)sender;

        if ( tg.IsChecked == true) {
            tg.Style = (Style)FindResource("Restore");
            this.WindowState = WindowState.Maximized;

        } else {
            tg.Style = (Style)FindResource("Maximize");
      开发者_如何学编程      this.WindowState = WindowState.Normal;
        }
    }

---

You don't want to change the image on mouse over. I added my images to a folder called Images in the project and set build action on the images to Resource.

<Window.Resources>

        <Image x:Key="minImage" Source="/Images/min.png" Height="16" Width="16" />
        <Image x:Key="maxImage" Source="/Images/max.png" Height="16" Width="16" />

        <Style TargetType="{x:Type ToggleButton}" x:Key="minMaxButtonStyle">
            <Setter Property="Content" Value="{DynamicResource minImage}" />
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="{DynamicResource maxImage}" />
                </Trigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>

    <StackPanel>

        <ToggleButton Style="{StaticResource minMaxButtonStyle}" />

    </StackPanel>

</Window>