编辑:
也许我要通过交换样式来使事情复杂化,因为我真正想要的唯一一件事就是能够根据布尔属性的状态使用不同的背景图像。问题应该更多... 如何根据布尔属性的状态将背景图像用于按钮?
当鼠标悬停在按钮上时,我有两种样式可以对图像进行动画处理和交换图像,这些样式可以正常工作,但是我想要的是能够根据布尔属性的状态使用一种样式。类似于... 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>
<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>
<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>
不允许样式对象影响其所应用对象的样式属性。
我想念什么?
答案 0 :(得分:2)
我不认为这是这样做的方式。您可以在代码中设置样式,但是更好的方法是摆脱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}"/>
完成。
答案 1 :(得分:1)
您无法在应用于同一元素的Style
的{{1}}的{{1}}中设置en元素的Setter
属性。这基本上就是错误消息告诉您的内容。
您可以使用单个Style
并在Style
中使用带有条件的触发器以根据Style
属性的值使它看起来有所不同,或者可以使用转换器:
SomeBooleanProperty
XAML:
class StyleConverter : DependencyObject, IValueConverter
{
public Style Style1 { get; set; }
public Style Style2 { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
bool b = (bool)value;
return b ? Style1 : Style2;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
答案 2 :(得分:0)
这就是我最后用单一样式完成的工作。
<Style x:Key="Style1" TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding SomeBooleanProperty}" Value="False">
<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>
</DataTrigger>
<DataTrigger Binding="{Binding IsCSomeBooleanPropertyurrentPage}" Value="True">
<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>
</DataTrigger>
</Style.Triggers>
</Style>