XAML BorderStyles转换到其他元素

d8tt03nd  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(114)

我已经将边框样式设置到UserControl中。资源带有x:键。如果我将样式设置到边框中,则所有标签都将获得相同的DropShadowEffect。是否有可能只在边框上设置样式?
这是我的代码:

<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>
a9wyjsp7

a9wyjsp71#

如果我没理解错的话,您希望能够将此效果应用于每个具有Effect字段的元素。
如果是这种情况,您可以直接添加效果本身,而不是将样式添加到资源中:

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

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

并将其直接分配给每个元素Effect字段,如下所示:

<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>

编辑:

看起来Effect属性在默认情况下会传播到元素的整个对象树。
根据WPF how to stop DropShadowEffect to propagate to child?,这个问题的解决方案是......将效果应用到一个单独的树......因此,您的代码片段将如下转换:

<!-- 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>

相关问题