User Control - dependency property to Change Image Issues - wpf

Question

i'm having issues setting the Image from a dependency property. It seems like the trigger doesnt fire. I just want hide/show and image, or set the source if possible.
public static readonly DependencyProperty HasSingleValueProperty =
DependencyProperty.Register("HasSingleValue", typeof(bool), typeof(LevelControl), new
FrameworkPropertyMetadata(false,FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public bool HasSingleValue
{
get { return (bool)GetValue(HasSingleValueProperty); }
set { SetValue(HasSingleValueProperty, value); }
}
public LevelControl()
{
this.InitializeComponent();
//this.DataContext = this;
LayoutRoot.DataContext = this;
}
//Control Markup
<Grid x:Name="LayoutRoot">
<Image x:Name="xGreenBarClientTX" HorizontalAlignment="Stretch" Height="13" Margin="7,8.5,7,0"
Stretch="Fill"
VerticalAlignment="Top"
Width="47"
Canvas.Left="181.67"
d:LayoutOverrides="Height" >
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding HasSingleValue}" Value="True">
<Setter Property="Opacity" Value="100"/>
</DataTrigger>
<DataTrigger Binding="{Binding HasSingleValue}" Value="False">
<Setter Property="Opacity" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>

Answer 1

Here we go
you have to update your binding as follows (I used Ellipse instead for testing)
<Window
x:Name="myWindow">
<Style TargetType="{x:Type Ellipse}">
<Style.Triggers>
<DataTrigger Binding="{Binding HasSingleValue, ElementName=myWindow}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding HasSingleValue, ElementName=myWindow}" Value="False">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
Then you need to set HasSingleValue
I created two buttons to show and hide my Ellipse.

Answer 2

I think the trouble may be with how you're trying to update the dependency property because I've made a slight alteration to your example to verify the bindings and such do work as expected. I had suspected that there may be a problem with binding to a property on the grid's data context from the image, but that appears to be fine.
It wasn't clear what kind of class you were providing as a data context, but if you're using dependency properties then it needs to be a DependencyObject.
I've provided an example here using a text block and a toggle button to change the dependency property. (assuming you're using code-behind)
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="xGreenBarClientTX" HorizontalAlignment="Stretch" Height="13" Margin="7,8.5,7,0"
VerticalAlignment="Top"
Width="200"
Canvas.Left="181.67" >
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding HasSingleValue}" Value="True">
<Setter Property="Text" Value="Is Set"/>
</DataTrigger>
<DataTrigger Binding="{Binding HasSingleValue}" Value="False">
<Setter Property="Text" Value="Is Not Set"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<Button Grid.Column="1" Content="Toggle" Click="Button_Click" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
and the code-behind:
public MainWindow()
{
InitializeComponent();
LayoutRoot.DataContext = new VM() { HasSingleValue = true };
}
private void Button_Click( object sender, RoutedEventArgs e )
{
var vm = LayoutRoot.DataContext as VM;
if ( vm == null )
return;
vm.HasSingleValue = !vm.HasSingleValue;
}
public class VM : DependencyObject
{
public static readonly DependencyProperty HasSingleValueProperty =
DependencyProperty.Register( "HasSingleValue", typeof( bool ), typeof( VM ), new FrameworkPropertyMetadata( false, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault ) );
public bool HasSingleValue
{
get { return (bool) GetValue( HasSingleValueProperty ); }
set { SetValue( HasSingleValueProperty, value ); }
}
}