i'm having a small issue with an style trigger on an image. The trigger does change the source of the image, but when it does i lose the streght="fill" property. I've also tried setting it in the trigger, but it seem to ignore it. What am i missing here?
<Image x:Name="xBackground"
Height="99.5"
Width="271"
Stretch="Fill">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="Green.png" />
<Style.Triggers>
<DataTrigger Binding="{Binding HasAlarm}" Value="true">
<Setter Property="Source" Value="Red.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
Related
This behavior seems incredibly odd to me, and I assume I am doing something wrong to get it. I have a ContentControl that uses a DataTemplete to render an TabControl. I want an image to display when there are no tabs open, and hide when there are. But here is the problem:
<Image Name="image1" Stretch="Uniform" Visibility="Hidden" Source="/Affinity;component/Images/affinity_logo.png">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count, ElementName=tabcontrolworkspaces}"
Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
This doesn't work... sort of.
I have tested this on Visiblity and Margin (just to be sure). This trigger will alter the property, unless that property is defined in the Image tags. If it is, the trigger will not update that property. So, if I don't define a visibility for the image, and the trigger hides it, it works. The problem is, the default is Visible and the trigger needs to show it when value=0 and hide it otherwise.
Why won't the trigger override properties that are explicitly defined? Isn't that its purpose?
This is the normal Dependency Property Value Precedence. Setting it on Image is at #3, while in the Style trigger is at a lower precedence of #6.
You can do this instead:
<Image Name="image1" Stretch="Uniform" Source="/Affinity;component/Images/affinity_logo.png">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Hidden" />
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count, ElementName=tabcontrolworkspaces}"
Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
Set your Visibility in the Style in addition to in the Trigger
I've encountered this weird behavior with DataTriggers many times, where sometimes DataTrigger Setters won't take effect unless the Setter is also defined in the Style.
Won't work
<Image Visibility="Collapsed">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding Something}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
<Image.Style>
</Image>
Will work
<Image>
<Image.Style>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding Something}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
<Image.Style>
</Image>
Edit: See the accepted answer for an explanation on why this doesn't work. It has to do with the order in which dependency properties are determined, where properties defined in the <Tag> always take precedence over triggered values.
When a trigger is true it changes the value to the desired value. When it is no longer true it returns the value to the previous value. It won't change it to a value it wans't.
This means that if the original value is visible, and you change it to visible, when the trigger is no longer active, the value will revert back to visible.
I have an app in WPF. I am using entypo icons and i decalred one as a resource:
<Grid.Resources>
<iconPacks:Entypo x:Key="PlayIcon" Width="50" Height="30" Kind="ControllerPlay"></iconPacks:Entypo>
</Grid.Resources>
Let's say I have two icons like this ( play/pause icon) and I want to change between them when the user clicks on ToggleButton. I came up with something like this, but unfortunately, it's not working:
<ToggleButton>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}"
Value="true">
<Setter Property="Source"
Value="{StaticResource PauseIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}"
Value="false">
<Setter Property="Source"
Value="{StaticResource PlayIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ToggleButton>
Could anyone tell me if I can achieve it like this (with slight modifications) or point me into right direction?
You can't set the Source of an Image to a PackIconEntypo. Set the Content property of the ToggleButton instead:
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="{StaticResource PlayIcon}" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Content" Value="{StaticResource PauseIcon}" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
I have an image element that is populated via databinding - if the binding returns a path, the image is drawn. If not (path comes in an an empty string), we get no image.
<Image Source="{Binding Path=.Screenshot, Mode=OneWay}" Stretch="Fill" Margin="5,5,5,5" />
That works well, except that the margin is applied to the layout no matter what (which looks bad for empty images). I figured I'd do a DataTrigger instead that only applies the margin is the path is not empty, but:
Image doesn't seem to have a Style (actually it does, ignore this part)
I don't know how to test for "string is not empty".
What I'd like to do is something like the pseudo-XAML below. Is that possible in XAML?
<Image Source="{Binding Path=.Screenshot, Mode=OneWay}" Stretch="Fill" >
<Image.Style>
<Style TargetType="Image">
<Setter Property="Margin" Value="0,0,0,0" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=.Screenshot}" Value="!NullOrEmpty">
<Setter Property="Margin" Value="5,5,5,5" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
Should I be maybe using an entirely different approach for this?
Do it the other way round, by having a DataTrigger for the values null and "":
<Style TargetType="Image">
<Setter Property="Margin" Value="5,5,5,5" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Screenshot}" Value="{x:Null}">
<Setter Property="Margin" Value="0,0,0,0" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=Screenshot}" Value="">
<Setter Property="Margin" Value="0,0,0,0" />
</DataTrigger>
</Style.Triggers>
</Style>
You may probably also just have a Trigger on the Images's Source property:
<Style TargetType="Image">
<Setter Property="Margin" Value="5,5,5,5" />
<Style.Triggers>
<Trigger Property="Source" Value="{x:Null}">
<Setter Property="Margin" Value="0,0,0,0" />
</Trigger>
</Style.Triggers>
</Style>
I have a Command bound to a Button in XAML. When executed, the command changes a property value on the underlying DataContext. I would like the button's Content to reflect the new value of the property.
This works*:
<Button Command="{x:Static Member=local:MyCommands.TestCommand}"
Content="{Binding Path=TestProperty, Mode=OneWay}" />
But this doesn't:
<Button Command="{x:Static Member=local:MyCommands.TestCommand}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=TestProperty, Mode=OneWay}" Value="True">
<DataTrigger.Setters>
<Setter Property="Content" Value="Yes"/>
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding Path=TestProperty, Mode=OneWay}" Value="False">
<DataTrigger.Setters>
<Setter Property="Content" Value="No"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Why is that?
* By "works" I mean the Content gets updated whenever I click the button. I don't know if it's important or not, but just in case it is, I'm using .NET 3.5 SP1.
UPDATE:
I also tried another variation (removing the second DataTrigger in favor of default value), still to no avail:
<Button Command="{x:Static Member=local:MyCommands.TestCommand}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Content" Value="No"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=TestProperty, Mode=OneWay}" Value="True">
<DataTrigger.Setters>
<Setter Property="Content" Value="Yes"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
TIA
Try to set your default Content to No and to use only the first DataTrigger. Avoid the second one.
I solved the problem myself. It turned out I was looking in the wrong place. The bound CLR property was of different type than what I'd assumed in XAML. My stupidity, really.
I'm trying to define a DataTrigger for an Image element so that it shows a connected/disconnected image. I keep getting an Invalid PropertyDescriptor message. Any ideas?
<Image>
<Image.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static my:Server.Instance}, Path=Connected, Mode=OneWay}"
Value="True">
<Setter Property="Source"
Value="serverconnected.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
I just changed Property="Source" to Property="Image.Source" and it's working. Thanks everyone
Add a BitmapImage to your resources like so:
<BitmapImage x:Key="serverConnected" UriSource="serverconnected.png" />
And change your existing code to refer to it:
<Image>
<Image.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static my:Server.Instance}, Path=Connected, Mode=OneWay}"
Value="True">
<Setter Property="Source"
Value="{StaticResource serverConnected}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>