时间戳

首页 > 解决方案 > 基于 XAML 中的属性将样式应用于按钮

wpf - 基于 XAML 中的属性将样式应用于按钮

问题描述

编辑：
也许我通过尝试交换样式使事情变得复杂，因为我唯一想要的就是能够根据布尔属性的状态使用不同的背景图像。问题应该更多......如何根据布尔属性的状态将背景图像用于按钮？

当鼠标悬停在按钮上时，我有两种样式可以动画和交换图像，这些样式可以正常工作，但我想要的是能够根据布尔属性的状态使用其中一种样式。有点像If property equals true, use style1 otherwise use style2……

这是我的代码：

动画：

     <Storyboard x:Key="MouseOverStoryboard" Duration="00:00:00.5">
        <DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:00.3" />
        <DoubleAnimation Storyboard.TargetName="image2" Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.3" />
    </Storyboard>

    <Storyboard x:Key="MouseLeaveStoryboard" Duration="00:00:00.5">
        <DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.3" />
        <DoubleAnimation Storyboard.TargetName="image2" Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:00.3" />
    </Storyboard>

风格1：

    <Style x:Key="Style1"
           TargetType="{x:Type Button}">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Image x:Name="image1" Source="Images/image.png" Stretch="None" />
                            <Image x:Name="image2" Source="Images/image-hover.png" Stretch="None" Opacity="0" />
                            <ContentPresenter />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                     Value="True">
                                <Trigger.EnterActions>
                                    <StopStoryboard BeginStoryboardName="MouseLeaveStoryboard" />
                                    <BeginStoryboard Name="MouseOverStoryboard"
                                                     Storyboard="{StaticResource MouseOverStoryboard}" />
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <StopStoryboard BeginStoryboardName="MouseOverStoryboard" />
                                    <BeginStoryboard Name="MouseLeaveStoryboard"
                                                     Storyboard="{StaticResource MouseLeaveStoryboard}" />
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

风格2：

    <Style x:Key="Style2"
           TargetType="{x:Type Button}">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Image x:Name="image1" Source="Images/image2.png" Stretch="None" />
                            <Image x:Name="image2" Source="Images/image-hover2.png" Stretch="None" Opacity="0" />
                            <ContentPresenter />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                     Value="True">
                                <Trigger.EnterActions>
                                    <StopStoryboard BeginStoryboardName="MouseLeaveStoryboard" />
                                    <BeginStoryboard Name="MouseOverStoryboard"
                                                     Storyboard="{StaticResource MouseOverStoryboard}" />
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <StopStoryboard BeginStoryboardName="MouseOverStoryboard" />
                                    <BeginStoryboard Name="MouseLeaveStoryboard"
                                                     Storyboard="{StaticResource MouseLeaveStoryboard}" />
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

应用样式

    <Button x:Name="MyButton"
            Command="{Binding ButtonCommand}">
            <Button.Style>
                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SomeBooleanProperty}" Value="True">
                            <Setter Property="Style" Value="{StaticResource Style1}" />
                        </DataTrigger>

                        <DataTrigger Binding="{Binding SomeBooleanProperty}" Value="True">
                            <Setter Property="Style" Value="{StaticResource Style2}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
    </Button>

错误信息：

Style 对象不允许影响其应用对象的 Style 属性。

我错过了什么？

标签： wpfxaml

解决方案

我不相信这是做到这一点的方法。您可以在后面的代码中设置样式，但更好的方法是摆脱 Style2 并与 Style1 结合，如下所示：

<Style x:Key="Style1"
       TargetType="{x:Type Button}">
    <Style.Setters>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Image x:Name="image1"
                               Source="Images/image.png" Stretch="None" />
                        <Image x:Name="image2"
                               Source="Images/image-hover.png" Stretch="None"
                               Opacity="0" />
                        <ContentPresenter />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="image1" Property="Source"
                                    Value="Images/image2.png"/>
                            <Setter TargetName="image2" Property="Source"
                                    Value="Images/image-hover2.png"/>
                            <Trigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="MouseLeaveStoryboard" />
                                <BeginStoryboard Name="MouseOverStoryboard"
                                                 Storyboard="{StaticResource MouseOverStoryboard}" />
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="MouseOverStoryboard" />
                                <BeginStoryboard Name="MouseLeaveStoryboard"
                                                 Storyboard="{StaticResource MouseLeaveStoryboard}" />
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>

然后你可以写：

<Button Style="{StaticResource Style1}"/>

完毕。

推荐阅读