CODEWITHSUNDEEP
c#wpf
Knowledge
Knowledge

Reputation: 134

Using style triggers on a static resource style to change more than properties

I am using Material Design XAML and I am trying to set a togglebutton icon and background color to something else when checked.

enter image description here

RED BOX CODE 

<ToggleButton ToolTip="MaterialDesignFlatPrimaryToggleButton"
              IsChecked="False"
              Grid.Column="2"
              Margin="78,58,99,52"
              Grid.Row="1">
    <Style TargetType="ToggleButton"
           BasedOn="{StaticResource MaterialDesignFlatPrimaryToggleButton}">
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Background" Value="Green" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ToggleButton>

GREEN BOX CODE

<ToggleButton Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}"
              ToolTip="MaterialDesignFlatPrimaryToggleButton"
              IsChecked="False"
              Grid.ColumnSpan="2"
              Grid.Column="3"
              Margin="205,58,188,52"
              Grid.Row="1">
    <md:PackIcon Kind="WindowClose"
                 Foreground="Red"
                 Height="21"
                 Width="21"/>
</ToggleButton>

I was thinking I could use the basedon attribute to reserve the style with material design...if possible.

I am trying reserve the style and change the icon and set background color when checked to look like this:

enter image description here

How would I do this?

Upvotes: 1

Views: 900

Answers (1)

BionicCode
BionicCode

Reputation: 28968

You are currently setting the Style as the ToggleButton.Content.
You've got to define the Style nested into the ToggleButton.Style property:

<ToggleButton ToolTip="MaterialDesignFlatPrimaryToggleButton"
          IsChecked="False"
          Grid.Column="2"
          Margin="78,58,99,52"
          Grid.Row="1">
  <ToggleButton.Style>
    <Style TargetType="ToggleButton"
           BasedOn="{StaticResource MaterialDesignFlatPrimaryToggleButton}">
      <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
          <Setter Property="Background" Value="Green" />

          <Setter Property="Content">
            <Setter.Value>
              <md:PackIcon Kind="SmileyHappy" />
            </Setter.Value>
          </Setter>
        </Trigger>
      </Style.Triggers>
    </Style>
  </ToggleButton.Style>    
</ToggleButton>

Upvotes: 1

Related Questions