Question

我正在尝试创建一个图像按钮，根据条件呈现不同的图像。另外，我需要另一种情况，悬停在上面会出现另一张图像。

示例是数据网格行（单元格）内的按钮，在错误条件下显示灰色十字，鼠标悬停显示红叉。如果初始条件为真，则显示灰色勾号，鼠标悬停显示绿色勾号。初始条件来自行的绑定元素。

到目前为止，我没有任何工作！在下面的示例中忽略要映像的路径位置。

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <Button Style="{StaticResource ExcludeIncludeButtonStyle}" />
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

<Style x:Key="ExcludeIncludeButtonStyle" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" BorderThickness="0" Background="Transparent">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="15" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="exclude.png" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="exclude_hover.png" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

在Border添加所需的模板绑定，并且您的绑定有多个条件，您必须使用MultiDataTrigger s：

<ControlTemplate TargetType="Button">
    <Border Name="border" BorderThickness="0" Background="{TemplateBinding Background}">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="15" />
    </Border>
    <ControlTemplate.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{TemplateBinding IsMouseOver}" Value="false"/>
                <Condition Binding="{Binding InitialCondition}" Value="false"/>
            </MultiDataTrigger.Conditions>

            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="GreyCross.png" />
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{TemplateBinding IsMouseOver}" Value="true"/>
                <Condition Binding="{Binding InitialCondition}" Value="false"/>
            </MultiDataTrigger.Conditions>

            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="RedCross.png" />
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{TemplateBinding IsMouseOver}" Value="false"/>
                <Condition Binding="{Binding InitialCondition}" Value="true"/>
            </MultiDataTrigger.Conditions>

            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="GreyTick.png" />
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{TemplateBinding IsMouseOver}" Value="true"/>
                <Condition Binding="{Binding InitialCondition}" Value="true"/>
            </MultiDataTrigger.Conditions>

            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="GreenTick.png" />
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

如何在WPF中使用条件悬停图像创建条件图像按钮

1 个答案: