locked
Keep button in pressed state RRS feed

  • Question

  • How do I make a button stay pressed when pressed? Then when another button is pressed it goes back to its normal state?
    Designer Girl
    Tuesday, March 18, 2008 9:21 PM

Answers

  • Hi,

    A Toggle button is a button that maintains it's state until it is pressed again. The IsChecked property indicates whether the button is checked or not.

    Also, do you want a behavior similar to a RadioButton. Like when you have two RadioButtons then selecting one keeps it checked until you select another?

    If so then you can get the effect you want by following the steps below.

    1. Create a RadioButton
    2. Edit a copy of it's Template by selecting Object->Edit Control Parts (Template) in the Main Menu.
    3. Give the Style a name you like in the next dialog and hit Ok
    4. Now Expand the BulletDecorator
    5. Double click on Bullet in the Objects tree view
    6. Bring up the Asset Pane. Search for ToggleButton and add it by double click in it in the toolbar.
    7. Delete the ContentPresenter within the Bullet
    8. Select the ToggleButton and set its IsHitTestVisible property to False (Uncheck it)
    9. For the IsChecked property of the ToggleButton, click on the small square next to it and select
    TemplateBinding->IsChecked
    10. Scope up to the main scene
    11. Create a copy of the RadioButton you have.

    When you run the project and click on one button it remains checked until you click on the other one.
    Here's a video showing the steps above.

    http://cid-eeb5461a76579756.skydrive.live.com/self.aspx/Public/ToggleRadioButton.wmv

    Hope this was helpful!

    Thanks,
    Jeetendra
    Wednesday, March 19, 2008 2:48 AM

