WP 8.1 ToggleButton Change Icon when Checked / UnChecked

Question

I have the following XAML code for Windows Phone 8.1 (non SilverLight):

<Grid>
  <ToggleButton Name="TogBtn" VerticalAlignment="Center" HorizontalAlignment="Center" Checked="ToggleButton_OnChecked">
    <SymbolIcon Symbol="play"></SymbolIcon>
  </ToggleButton>
</Grid>

The output of the above code is:

How can I change the icon to a stop icon when the toggle button is checked and then back to play icon when unchecked?

I thought this would be easy to find through Google, but apparently not.

Answer 1

Please change your XAML to this:

<Grid>
    <ToggleButton x:Name="TogBtn" HorizontalAlignment="Center" VerticalAlignment="Center" Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked">
        <SymbolIcon Symbol="Play"></SymbolIcon>
    </ToggleButton>
</Grid>

And please add this to your .cs file:

private void ToggleButton_Checked(object sender, RoutedEventArgs e)
{
    TogBtn.Content = new SymbolIcon(Symbol.Stop);
}

private void ToggleButton_Unchecked(object sender, RoutedEventArgs e)
{
    TogBtn.Content = new SymbolIcon(Symbol.Play);
}

That should do the job!