Binding Variables in Style Resources

DavidG · 23 Jan 2023, 18:53

Hi,

so I found this amazing code snippet which hides the Border by default and only if my SelectedArticle variable is ARTICLE_A it becomes visible.

The problem is that I have to repeat it in every single Border I want to use this functionality. I would love to put this into my Resources and set the Value (ARTICLE_A, ARTICLE_B, ...) from the Border instead.

This would make my XAML significantly more readable.

How it is:

<Border>
  <Border.Style>
    <Style TargetType="Border">
      <Setter Property="Visibility" Value="Hidden"/>
      <Style.Triggers>
        <DataTrigger Binding="{Binding SelectedArticle}" Value="ARTICLE_A">
          <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Border.Style>
  <TextBlock Text="Text of Article A"/>
</Border>

private enum Articles {
ARTICLE_A,
ARTICLE_B,
ARTICLE_C
}
private Article selectedArticle;
public string SelectedArticle { get => selectedArticle; }

How I would like it to be:

<UserControl.Resources>
	<Style x:Key="InvisibleBorderTemplate" TargetType="Border">
                 <Setter Property="Visibility" Value="Hidden"/>
                        <Style.Triggers>
                                <DataTrigger Binding="{Binding SelectedArticle}" Value="VALUE_OF_STYLE_RESOURCE">
                                 <Setter Property="Visibility" Value="Visible"/>
                    	</DataTrigger>
             	</Style.Triggers>
        </Style>
</UserControl.Resources>
<Grid>
	<Border Style="{StaticResource InvisibleBorderTemplate}" ValueOfStyleResource="ARTICLE_A">
		<TextBlock Text="Text of Article A"/>
	</Border>
	<Border Style="{StaticResource InvisibleBorderTemplate}" ValueOfStyleResource="ARTICLE_B">
		<TextBlock Text="Text of Article B"/>
	</Border>
	<Border Style="{StaticResource InvisibleBorderTemplate}" ValueOfStyleResource="ARTICLE_C">
		<TextBlock Text="Text of Article C"/>
	</Border>
</Grid>

30 Jan 2023, 12:02

You can do it using interactivity DataTriggers as they allow you to define a binding for the Value. For example:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions">
  <Grid.Resources>
    <Style x:Key="invisibleBorder" TargetType="Border">
      <Setter Property="noesis:StyleInteraction.Triggers">
        <Setter.Value>
          <noesis:StyleTriggerCollection>
            <b:DataTrigger Binding="{Binding SelectedArticle}" Comparison="NotEqual" Value="{Binding Tag, RelativeSource={RelativeSource AncestorType=Border}}">
              <b:ChangePropertyAction PropertyName="Visibility" Value="Hidden"/>
            </b:DataTrigger>
            <b:DataTrigger Binding="{Binding SelectedArticle}" Comparison="Equal" Value="{Binding Tag, RelativeSource={RelativeSource AncestorType=Border}}">
              <b:ChangePropertyAction PropertyName="Visibility" Value="Visible"/>
            </b:DataTrigger>
          </noesis:StyleTriggerCollection>
        </Setter.Value>
      </Setter>
    </Style>
  </Grid.Resources>
  <StackPanel>
    <Border Style="{StaticResource invisibleBorder}" Tag="A">
      <TextBlock Text="Text of Article A"/>
    </Border>
    <Border Style="{StaticResource invisibleBorder}" Tag="B">
      <TextBlock Text="Text of Article B"/>
    </Border>
  </StackPanel>
</Grid>

DavidG · 30 May 2023, 17:59

Hi,
sorry for the late reply, but I finally got it working without any errors.
I still don't understand fully how it works, but at least I can use it to its full potential.
Thanks

Regards,
David

31 May 2023, 18:12

Glad to hear is working.

When the style is applied to the Border it copies the interactivity triggers, so DataTrigger bindings are resolved on that border.

Binding Variables in Style Resources Topic is solved

Binding Variables in Style Resources

Re: Binding Variables in Style Resources

Re: Binding Variables in Style Resources

Re: Binding Variables in Style Resources

Who is online