How to set multiple BackgroundEffectBehavior targets

Mesidex · 08 Oct 2023, 16:25

Hi,

I'm looking for information on how to set the "Source" property of noesis:BackgroundEffectBehavior to target multiple element sources.

The current result I am able to achieve with BackgroundEffectBehavior is as follows:

https://imgur.com/a/IKA5h4p

Whereas the result I am trying to achieve is this:

https://imgur.com/a/pvtvJl2

The style of the button:

    <Style x:Key="Dex.DefaultButton" TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="Background" Value="{StaticResource Dex.Brush.SecondaryButtonBackground}" />
        <Setter Property="Padding" Value="14,12" />
        <Setter Property="FontSize" Value="16" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        CornerRadius="8">
                        <Border
                            Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}"
                            CornerRadius="8">
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{TemplateBinding Content}" />
                            </StackPanel>
                        </Border>
                        <b:Interaction.Behaviors>
                            <noesis:BackgroundEffectBehavior Source="{Binding ElementName=source}">
                                <BlurEffect Radius="16" />
                            </noesis:BackgroundEffectBehavior>
                        </b:Interaction.Behaviors>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

In case there is no straightforward way of handling it, is it possible to perhaps alter the Source property (that originates from within the ControlTemplate) via the Button element itself, allowing multiple Button elements to have a different source for BackgroundEffectBehavior?

10 Oct 2023, 19:45

Hi, the Source property just points to an element in the tree, that element can be any panel containing part or all the UI below your dialogs:

<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">
  <Grid x:Name="NormalUIContainer">
    ...you can have many UI elements and panels here...
  </Grid>
  <Grid x:Name="DialogsContainer">
    <Border x:Name="SomeDialog">
      <b:Interaction.Behaviors>
        <noesis:BackgroundEffectBehavior Source="{Binding ElementName=source}">
          <BlurEffect Radius="16" />
        </noesis:BackgroundEffectBehavior>
      </b:Interaction.Behaviors>
      ...
    </Border>
  </Grid>
</Grid>

Could that work for you?

How to set multiple BackgroundEffectBehavior targets Topic is solved

How to set multiple BackgroundEffectBehavior targets

Re: How to set multiple BackgroundEffectBehavior targets

Who is online