BorderStyles transfers to other elements

Question

I have set a Border Style into a UserControl.Resources with a x:key. If i set the Style into a Border all Labels get the same DropShadowEffect. Is it somehow possible that the style is only set on a border?

Thats my Code:

<UserControl x:Class="PetGameUC"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CatOrDog"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">

    <UserControl.Resources>
            <Style x:Key="BorderStyler1" TargetType="{x:Type Border}">
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect BlurRadius="3" ShadowDepth="0" Color="White"/>
                    </Setter.Value>
                </Setter>
            </Style>
</UserControl.Resources>

    <Grid>
        <Border>
            <Grid>
                <Grid.RowDefinitions>
                   
                    <RowDefinition Height="100"/>
                    
                    <RowDefinition Height="300"/>
                </Grid.RowDefinitions>

               
                <Grid Grid.Row="0">
                    <Border Style="{StaticResource BorderStyler1}">
                        <Label Content="SomeText"/>
                    </Border>
                </Grid>

             
                <Border Grid.Row="1" BorderBrush="Black" BorderThickness="2">

                </Border>
            </Grid>
        </Border>
    </Grid>
</UserControl>

There is no `` class in Xamarin. If you are using `wpf` (`System.Windows.Controls`) then please remove the `xamarin` tag. (If you are using the newer `.net maui`, then remove both `wpf` and `xamarin`, and add `maui` tag.) — ToolmakerSteve, Aug 02 '22 at 18:04
Also, please explain better the result that you want. Is your goal to have each row contain a rectangle whose edge is blurred, with text inside it that is not blurred? — ToolmakerSteve, Aug 02 '22 at 18:07

Andreas M. · Accepted Answer · 2022-08-02T18:08:38.107

If I understood your question correctly, you want to be able to apply this effect to every element that has an Effect field.

If that's the case, instead of adding a style to your resources, you could directly add the effect itself:

<!-- [...] -->

<UserControl.Resources>
    <DropShadowEffect x:Key="Effect" BlurRadius="3" ShadowDepth="0" Color="White"/>
</UserControl.Resources>

and assign it to each element's Effect field directly like so:

<UserControl x:Class="PetGameUC"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CatOrDog"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">

    <UserControl.Resources>
        <DropShadowEffect x:Key="Effect" BlurRadius="3" ShadowDepth="0" Color="White"/>
    </UserControl.Resources>

    <Grid>
        <Border>
            <Grid>
                <Grid.RowDefinitions>
                   
                    <RowDefinition Height="100"/>
                    
                    <RowDefinition Height="300"/>
                </Grid.RowDefinitions>

               
                <Grid Grid.Row="0">
                    <Border Effect="{StaticResource Effect}">
                        <Label Content="SomeText"/>
                    </Border>
                </Grid>

             
                <Border Grid.Row="1" BorderBrush="Black" BorderThickness="2">

                </Border>
            </Grid>
        </Border>
    </Grid>
</UserControl>

Edit:

It seems like Effect property propagates by default to the whole object tree of an element.

According to WPF how to stop DropShadowEffect to propagate to child?, the solution to this problem is to... apply the effect on a separate tree... so, your snippet would transform as follows:

<!-- From -->
<Grid Grid.Row="0">
    <Border Style="{StaticResource BorderStyler1}">
        <Label Content="SomeText"/>
    </Border>
</Grid>

<!-- To -->
<Grid Grid.Row="0">
    <!-- All border properties such as margin and padding 
    should be applied to both borders
    EXCEPT Style and BorderBrush. 
    These should remain empty and Transparent
    accordingly, on the border that contains 
    your elements -->
    <Border Style="{StaticResource BorderStyler1}" 
            Margin="10"
            Padding="5"
            BorderBrush="Red"
            CornerRadius="5"
            BorderThickness="1">
    </Border>
    <Border Margin="10"
            Padding="5"
            BorderBrush="Transparent"
            CornerRadius="5"
            BorderThickness="1"> 
        <Label Content="SomeText"/>
    </Border>
</Grid>

Just for the Borders. If i use the key for a Border, all elements into Border with "Border Properties" get the same effect. I want that only the Border get the DropShadowEffect :) @Andreas M. — MalinaStempel, Aug 02 '22 at 17:38
So you want the perimeter of the border to has the shadow and not the elements? — Andreas M., Aug 02 '22 at 17:40

BorderStyles transfers to other elements

1 Answers1

Edit: