WPF Trigger not working, what am i doing wrong?

问题:

I have the following code (only relevant snippets)

<ribbon:RibbonWindow .............>
    <Grid>
        <ribbon:Ribbon>
            <ribbon:RibbonToggleButton 
                   x:Name="Button2"
                   SmallImageSource="Images\SmallIcon.png"
                   Label="Properties">
                   <ribbon:RibbonToggleButton.Triggers>
                       <Trigger Property="ToggleButton.IsChecked" Value="True">
                           <Setter TargetName="SPanel1" Property="UIElement.IsVisible" Value="False"/>
                           <Setter TargetName="SPanel2" Property="UIElement.IsVisible" Value="True"/>

                       </Trigger>
                   </ribbon:RibbonToggleButton.Triggers>

            </ribbon:RibbonToggleButton>


        </ribbon:Ribbon>
    </Grid>

</ribbon:RibbonWindow>

And when i run the application, it hangs up and te debugger pops up. What am i doing wrong?

I have tried setting the trigger on the grid, wrapping everything in a control template and setting a trigger there, same problem!

Edit

I have tried creating a button, and only the tag of trigger causes the Unhandled Exception error.

<Button Content="Button" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="12,27,0,0" Name="TestButton" VerticalAlignment="Top" Width="75" >
      <Button.Triggers>
           <Trigger></Trigger>
      </Button.Triggers>
</Button>

Edit 2

Using Data triggers makes the Unhandled Exception go away but the trigger is not responding:

 <StackPanel.Style>
                <Style TargetType="StackPanel">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=Button2, Path=ToggleButton.IsChecked}" Value="True">
                            <Setter Property="UIElement.Visibility" Value="Hidden"></Setter>
                        </DataTrigger>

                    </Style.Triggers>
                </Style>
            </StackPanel.Style>

Edit 3

<ribbon:RibbonToggleButton 
              x:Name="Button2"
              SmallImageSource="Images\SmallIcon.png"
              Label="Properties">

</ribbon:RibbonToggleButton>

And The panel to be hidden

<StackPanel                  
      Grid.Row="2"                   
      Grid.Column="1"                       
      x:Name="SPanel1"
      Visibility="Visible">                        
      <Label>*Deafult Grid*</Label>   
<StackPanel.Style>                           
     <Style TargetType="StackPanel">                               
          <Style.Triggers>                                   
              <DataTrigger Binding="{Binding ElementName=Button2, Path=ToggleButton.IsChecked}" Value="True">                                     
               <Setter Property="UIElement.Visibility" Value="Hidden"></Setter>                                                                
              </DataTrigger>                                
          </Style.Triggers>                            
     </Style>
                </StackPanel.Style>
</StackPanel>

And for second StackPanel that i want to show

<StackPanel 
     Grid.Row="2" 
     Grid.Column="1" 
     x:Name="SPanel2"
     Visibility="Hidden">
         <Label>*Panel 2 *</Label>
         <StackPanel.Style>
             <Style TargetType="StackPanel">
                 <Style.Triggers>
                     <DataTrigger Binding="{Binding ElementName=Button2, Path=IsChecked}" Value="True">
                     <Setter Property="UIElement.Visibility" Value="Visible"></Setter>
                     </DataTrigger>

                 </Style.Triggers>
             </Style>
         </StackPanel.Style>
 </StackPanel>

回答1:

You need to use DataTrigger, and set the style property of the two panels to the IsChecked propery of the checkbox, here an example

        <CheckBox Name="check" Content="Prova" IsChecked="True"> </CheckBox>

        <Canvas Name="SPanel1" Background="Blue" Width="100" Height="100">
            <Canvas.Style>
                <Style TargetType="Canvas">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=check, Path=IsChecked}" Value="True">
                             <Setter Property="Visibility" Value="Hidden"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Canvas.Style>
        </Canvas>

回答2:

UIElement.IsVisible is not a mutable property. You'll have to set UIElement.Visibility, which is an enum.

The reason why you get an exception is because FrameworkElement.Triggers only accepts EventTrigger. This means that if you do UIElement.Triggers (Button.Triggers or ribbon:RibbonToggleButton.Triggers), you can only add EventTriggers under that. Style, DataTemplate and ControlTemplate accept all TriggerBase derived classes.

Edit

As Mackho pointed out, you cannot use TargetName under Style. You'd have to accomplish this using data binding.

Assuming SPanel1 is a StackPanel, here's what you can do:

Create a converter

public class BoolToVisibilityConverter : IValueConverter {
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        return (bool)value ? Visibility.Visible : Visibility.Collapsed;
    }
    public object ConvertBack(object value, Type targetType,  object parameter, CultureInfo culture)
    {
        return null;
    }
}

Somewhere in the root control's resources, add BoolToVisibilityConverter

Add x:Name to your toggle button; lets say you call it "MyToggleButton"

<StackPanel x:Name="SPanel1" ...
            Visibility="{Binding IsChecked, ElementName=MyToggleButton, Converter={StaticResource BoolToVisibilityConverter}}" />

And do something very similar for SPanel2.