[Windows 8] An application bar toggle button
- by Benjamin Roux
To stay in the application bar stuff, here’s another useful control which enable to create an application bar button that can be toggled between two different contents/styles/commands (used to create a favorite/unfavorite or a play/pause button for example). namespace Indeed.Controls
{
public class AppBarToggleButton : Button
{
public bool IsChecked
{
get { return (bool)GetValue(IsCheckedProperty); }
set { SetValue(IsCheckedProperty, value); }
}
public static readonly DependencyProperty IsCheckedProperty =
DependencyProperty.Register("IsChecked", typeof(bool), typeof(AppBarToggleButton), new PropertyMetadata(false, (o, e) => (o as AppBarToggleButton).IsCheckedChanged()));
public string CheckedContent
{
get { return (string)GetValue(CheckedContentProperty); }
set { SetValue(CheckedContentProperty, value); }
}
public static readonly DependencyProperty CheckedContentProperty =
DependencyProperty.Register("CheckedContent", typeof(string), typeof(AppBarToggleButton), null);
public ICommand CheckedCommand
{
get { return (ICommand)GetValue(CheckedCommandProperty); }
set { SetValue(CheckedCommandProperty, value); }
}
public static readonly DependencyProperty CheckedCommandProperty =
DependencyProperty.Register("CheckedCommand", typeof(ICommand), typeof(AppBarToggleButton), null);
public Style CheckedStyle
{
get { return (Style)GetValue(CheckedStyleProperty); }
set { SetValue(CheckedStyleProperty, value); }
}
public static readonly DependencyProperty CheckedStyleProperty =
DependencyProperty.Register("CheckedStyle", typeof(Style), typeof(AppBarToggleButton), null);
public bool AutoToggle
{
get { return (bool)GetValue(AutoToggleProperty); }
set { SetValue(AutoToggleProperty, value); }
}
public static readonly DependencyProperty AutoToggleProperty =
DependencyProperty.Register("AutoToggle", typeof(bool), typeof(AppBarToggleButton), null);
private object content;
private ICommand command;
private Style style;
private void IsCheckedChanged()
{
if (IsChecked)
{
// backup the current content and command
content = Content;
command = Command;
style = Style;
if (CheckedStyle == null) Content = CheckedContent;
else Style = CheckedStyle;
Command = CheckedCommand;
}
else
{
if (CheckedStyle == null) Content = content;
else Style = style;
Command = command;
}
}
protected override void OnTapped(Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
base.OnTapped(e);
if (AutoToggle) IsChecked = !IsChecked;
}
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
To use it, it’s very simple.
<ic:AppBarToggleButton Style="{StaticResource PlayAppBarButtonStyle}" CheckedStyle="{StaticResource PauseAppBarButtonStyle}"
Command="{Binding Path=PlayCommand}" CheckedCommand="{Binding Path=PauseCommand}"
IsChecked="{Binding Path=IsPlaying}" />
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
When the IsPlaying property (in my ViewModel) is true the button becomes a Pause button, when it’s false it becomes a Play button.
Warning: Just make sure that the IsChecked property is set in last in your control !!
If you don’t use style you can alternatively use Content and CheckedContent. Furthermore you can set the AutoToggle to true if you don’t want to control is IsChecked property through binding.
With this control and the AppBarPopupButton, you can now create awesome application bar for your apps !
Stay tuned for more awesome Windows 8 tricks !
