DavidG
Topic Author
Posts: 11
Joined: 06 Dec 2022, 12:14

Binding Variables in Style Resources

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>
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: Binding Variables in Style Resources

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
Topic Author
Posts: 11
Joined: 06 Dec 2022, 12:14

Re: Binding Variables in Style Resources

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
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: Binding Variables in Style Resources

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.

Who is online

Users browsing this forum: Google [Bot] and 69 guests