Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>you also can achieve this without custom control, like this:</p> <pre><code> &lt;ToggleButton x:Name="PlayButton" IsChecked="{Binding Path=IsPlayChecked, Mode=TwoWay}" Width="30" Height="30" Style="{StaticResource ToggleButtonStyle}"&gt; &lt;ToggleButton.Content&gt; &lt;Grid Margin="3"&gt; &lt;Grid Visibility="{Binding ElementName=PlayButton, Path=IsChecked, Converter={StaticResource visConverter}, ConverterParameter=Invert}" Margin="0"&gt; &lt;Image Source="../Resources/play_normal.png"&gt;&lt;/Image&gt; &lt;Image Source="../Resources/play_hover.png" Visibility="{Binding ElementName=PlayButton, Path=IsMouseOver, Converter={StaticResource visConverter}}"&gt;&lt;/Image&gt; &lt;Image Source="../Resources/play_hit.png" Visibility="{Binding ElementName=PlayButton, Path=IsPressed, Converter={StaticResource visConverter}}"&gt;&lt;/Image&gt; &lt;Image Source="../Resources/play_disabled.png" Visibility="{Binding ElementName=PlayButton, Path=IsEnabled, Converter={StaticResource visConverter}, ConverterParameter=Invert}"&gt;&lt;/Image&gt; &lt;/Grid&gt; &lt;Grid Visibility="{Binding ElementName=PlayButton, Path=IsChecked, Converter={StaticResource visConverter}}"&gt; &lt;Image Source="../Resources/pause_normal.png"&gt;&lt;/Image&gt; &lt;Image Source="../Resources/pause_hover.png" Visibility="{Binding ElementName=PlayButton, Path=IsMouseOver, Converter={StaticResource visConverter}}"&gt;&lt;/Image&gt; &lt;Image Source="../Resources/pause_hit.png" Visibility="{Binding ElementName=PlayButton, Path=IsPressed, Converter={StaticResource visConverter}}"&gt;&lt;/Image&gt; &lt;Image Source="../Resources/pause_disabled.png" Visibility="{Binding ElementName=PlayButton, Path=IsEnabled, Converter={StaticResource visConverter}, ConverterParameter=Invert}"&gt;&lt;/Image&gt; &lt;/Grid&gt; &lt;/Grid&gt; &lt;/ToggleButton.Content&gt; &lt;/ToggleButton&gt; </code></pre> <p>Where:</p> <pre><code>&lt;Converters:BooleanToVisibilityConverter x:Key="visConverter"/&gt; </code></pre> <p>And defined <em>BooleanToVisibilityConverter</em> like this:</p> <pre><code>public class BooleanToVisibilityConverter: IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var flag = (bool)value; if (parameter != null) flag = !flag; return (flag ? Visibility.Visible : Visibility.Collapsed); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return ((value is Visibility) &amp;&amp; (((Visibility)value) == Visibility.Visible)); } } </code></pre> <p>Hope it'll help!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload