wpf 具有基于IsMouseOver触发器的更改图像行为的按钮无法将TemplateBinding内容用作图像源

yeotifhr  于 2023-03-13  发布在  SEO
关注(0)|答案(1)|浏览(146)

我对XAMLWPF有点陌生,我尝试制作一个基于IsMouseOver触发器改变其行为的按钮,它使用静态数据(对于单个元素),当我尝试泛化它时,它不起作用
这是我泛化前的代码

<Style x:Key="ActionButton" TargetType="Button">
        <Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Background" Value="#FF220A5B"/>
        <Setter Property="Foreground" Value="#FFFFFF"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="100"
                            Background="{TemplateBinding Background}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                            <ContentPresenter.Content>
                                <Image x:Name="imagePresenter" Source="/Resources/del-closed.png" Stretch="Uniform"/>
                            </ContentPresenter.Content>
                        </ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="imagePresenter" Property="Source" Value="/Resources/del-opened.png"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter TargetName="imagePresenter" Property="Source" Value="/Resources/del-closed.png"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

它是这样运作的:
错误〉enter image description here
正确〉enter image description here
这是我泛化后的代码

<Style x:Key="ActionButton" TargetType="Button">
        <Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Background" Value="#FF220A5B"/>
        <Setter Property="Foreground" Value="#FFFFFF"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="100"
                            Background="{TemplateBinding Background}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                            <ContentPresenter.Content>
                                <Image x:Name="imagePresenter" Source="{TemplateBinding Content}" Stretch="Uniform"/>
                            </ContentPresenter.Content>
                        </ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="imagePresenter" Property="Source" Value="{TemplateBinding Content}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter TargetName="imagePresenter" Property="Source" Value="{TemplateBinding Tag}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我试着制作自己的UserControl,但我做不到,因为我不知道如何放置可以从设计器引用的自定义属性!
正如你所看到的,我试图把它绑定到内容和标签属性,这样我就可以在我的主XAML文件上写干净的代码。
注意:我知道我可以在调用的按钮中放置ContentPresenter,但我确实希望我的按钮语法是这样的

<Button x:Name="btnDelete" Content="/Resources/del-opened.png" Tag="/Resources/del-closed.png" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Style="{StaticResource ActionButton}"/>

任何有关WPFXAML的资源,以提高我的知识将不胜感激

j8yoct9x

j8yoct9x1#

{TemplateBinding }不能在触发器中使用,应将其替换为使用RelativeSource={RelativeSource TemplatedParent}的常规绑定

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="imagePresenter" Property="Source" 
                Value="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
    </Trigger>
    <Trigger Property="IsMouseOver" Value="False">
        <Setter TargetName="imagePresenter" Property="Source" 
                Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
    </Trigger>
</ControlTemplate.Triggers>

相关问题