WPF Changing the style of a UserControl in a ListView - wpf

Question

I'm having issues setting the style of my UserContorl. I have the UserControl called BusyIndicator defined in a file. Below is the xaml.
<UserControl x:Class="Foo.Client.UI.SVGs.BusyIndicator"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
>
<UserControl.Template>
<ControlTemplate>
<Border Width="{Binding Width}" Height="{Binding Height}" Visibility="{TemplateBinding Control.Visibility}">
<Canvas Width="{Binding Width}" Height="{Binding Height}" Visibility="{TemplateBinding Control.Visibility}">
<Path Fill="{Binding Foreground}"
Height="25"
Width="25"
Data="M20.519,4.617c-3.262-3.111-7.821-3.965-12.03-2.236 c-4.282,1.76-6.895,5.654-6.863,10.227l3.658-0.025C5.263,9.51,7.017,6.892,9.894,5.71c2.81-1.154,5.85-0.598,8.037,1.456 l-1.395,1.376h5.39V3.227L20.519,4.617z"/>
</Canvas>
</Border>
</ControlTemplate>
</UserControl.Template>
</UserControl>
I then reference the UserControl and use it in a ListView. The object the ListView is binding to has a property named Status. When Status is set to "Running", I'd like to change the style. When I run it, the Button is hidden so I know the Status property is notifying properly. But the svg:BusyIndicator control remains unchanged.
<UserControl x:Class="Foo.Views.Screens.CollectionResultsView"
AutomationProperties.AutomationId="CollectionResultsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:svg="clr-namespace:Foo.Client.UI.SVGs;assembly=Foo.Client.UI"
d:DesignWidth="700">
<ListView ItemsSource="{Binding TargetStatusView}">
<StackPanel>
<Button>
<TextBlock Text="X"></TextBlock>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="Running">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<svg:BusyIndicator Width="25" Height="25">
<svg:BusyIndicator.Style>
<Style TargetType="svg:BusyIndicator">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="Running">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
</svg:BusyIndicator>
</StackPanel>
</ListView>
</UserControl>
I also tried to change the TargetType to UserControl but that didn't work either.
<svg:BusyIndicator Width="25" Height="25">
<UserControl.Style>
<Style TargetType="UserControl">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="Running">
<Setter Property="Visibility" Value="Hidden"/>
<Setter Property="Foreground" Value="White" />
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
</svg:BusyIndicator>
Setting <svg:BusyIndicator Width="25" Height="25" Visibility="Hidden"> does work but if I add <Setter Property="Visibility" Value="Hidden" /> to the style, above <Style.Triggers>, it does not work.
I also tried other properties like Opacity and Height without success.
What am I missing?

Answer 1

The issue was with the way we defined the BusyIndicator control. Because DataContext was set to {Binding RelativeSource={RelativeSource Self}}. With this, when it was used in the ListView, the context was the control itself and not the data bound to the ListView. So Binding="{Binding Status}" did work because the BusyIndicator usercontrol doesn't have a Status prooperty.
We updated the control below and it worked.
<UserControl x:Class="Foo.Client.UI.SVGs.BusyIndicator"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Canvas>
<Path Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=Foreground}"
Data="M20.519,4.617c-3.262-3.111-7.821-3.965-12.03-2.236 c-4.282,1.76-6.895,5.654-6.863,10.227l3.658-0.025C5.263,9.51,7.017,6.892,9.894,5.71c2.81-1.154,5.85-0.598,8.037,1.456 l-1.395,1.376h5.39V3.227L20.519,4.617z">
</Path>
<Path Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=Foreground}" Data="M4.733,20.634c3.26,3.111,7.82,3.964,12.03,2.234c4.281-1.76,6.894-5.652,6.862-10.227l-3.658,0.025c0.021,3.073-1.733,5.69-4.61,6.872c-2.808,1.155-5.85,0.598-8.037-1.457l1.396-1.375H3.324v5.315L4.733,20.634z" >
</Path>
</Canvas>
</UserControl>