Switch button with different images

Question

The code below is used to switch images. It works, but when I click the button, a white rectangle appears as the foreground of the button. Is there a 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 two cases: “paused” and “running” (the ToggleButton control supports two VisualStates, “Checked” and “Unchecked”). How can I do it? 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 that you still want to process the switch to start playing music or stop it, but you can still process the click on the code, but you no longer have to change the look of the button. And you do not need to keep track of whether the button is switched or not (your variable with the name "key"), you can always ask for your button if it is checked or unchecked. And you don’t need to do this, just use the ToggleButton special events “Checked” and “Unverified”.

Answer 2

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