title: Clicking on WPF ToggleButton changes other ToggleButtons values
body: <p>I have a simple ToggleButton with Style triggers to change the button's image based on the state of IsChecked.  This is working fine for one button.  However when I add more than one button to a grid, clicking one of the ToggleButtons changes the state of the others.  Should I use some other trigger type instead of one based on the botton's style?</p>
  
  <p><strong>Here is the xaml block to lay out the three ToggleButtons:</strong></p>
  
  <pre class="lang-xml prettyprint-override"><code>   &lt;Grid Height="362" Width="259"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
              &lt;RowDefinition/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;ToggleButton Style="{StaticResource TogglebuttonStyle}" IsChecked="{x:Null}" IsThreeState="True"
                Width="15" Height="15" Grid.Row="0" Grid.Column="0"/&gt;
          &lt;ToggleButton Style="{StaticResource TogglebuttonStyle}" IsChecked="{x:Null}" IsThreeState="True"
                Width="15" Height="15" Grid.Row="1" Grid.Column="0"/&gt;
          &lt;ToggleButton Style="{StaticResource TogglebuttonStyle}" IsChecked="{x:Null}" IsThreeState="True"
                Width="15" Height="15" Grid.Row="2" Grid.Column="0"/&gt;
      &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>And here is the Style with triggers:</strong>
  </p>
  
  <pre><code>   &lt;Style x:Key="TogglebuttonStyle" TargetType="ToggleButton"&gt;
          &lt;Style.Triggers&gt;
              &lt;Trigger Property="IsChecked" Value="True"&gt;
                  &lt;Setter Property="Content"&gt;
                      &lt;Setter.Value&gt;
                          &lt;Image Source="{StaticResource ImagePlus}"/&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsChecked" Value="False"&gt;
                  &lt;Setter Property="Content"&gt;
                      &lt;Setter.Value&gt;
                          &lt;Image Source="{StaticResource ImageMinus}"/&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsChecked" Value="{x:Null}"&gt;
                  &lt;Setter Property="Content"&gt;
                      &lt;Setter.Value&gt;
                          &lt;Image Source="{StaticResource ImageNeutral}"/&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Trigger&gt;
          &lt;/Style.Triggers&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p><strong>I'll call this a workaround, but now each button retains its own state:</strong></p>
  
  <p>I found if I moved my Style block out of App.xaml (within the  tag) and defined style triggers for each button, the problem behavior went away.  Since I'm fairly new to WPF/XAML I'm not sure if it's an actual solution or a hacky workaround.  It seems redundant to specify things this way.</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;ToggleButton IsChecked="True" IsThreeState="True"
            Width="25" Height="25" Grid.Row="2" Margin="-1,19,1,-19"&gt;
      &lt;ToggleButton.Style&gt;
          &lt;Style TargetType="ToggleButton"&gt;
              &lt;Style.Triggers&gt;
                  &lt;Trigger Property="IsChecked" Value="True"&gt;
                      &lt;Setter Property="Content"&gt;
                          &lt;Setter.Value&gt;
                              &lt;Image Source="{StaticResource ImagePlus}"/&gt;
                          &lt;/Setter.Value&gt;
                      &lt;/Setter&gt;
                  &lt;/Trigger&gt;
                  &lt;Trigger Property="IsChecked" Value="False"&gt;
                      &lt;Setter Property="Content"&gt;
                          &lt;Setter.Value&gt;
                              &lt;Image Source="{StaticResource ImageMinus}"/&gt;
                          &lt;/Setter.Value&gt;
                      &lt;/Setter&gt;
                  &lt;/Trigger&gt;
                  &lt;Trigger Property="IsChecked" Value="{x:Null}"&gt;
                      &lt;Setter Property="Content"&gt;
                          &lt;Setter.Value&gt;
                              &lt;Image Source="{StaticResource ImageNeutral}"/&gt;
                          &lt;/Setter.Value&gt;
                      &lt;/Setter&gt;
                  &lt;/Trigger&gt;
              &lt;/Style.Triggers&gt;
          &lt;/Style&gt;
      &lt;/ToggleButton.Style&gt;
  &lt;/ToggleButton&gt;
  </code></pre>