DropShadowEffect 到 XAML 中的特定元素答案

【问题标题】：DropShadowEffect to a specific element in XAMLDropShadowEffect 到 XAML 中的特定元素
【发布时间】：2012-11-02 15:57:39
【问题描述】：

我有一个 Border，其中包含其他 UI 控件，如 Canvas、Buttons、ComboBox 等。我只想要一个 DropShadowEffect 在边框上，但所有子控件最终都会继承 DropShadowEffect。

例如，以下代码在 TextBox、Button、ComboBox 上产生 DropShadowEffect。如何仅将 DropShadowEffect 应用于边框？

<Border>
   <Border.Effect>
      <DropShadowEffect ...>
   </Border.Effect>
   <Canvas>
      <TextBox>...</TextBox>
      <Button>...</Button>
      <ComboBox>...<ComboBox>
   </Canvas>
</Border>

【问题讨论】：

标签： c# wpf xaml effect

【解决方案1】：

有点棘手，我是这样做的。

 <ControlTemplate x:Key="ShadowBorderShadowTemplate">
        <!-- Start shadow effect to fragment -->
        <Grid x:Name="Transform">
            <Border BorderThickness="1"
                BorderBrush="Gray"
                Background="{x:Null}"
                Margin="1">
                <Border.Effect>
                    <DropShadowEffect BlurRadius="6"
              Direction="270"
              ShadowDepth="2" />
                </Border.Effect>
            </Border>

            <Border BorderThickness="0"
                    Margin="1,2,1,1"
                    BorderBrush="{x:Null}"
                    Background="White" />
        </Grid>
        <!-- End shadow effect to fragment -->
    </ControlTemplate>

    <ControlTemplate x:Key="ContentControlTemplateWithShadow" 
               TargetType="{x:Type ContentControl}">
        <Grid>
            <!-- Shadow around the left nav -->
            <ContentControl Template="{DynamicResource ShadowBorderShadowTemplate}" />
            <ContentPresenter />
        </Grid>
    </ControlTemplate>

并使用类似的资源

 <ContentControl Template="{StaticResource ContentControlTemplateWithShadow}">
        <Border>
            <Canvas>
                <TextBox Text="ABCD" Canvas.Left="115" Canvas.Top="134" />
                <Button Canvas.Left="115" Canvas.Top="91">Test</Button>
                <ComboBox Canvas.Left="115" Canvas.Top="54" />
            </Canvas>
        </Border>
    </ContentControl>

希望对你有帮助..

【讨论】：

谢谢，虽然看起来在代码后面比 XAML 更容易
可能会，但是如果我们需要在多个地方应用阴影怎么办？

【解决方案2】：

当 DropShadowEffect 应用于 layout container（例如 DockPanel 或 Canvas）时，效果将应用于元素或视觉对象的视觉树，包括其所有子元素。

但以下文章显示了实现此目标的解决方法here。

假设您的边框具有效果。只要有another border with same position but without the effect，就可以解决问题-

<Border Margin="10">
   <Border.Effect>
      <DropShadowEffect ...>
   </Border.Effect>
</Border>
<Border Margin="10">
   <Canvas>
      <TextBox>...</TextBox>
      <Button>...</Button>
      <ComboBox>...<ComboBox>
   </Canvas>
</Border>

【讨论】：

不错的技巧建议，但它不起作用。此外，我还在第二个边框上添加了一个白色/透明边框，但仍然继承了第一个边框效果。奇怪...