Question

I have several StackPanels that change visibility based on ToggleButtons. The code below works if I replace Tag with btn1 on the DataTrigger-lines.
How do I use the value of the Tag property?

<Window x:Class="MyTestApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TestApp">

    <Window.Resources>
        <Style x:Key="panelStyle" TargetType="{x:Type StackPanel}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=Tag, Path=IsChecked}" Value="False">
                    <Setter Property="StackPanel.Visibility" Value="Collapsed" />
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=Tag, Path=IsChecked}" Value="True">
                    <Setter Property="StackPanel.Visibility" Value="Visible" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>

    <WrapPanel>
        <ToggleButton Content="One" Name="btn1" />
        <ToggleButton Content="Two" Name="btn2" />

        <StackPanel Style="{StaticResource panelStyle}" Tag="{Binding btn1}">
            <Label Content="Data to panel 1" />
        </StackPanel>

        <StackPanel Style="{StaticResource panelStyle}" Tag="{Binding btn2}">
            <Label Content="Data to panel 2" />
        </StackPanel>

    </WrapPanel>

</Window>    

This question is very similar, but I’m missing details on how to pass an element name.
XAML – Generic textbox stylewith triggers / parameters?

Answer 1

Your bindings are incorrect.

In your DataTemplate the bindings should be:

<DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="False">
   <Setter Property="StackPanel.Visibility" Value="Collapsed" />
</DataTrigger>

Here the RelativeSource with a mode of Self tells the binding engine that the object to bind against is object to which the style is being applied (e.g. your StackPanel). The PropertyPath of Tag.IsChecked tells the binding engine to look for a property called IsChecked from the object stored in Tag.

Finally the bindings in your StackPanel should be:

<StackPanel Style="{StaticResource panelStyle}" Tag="{Binding ElementName=btn1}">
   <Label Content="Data to panel 1" />
</StackPanel>

Here ElementName creates a binding to another element in the logical tree. If you do not explicitly assign to any properties in a Binding as in your original example:

Tag="{Binding btn1}"

The value specified is assigned to the Path property. So this would be the same as:

Tag="{Binding Path=btn1}"

Also note, that using Tag is not considered best practice since it’s type is of object and its use is unrestricted, and hence can take on any number of different meanings throughout your project (which often makes it difficult to understand, especially when used in Templates that are located far away from their actual use).

Hope this helps!