基于布尔属性将背景图像添加到按钮 [英] Add background image to a button based on a boolean property

问题描述

我需要根据布尔属性的状态使用图像作为按钮的背景。我试图这样做的方法是使用两种不同的样式，Style1和Style2，并根据属性的状态使用一种，但我收到错误。

I need to use an image as the background on a button based on the status of a boolean property. The way I'm trying to do it is by having two different styles, Style1 and Style2 and use one depending on the status of the property but I'm getting an error.

以下是款式...

Here are the styles...

   <Window.Resources>

///在悬停时动画背景图像的动画
< Storyboard x：Key =" MouseOverStoryboard"持续时间=" 00：00：00.5">
< DoubleAnimation Storyboard.TargetName =" image1" Storyboard.TargetProperty = QUOT;不透明度"为了= QUOT; 0"持续时间=" 00：00：00.3" />
< DoubleAnimation Storyboard.TargetName =" image2" Storyboard.TargetProperty = QUOT;不透明度"为了= QUOT 1 QUOT;持续时间=" 00：00：00.3" />
< / Storyboard>

< Storyboard x：Key =" MouseLeaveStoryboard"持续时间=" 00：00：00.5">
< DoubleAnimation Storyboard.TargetName =" image1" Storyboard.TargetProperty = QUOT;不透明度"为了= QUOT 1 QUOT;持续时间=" 00：00：00.3" />
< DoubleAnimation Storyboard.TargetName =" image2" Storyboard.TargetProperty = QUOT;不透明度"为了= QUOT; 0"持续时间=" 00：00：00.3" />
< / Storyboard>

/// Animations to animate background images on hover <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>

/// 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"源= QUOT;图像/ image1.png"拉伸= QUOT;无" />
< Image x：Name =" image2"源= QUOT;图像/图像1-hover.png"拉伸= QUOT;无"不透明度= QUOT; 0" />
< ContentPresenter />
< / Grid>
< ControlTemplate.Triggers>
< Trigger Property =" IsMouseOver"值= QUOT;真">

< 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>

/// 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/image1.png" Stretch="None" /> <Image x:Name="image2" Source="Images/image1-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>

/// STYLE2
< 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"源= QUOT;图像/ image2.png"拉伸= QUOT;无" />
< Image x：Name =" image2"源= QUOT;图像/图像2-hover.png"拉伸= QUOT;无"不透明度= QUOT; 0" />
< ContentPresenter />
< / Grid>
< ControlTemplate.Triggers>
< Trigger Property =" IsMouseOver"值= QUOT;真">

< 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>
< /Window.Resources>

/// STYLE2 <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/image2-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> </Window.Resources>

这里我根据状态来应用样式SomeBooleanProperty，但我收到错误。

Here I'm appying the Styles based on the status of the SomeBooleanProperty, but I'm getting an error.

    <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属性它适用的对象。

Error Message
Style object is not allowed to affect the Style property of the object to which it applies.

任何想法如何根据布尔属性的状态将背景图像应用于按钮？

Any idea how to apply a background image to a button based on the status of a boolean property?

推荐答案

你需要结合所显示的内容&NBSP;按钮只能使用一种样式。 在该样式中，使用DataTrigger设置背景。

You need a combination of what you have shown.  Use only one style for the button.  In that style use a DataTrigger to set the background.

这篇关于基于布尔属性将背景图像添加到按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！