ToggleButton change background when pressed (but only once)

Question

When a button gets pressed the background ( Rectangle Fill ) of the button changes. So the user can see what buttons have been pressed and what not.

Problem:

I use a trigger and a Togglebutton to perform the "IsChecked" to change the background. But the background change may only happens 1 time.

For example:

Button Background = black --> PRESS --> Button Background = blue

But when i press the button again the Button BackGround changes back to black (since its a ToggleButton).

How can i make sure the background only changes 1 time?

EDIT: The button must remain enabled, because a user gives in a reason when they press the button. Meaning if they pick the wrong reason they are able to change it.

<Style x:Key="ButtonStyleReg" TargetType="{x:Type myClasses:RegButton}">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Grid x:Name="registrationButton">
                <Rectangle Name="rectangleBtn" Fill="#FF89959A" Height="Auto" RadiusY="15" RadiusX="15" Stroke="White" Width="Auto"/>

                <TextBlock x:Name="reason" TextWrapping="Wrap" 
                           Text="{Binding Reason, StringFormat=\{0\}}"
                           HorizontalAlignment="Center" Margin="0,7.5,0,0" Height="Auto" 
                           VerticalAlignment="Top" FontWeight="Bold" >
                </TextBlock>                                                                                   
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsFocused" Value="True"/>
                <!--<Trigger Property="IsDefaulted" Value="True"/>-->

                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="rectangleBtn" Property="Fill" Value="blue" />
                </Trigger>                                                     
                <Trigger Property="IsEnabled" Value="False"/>
            </ControlTemplate.Triggers>
        </ControlTemplate>

    </Setter.Value>
</Setter>
<Setter Property="FontSize" Value="10.667"/>

Listbox that implements the style:

<ListBox x:Name="lbRegistration" ItemsSource="{Binding RegBtns, ElementName=Window}" Background="{x:Null}" 
            BorderBrush="{x:Null}" Grid.Column="1" 
            ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" Height="75">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <myClasses:RegistrationButton x:Name="RegistrationButton" HorizontalAlignment="Center" Height="71" Width="148" 
                                                  Margin="10,0,5,0" 
                                                  Style="{DynamicResource ButtonStyleRegistration}"
                                                  Click="RegistrationButton_Click"
                                                  Title="{Binding Title}"
                                                  Oorzaak="{Binding Oorzaak}"     

                                                  DuurStilstand="{Binding DuurStilstand, 
                                                        Converter={StaticResource  DateTimeConverter}}"

                                                  BeginStilstand="{Binding BeginStilstand}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Best Regards, Pete

Answer 1

Very simple would be if you can access the rectangle from code behind:

rectangleBtn.Fill = Brushes.Blue;

If you can't access it - make yourself two styles. The one that is the original style, the other one is the Blue Style which shall be applied when the user clicks.

In the code behind, on event Click="RegistrationButton_Click" Set the Style to the BlueStyle.

RegistrationButton.Style = this.FindResource("ButtonStyleRegistration") as Style;

Since you always want it blue, this code is enough as it is. It will always make it Blue for you. The first time, and any other time. That way you achieve your requirement and the style will change only once. When the window is loaded, it will load into the original style (the first style). So put in your XAML the style "Black" and in the code behind as shown above.

Then this must be removed:

<Trigger Property="IsChecked" Value="True"> 
    <Setter TargetName="rectangleBtn" Property="Fill" Value="blue" /> 
</Trigger>    

Then this:

<myClasses:RegistrationButton x:Name="RegistrationButton" HorizontalAlignment="Center" Height="71" Width="148"  
Margin="10,0,5,0"  
Style="{DynamicResource ButtonStyleRegistration}" 
Click="RegistrationButton_Click"

Shall be:

<myClasses:RegistrationButton x:Name="RegistrationButton" HorizontalAlignment="Center" Height="71" Width="148"  
Margin="10,0,5,0"  
Style="{DynamicResource ButtonStyleRegBlack}" 
Click="RegistrationButton_Click"

That is all.

Answer 2

If you're using an MVVM approach I would recommend binding the background and the Click command to members in the ViewModel. The first time the button is clicked it sets a flag and changes the background color. The next time the button is clicked, if the flag is set, the command returns without changing the background.

XAML:

<ToggleButton Background="{Binding MyBackground}" Command="{Binding OnClickCmd}"/> 

ViewModel

public class ViewModel : INotifyPropertyChanged
{
     public Brush MyBackground 
     { 
          get { return background_; } 
          set {
                background_ = value;
                PropertyChanged(this, new PropertyChangedEventArg("MyBackground");
          }
     }

     public ICommand OnClickCmd
     {
          get {
               return new DelegateCommand(()=>{ // DelegateCommand implements ICommand
                  if(!isBackgroundSet) {
                      background = Brushes.Red;
                      isBackgroundSet_ = true;    
                  }
               });
          }
     }

     private Brush background_;
     private bool isBackgroundSet_;
     private event PropertyChangedEventHandler PropertyChagned;
 }