c# - toggle button with different images

Question

Below given code is used for toggling images. It works but when I click on button white rectangle is shown as a foreground of button. Is there any better way?

private void music_click(object sender, RoutedEventArgs e)
{
    System.Diagnostics.Debug.WriteLine("music clickedddd");
    switch (key)
    {
        case 1:
            var brush = new ImageBrush();
            BitmapImage image = new BitmapImage(new Uri(@"Images/music pause button.png", UriKind.Relative));
            brush.ImageSource = image;
            music.Background = brush;

            key = 0;
            System.Diagnostics.Debug.WriteLine("music clickedddd pause");
            break;

        case 0:
            var brush2 = new ImageBrush();
            BitmapImage image2 = new BitmapImage(new Uri(@"Images/Music on.png", UriKind.Relative));
            brush2.ImageSource = image1;
            music.Background = brush2;

            key = 1;
            System.Diagnostics.Debug.WriteLine("music clickedddd play");
            break;
    }
}

Answer 1

I recommend styling your ToggleButton to show two different VisualStates for the two cases "paused" and "running" (The ToggleButton control supports the two VisualStates "Checked" and "Unchecked"). How would I do this? Well I tried the following code and it works:

<UserControl
x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
    <ControlTemplate x:Key="MySpecialToggleButton" TargetType="ToggleButton">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RunningIcon">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PausedIcon">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Image x:Name="PausedIcon" Source="/SilverlightApplication2;component/assets/paused.png" Visibility="Visible" Width="16" Height="16"/>
            <Image x:Name="RunningIcon" Source="/SilverlightApplication2;component/assets/running.png" Visibility="Collapsed" Width="16" Height="16"/>
        </Grid>
    </ControlTemplate>
</UserControl.Resources>

<ToggleButton Height="20" Width="20" Template="{StaticResource MySpecialToggleButton}"/>

I assume you still want to handle the toggling to start playing music or stop it, well you can still handle the click in code behind but you won't have to change the button appearance anymore. And you do not have to track whether the button is toggled or not (your variable named "key"), you can always ask your button if it is checked or unchecked. And you do not need to aks it, just use the specialized ToggleButton events "Checked" and "Unchecked".

Answer 2

You should try using StoryBorads (http://msdn.microsoft.com/en-us/library/ms742868(v=vs.110).aspx) for this type of animation.