WPF 阴影Effect使用整理

一、WPF 阴影Effect

WPF中的控件效果主要通过Effect来实现，而Effect有DropShadowEffect（投影效果）和BlurEffect（模糊效果）两个派生类，本文将主要介绍Effect的运用！

 

二、DropShadowEffect（投影效果）

基本属性：

属性	说明	描述
Color	设置阴影效果背景色	Color="Red"
ShadowDepth	设置阴影的偏移度	ShadowDepth="5"
Direction	设置阴影的角度	Direction="-45"
BlurRadius	设置阴影模糊程度	BlurRadius="20"
Opacity	设置阴影透明度	Opacity="1"

 

 <UniformGrid Background="LightGreen" Columns="4">
     <StackPanel Margin="20">
         <TextBlock Text="Direction=0" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Black" Direction="0" ShadowDepth="10"/>
             </TextBlock.Effect>
         </TextBlock>
         <TextBlock Text="Direction=90" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Black" Direction="90" ShadowDepth="10"/>
             </TextBlock.Effect>
         </TextBlock>
         <TextBlock Text="Direction=180" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Black" Direction="180" ShadowDepth="10"/>
             </TextBlock.Effect>
         </TextBlock>
         <TextBlock Text="Direction=270" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Black" Direction="270" ShadowDepth="10"/>
             </TextBlock.Effect>
         </TextBlock>
         <TextBlock Text="Direction=360" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Black" Direction="360" ShadowDepth="10"/>
             </TextBlock.Effect>
         </TextBlock>

     </StackPanel>
     <StackPanel Margin="20" Background="White">
         <TextBlock Text="ShadowDepth=0" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Red" Direction="0" ShadowDepth="0"/>
             </TextBlock.Effect>
         </TextBlock>
         <TextBlock Text="ShadowDepth=20" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Red" Direction="0" ShadowDepth="20"/>
             </TextBlock.Effect>
         </TextBlock>
         <TextBlock Text="ShadowDepth=40" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Red" Direction="0" ShadowDepth="40"/>
             </TextBlock.Effect>
         </TextBlock>
         <TextBlock Text="ShadowDepth=80" Margin="0,20">
             <TextBlock.Effect>
                 <DropShadowEffect Color="Red" Direction="0" ShadowDepth="80"/>
             </TextBlock.Effect>
         </TextBlock>

     </StackPanel>
     <StackPanel>
         <Border Height="80" Width="200" CornerRadius="25" Background="Green" Margin="0,20">
             <Border.Effect>
                 <DropShadowEffect Color="Blue" Direction="0" ShadowDepth="0" BlurRadius="20"/>
             </Border.Effect>
             <TextBlock Text="Direction=0 ShadowDepth=0 BlurRadius=20" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" Width="150"></TextBlock>
         </Border>

         <Border Height="80" Width="200" CornerRadius="25" Background="Green" Margin="0,20">
             <Border.Effect>
                 <DropShadowEffect Color="Blue" Direction="0" ShadowDepth="0" BlurRadius="40"/>
             </Border.Effect>
             <TextBlock Text="Direction=0 ShadowDepth=0 BlurRadius=40" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" Width="150"></TextBlock>
         </Border>

         <Border Height="80" Width="200" CornerRadius="25" Background="Green" Margin="0,20">
             <Border.Effect>
                 <DropShadowEffect Color="Blue" Direction="0" ShadowDepth="10" BlurRadius="60"/>
             </Border.Effect>
             <TextBlock Text="Direction=0 ShadowDepth=10 BlurRadius=60" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" Width="150"></TextBlock>
         </Border>

         <Border Height="80" Width="200" CornerRadius="25" Background="Green" Margin="0,20">
             <Border.Effect>
                 <DropShadowEffect Color="Blue" Direction="0" ShadowDepth="100" BlurRadius="120"/>
             </Border.Effect>
             <TextBlock Text="Direction=0 ShadowDepth=100 BlurRadius=120" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" Width="150"></TextBlock>
         </Border>
     </StackPanel>
 </UniformGrid>

 

 

三、BlurEffect（模糊效果）

<UniformGrid Background="LightGreen" Columns="3">
    <StackPanel Margin="20">
        <TextBlock Text="Radius=0   KernelType=Box" Margin="0,10">
            <TextBlock.Effect>
                <BlurEffect Radius="0"  KernelType="Box"/>
            </TextBlock.Effect>
        </TextBlock>
        <TextBlock Text="Radius=1   KernelType=Box" Margin="0,10">
            <TextBlock.Effect>
                <BlurEffect Radius="1"  KernelType="Box"/>
            </TextBlock.Effect>
        </TextBlock>
        <TextBlock Text="Radius=2   KernelType=Box" Margin="0,10">
            <TextBlock.Effect>
                <BlurEffect Radius="2"  KernelType="Box"/>
            </TextBlock.Effect>
        </TextBlock>
    </StackPanel>
    <StackPanel Margin="20">
        <TextBlock Text="Radius=0   KernelType=Gaussian" Margin="0,10">
            <TextBlock.Effect>
                <BlurEffect Radius="0"  KernelType="Gaussian"/>
            </TextBlock.Effect>
        </TextBlock>
        <TextBlock Text="Radius=1   KernelType=Gaussian" Margin="0,10">
            <TextBlock.Effect>
                <BlurEffect Radius="1"  KernelType="Gaussian"/>
            </TextBlock.Effect>
        </TextBlock>
        <TextBlock Text="Radius=2   KernelType=Gaussian" Margin="0,10">
            <TextBlock.Effect>
                <BlurEffect Radius="2"  KernelType="Gaussian"/>
            </TextBlock.Effect>
        </TextBlock>
    </StackPanel>

</UniformGrid>

 

四、文字阴影 效果

1.DropShadowEffect

<TextBlock Text="Shadow Text"  Foreground="Teal">
                <TextBlock.Effect>
                    <DropShadowEffect
                   ShadowDepth="4"
                   Direction="330"
                   Color="Black"
                   Opacity="0.5"
                   BlurRadius="4"/>
                </TextBlock.Effect>
            </TextBlock>

 

2.BlurEffect

 

 <TextBlock
  Text="Shadow Text"
  Foreground="Green"
  Grid.Column="0" Grid.Row="0" >
  <TextBlock.Effect>
    <BlurEffect
      Radius="8.0"
      KernelType="Box"/>
  </TextBlock.Effect>
</TextBlock>
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon"
  Grid.Column="0" Grid.Row="0" />

 

3.

        <TextBlock
  Foreground="Black"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
            <TextBlock.RenderTransform>
                <TranslateTransform X="3" Y="3" />
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock
  Foreground="Coral"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
        </TextBlock>

 

 

更多：

WPF 画刷Brush使用整理

WPF 布局Viewbox&ScrollViewer使用案例

WPF 布局Canvas使用案例