Question

我有一个这样的切换按钮：

<ToggleButton Name="pptSlide_ON_OFF"
              IsChecked="{Binding DataContext.SlideExcluded, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"
              Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="1" Grid.RowSpan="1"
              Background="Transparent"
              Command="{Binding DataContext.SlideOnOffCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}">
    <ToggleButton.Template>
        <ControlTemplate>
            <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
                <Image x:Name ="pptSlide_ON_OFF_image">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding SlideExcluded}" Value="true">
                                    <Setter Property="Source" Value="/Import Icons Eye OFF.png"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SlideExcluded}" Value="false">
                                    <Setter Property="Source" Value="/Import Icons Eye.png"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="pptSlide_ON_OFF_image" Property="Source" Value="/MouseOver.png" />
                </Trigger>

                <Trigger Property="ButtonBase.IsPressed"  Value ="True">
                    <Setter TargetName="bg" Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

我想有条件的'IsMouseOver＆＃39;触发如果可能，这样当按钮未切换时，鼠标悬停时，基本图像会像现在一样更改为其他图像（MouseOver.png），然后切换时，更改为其他图像（MouseOver2.png））。

Answer 1

    <Style TargetType="{x:Type ToggleButton}" x:Key="TButton">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Height" Value="35" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Name="OuterBorder" BorderThickness="0,1,1,0" >
                        <Border Name="InnerBorder" BorderThickness="2">
                            <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        </Border>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonSingleTrigger}" />
                            <!--<Setter Property="Style" TargetName="OuterBorder" Value="{StaticResource ButtonOuterBHover}" />-->
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="false">
                            <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonDefaultState}" />
                            <!--<Setter Property="Style" TargetName="OuterBorder" Value="{StaticResource ButtonOuterBHover}" />-->
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonSingleTrigger}" />

                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="true" />
                                <Condition Property="IsChecked" Value="true" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonMultiTrigger}" />
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

You can use MultiTrigger. I stripped some of your implementation specifics from the example, but the principle should be clear:

<ToggleButton.Template>
    <ControlTemplate TargetType="{x:Type ToggleButton}">
        <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
            <Image x:Name ="pptSlide_ON_OFF_image" Source="/Image1.png">
            </Image>
        </Grid>
        <ControlTemplate.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True"/>
                    <Condition Property="IsChecked" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="pptSlide_ON_OFF_image" Property="Source" Value="/Image2.png"/>
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="False"/>
                    <Condition Property="IsChecked" Value="True"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="pptSlide_ON_OFF_image" Property="Source" Value="/Image3.png"/>
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True"/>
                    <Condition Property="IsChecked" Value="True"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="pptSlide_ON_OFF_image" Property="Source" Value="/Image4.png"/>
            </MultiTrigger>


            <Trigger Property="ButtonBase.IsPressed"  Value ="True">
                <Setter TargetName="bg" Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ToggleButton.Template>

具有条件鼠标悬停效果的切换按钮

2 个答案: