Question

I am trying to have a circular overlay come to the top when a certain view model enters an offline state. So it becomes partially transparent and on top of other elements in the Grid.

DataTriggers in the style have worked for everything so far, but I cannot set Panel.ZIndex. There is no error in build or run, but the property is not set (I assume because it’s an attached property?)

<Ellipse Fill="DarkGray" Panel.ZIndex="-10" Width="50" Height="50">
  <Ellipse.Style TargetType="Ellipse">
    <Style>
      <Style.Triggers>
        <DataTrigger Binding="{Binding Status}" Value="Offline">
            <Setter Property="Opacity" Value=".6" />
            <Setter Property="Panel.ZIndex" Value="10" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Ellipse.Style>
</Ellipse>

Answer 1

You have the syntax correct, however the problem is that you are defining Panel.ZIndex in the <Ellipse> tag, and properties set in the tag itself will take precedence over any triggered values.

To fix it, simply set Panel.ZIndex in your style instead of the Ellipse tag

<Ellipse Fill="DarkGray" Width="50" Height="50">
  <Ellipse.Style TargetType="Ellipse">
    <Style>
      <Setter Property="Panel.ZIndex" Value="-10" />
      <Style.Triggers>
        <DataTrigger Binding="{Binding Status}" Value="Offline">
            <Setter Property="Opacity" Value=".6" />
            <Setter Property="Panel.ZIndex" Value="10" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Ellipse.Style>
</Ellipse>

See MSDN’s article on Dependency Property Precedence for more info