BorderStyles transfers to other elements-CodePudding

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>

CodePudding user response：

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>