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>

Binding Variables in Style Resources

Binding Variables in Style Resources

Re: Binding Variables in Style Resources

Who is online