All replies

  • Use a couple of ToggleButtons and inside checked event change other's state via IsChecked property.

    Corrado Cavalli [MVP]
    Tuesday, March 18, 2008 9:42 PM
  • Thanks Corrado but could you please be a little more detailed for a newbie? Are togglebuttons just a normal button? where is checked event? etc

    Thanks


    Designer Girl
    Tuesday, March 18, 2008 9:47 PM
  • Hi,

    A Toggle button is a button that maintains it's state until it is pressed again. The IsChecked property indicates whether the button is checked or not.

    Also, do you want a behavior similar to a RadioButton. Like when you have two RadioButtons then selecting one keeps it checked until you select another?

    If so then you can get the effect you want by following the steps below.

    1. Create a RadioButton
    2. Edit a copy of it's Template by selecting Object->Edit Control Parts (Template) in the Main Menu.
    3. Give the Style a name you like in the next dialog and hit Ok
    4. Now Expand the BulletDecorator
    5. Double click on Bullet in the Objects tree view
    6. Bring up the Asset Pane. Search for ToggleButton and add it by double click in it in the toolbar.
    7. Delete the ContentPresenter within the Bullet
    8. Select the ToggleButton and set its IsHitTestVisible property to False (Uncheck it)
    9. For the IsChecked property of the ToggleButton, click on the small square next to it and select
    TemplateBinding->IsChecked
    10. Scope up to the main scene
    11. Create a copy of the RadioButton you have.

    When you run the project and click on one button it remains checked until you click on the other one.
    Here's a video showing the steps above.

    http://cid-eeb5461a76579756.skydrive.live.com/self.aspx/Public/ToggleRadioButton.wmv

    Hope this was helpful!

    Thanks,
    Jeetendra
    Wednesday, March 19, 2008 2:48 AM
  • Thanks Jeetendra.. that is a really great tutorial but I have a question about it. What if I have 2 buttons and a stack panel and also 2 menus. What if I click on one of those toggle buttons I make with your tutorial (and it stays down) and then I click on one of the menu items or on one of the stack items. Will the button still stay down unless I click on another toggle button? or will it go up when I choose anything. Because I want it to not stay down when I choose anything ese even if it is a menu selection etc. Hope that makes sense?
    Designer Girl
    Wednesday, March 19, 2008 5:28 PM
  • The way the above XAML is written it will work only if the content of the RadioButton is a ToggleButton. In order to achieve the desired behavior some code behind would be the best way.

    Here's is some sample XAML and the code behind

    Thanks,
    Jeetendra Kukreja

    <Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="UntitledProject19.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <Window.Resources>
    <Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
    <Setter.Value>
    <ControlTemplate>
    <Rectangle SnapsToDevicePixels="true" Margin="2" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#F3F3F3" Offset="0"/>
    <GradientStop Color="#EBEBEB" Offset="0.5"/>
    <GradientStop Color="#DDDDDD" Offset="0.5"/>
    <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ToggleButton}">
    <Microsoft_Windows_Themes:ButtonChrome SnapsToDevicePixels="true" x:Name="Chrome" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}">
    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
    </Microsoft_Windows_Themes:ButtonChrome>
    <ControlTemplate.Triggers>
    <Trigger Property="IsChecked" Value="true">
    <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
    <Setter Property="Foreground" Value="#ADADAD"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
    <ToggleButton HorizontalAlignment="Left" Margin="144,89,0,0" x:Name="toggleButton" Style="{DynamicResource ToggleButtonStyle1}" VerticalAlignment="Top" Width="86" Height="73" Content="ToggleButton" LostFocus="ToggleButton_LostFocus"/>
    <Button HorizontalAlignment="Right" Margin="0,119,155,0" VerticalAlignment="Top" Width="139" Height="82" Content="Button"/>
    <Menu VerticalAlignment="Top" Height="41" PreviewMouseDown="Menu_MouseDown">
    <MenuItem Header="MenuItem">
    <MenuItem Header="MenuItem"/>
    </MenuItem>
    </Menu>
    </Grid>
    </Window>


    using System;
    using System.IO;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Navigation;
    using System.Windows.Controls.Primitives;
    namespace UntitledProject19
    {
    public partial class Window1
    {
    public Window1()
    {
    this.InitializeComponent();
    // Insert code required on object creation below this point.
    }
    private void ToggleButton_LostFocus(object sender, RoutedEventArgs e)
    {
    (sender as ToggleButton).IsChecked = false;
    }
    private void Menu_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
    this.toggleButton.IsChecked = false;
    }
    }
    }
    Saturday, March 22, 2008 5:44 AM
  • thanks for the answer and movie! exactly what i need to do.

    cheers,
    Rom
    artefactgroup.com
    primarymotion.com
    Monday, September 29, 2008 4:45 PM
  • ok question - now that i've done this, i cant adjust the corner radius of the button like i can with the simpleButton :(
    is there a way i can have the corner radius adjustment for toggle buttons? it seems like there should be a simple toggle button control.

    pls help!

    thanks,
    Rom
    Monday, September 29, 2008 5:37 PM
  • Looks like the radio button behavior has changed a bit in blend 4--there is no top-level bullet element.  I've followed the tutorial, but I end up with toggle buttons that can't be clicked.  The XAML looks like this:

     

    		<Style x:Key="RadioButtonStyle1" TargetType="RadioButton">
    			<Setter Property="Background" Value="#FF448DCA"/>
    			<Setter Property="Foreground" Value="#FF000000"/>
    			<Setter Property="HorizontalContentAlignment" Value="Left"/>
    			<Setter Property="VerticalContentAlignment" Value="Top"/>
    			<Setter Property="Padding" Value="4,1,0,0"/>
    			<Setter Property="BorderThickness" Value="1"/>
    			<Setter Property="BorderBrush">
    				<Setter.Value>
    					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    						<GradientStop Color="#FFA3AEB9" Offset="0"/>
    						<GradientStop Color="#FF8399A9" Offset="0.375"/>
    						<GradientStop Color="#FF718597" Offset="0.375"/>
    						<GradientStop Color="#FF617584" Offset="1"/>
    					</LinearGradientBrush>
    				</Setter.Value>
    			</Setter>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="RadioButton">
    						<Grid Margin="0,0,8,0">
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="16"/>
    								<ColumnDefinition Width="*"/>
    							</Grid.ColumnDefinitions>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="CommonStates">
    									<VisualState x:Name="Normal"/>
    									<VisualState x:Name="MouseOver"/>
    									<VisualState x:Name="Pressed"/>
    									<VisualState x:Name="Disabled"/>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="CheckStates">
    									<VisualState x:Name="Checked"/>
    									<VisualState x:Name="Unchecked"/>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="FocusStates">
    									<VisualState x:Name="Focused"/>
    									<VisualState x:Name="Unfocused"/>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="ValidationStates">
    									<VisualState x:Name="Valid"/>
    									<VisualState x:Name="InvalidUnfocused"/>
    									<VisualState x:Name="InvalidFocused"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
    								<ToggleButton Content="ToggleButton" d:LayoutOverrides="Height" IsChecked="{TemplateBinding IsChecked}" IsHitTestVisible="False" Margin="0,0,-184,0"/>
    							</Grid>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    

    Is there a better way to keep the button looking "pressed" in blend 4?


    Ric Lewis - SDET Transactions
    Tuesday, December 28, 2010 12:35 AM
  • Is there a way to get this behavior using icons that I've created instead of radio buttons? I need one icon to stay pressed until the next is pressed. Thank you.
    Monday, November 21, 2011 3:41 PM