uwp ToggleButton change backgound color

Question

in UWP I am trying to change the background color of a ToggleButton for "Checked" and "unchecked" - the background can be one of three colors depending on the state.

the xaml code is :
<ToggleButton Content="TEST Toggle"
Checked="TBChecked" Unchecked="TBUnChecked"
HorizontalAlignment="Center" >
</ToggleButton>

code behind is

SolidColorBrush redBrush = new SolidColorBrush(Windows.UI.Colors.Red);

private void TBChecked(object sender, RoutedEventArgs e)
{
ToggleButton tb = sender as ToggleButton;

        tb.Background = redBrush;
        tb.Content = "in Checked";
    }

    private void TBUnChecked(object sender, RoutedEventArgs e)
    {
        ToggleButton tb = sender as ToggleButton;
        tb.Background = redBrush;
        tb.Content = "in Uhchecked";
    }

TBUnChecked - changes the background color
TBChecked - goes to the default color

Is there a simple way to set the background color to something different other than the background color when "CHECKED" (I can change the background with color, however I want to be able to set it to one of three colors depending on the state)

thanks
Paul

Answer 1

Hello,
Welcome to Microsoft Q&A,

A simple way to set the background color of controls is to custom control template. We use control template to customize a control’s visual structure and visual behavior.

For convenience, we can change the visual structure of a control based on existing style. Check the following steps:

1. Enter Style="{StaticResource ToggleButtonRevealStyle}" in the ToggleButton tag, click ToggleButtonRevealStyle with the mouse and press F12, or right-click ToggleButtonRevealStyle and select Go To Definition, then we can find the definition of ToggleButtonRevealStyle. Copy the definition of ToggleButtonRevealStyle to Page.Resources of the current page and renamed it. Make sure the ToggleButton control appliies the style.
2. Find the VisualState whose Name is Normal, change the value of RootGrid.Background to Red and add a Setter statement:

    <VisualState x:Name="Normal">  
       <VisualState.Setters>  
           <Setter Target="RootGrid.Background" Value="red"/>  
           <Setter Target="ContentPresenter.Content" Value="in Uhchecked"/>  
       </VisualState.Setters>  
   

   ……
   </VisualState>
3. Find the VisualState whose Name is PointerOver, and add a Setter statement:

   <Setter Target="ContentPresenter.Content" Value="in Uhchecked"/>  
   

4. Find the VisualState whose Name is Pressed, and add a Setter statement:

   <Setter Target="ContentPresenter.Content" Value="in Uhchecked"/>  
   

5. Find the VisualState whose Name is Checked, and add a Setter statement:

   <Setter Target="ContentPresenter.Content" Value="in Checked"/>  
   

6. Find the VisualState whose Name is CheckedPointerOver, and add a Setter statement:

   <Setter Target="ContentPresenter.Content" Value="in Checked"/>  
   

7. Find the VisualState whose Name is CheckedPressed, and add a Setter statement:

   <Setter Target="ContentPresenter.Content" Value="in Checked"/>  
   

RootGrid is the Name of the root element of the ToggleButton. And the ContentPresenter is used to display the content of a control.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.