基本屬性: 屬性 說明 描述 Color 設置陰影效果背景色 Color="Red" ShadowDepth 設置陰影的偏移度 ShadowDepth="5" Direction 設置陰影的角度 Direction="-45" BlurRadius 設置陰影模糊程度 BlurRadius="20" ...
基本屬性:
屬性 | 說明 | 描述 |
Color | 設置陰影效果背景色 | Color="Red" |
ShadowDepth | 設置陰影的偏移度 | ShadowDepth="5" |
Direction | 設置陰影的角度 | Direction="-45" |
BlurRadius | 設置陰影模糊程度 | BlurRadius="20" |
Opacity | 設置陰影透明度 | Opacity="1" |
<Button Width="100" Height="50"> <Button.Effect> <DropShadowEffect ShadowDepth="10" BlurRadius="20" Color="Gray"/> </Button.Effect> Click Me </Button>在上面的示例中,我們為按鈕的Effect屬性設置了一個DropShadowEffect對象。ShadowDepth屬性控制陰影的深度,BlurRadius屬性控制陰影的模糊程度,Color屬性控制陰影的顏色。 你可以根據需要調整這些屬性的值來獲得不同的陰影效果。 陰影效果應用範圍: DropShadowEffect控制項適用於需要添加陰影效果的各種場合,例如在按鈕、標簽、文本框等控制項上添加陰影,以增強控制項的立體感和視覺效果。 此外,DropShadowEffect控制項還可以用於實現陰影的動態效果,例如在滑鼠懸停時改變陰影的顏色、大小等屬性,以提供更豐富的交互體驗。 總之,DropShadowEffect控制項是一種非常實用的工具,可以在WPF應用程式中增強視覺效果和交互體驗 陰影效果是UIElement類提供,所有繼承自UIElement類的控制項都可以實現陰影效果。
代碼實例: 由於時間關係,代碼實例都寫在一起了。
<Grid> <StackPanel> <!--設置陰影效果--> <Border Width="100" Height="50" Background="Orange"> <!--Effect設置影響效果標簽--> <Border.Effect> <!--在目標周圍繪畫陰影效果--> <DropShadowEffect Color="Red" ShadowDepth="0"/> </Border.Effect> </Border> <!--設置陰影效果的基本屬性--> <Border Margin="0 10" Width="100" Height="50" Background="Orange"> <!--Effect設置影響效果標簽--> <Border.Effect> <!--預設顯示黑色陰影效果--> <!--<DropShadowEffect/>--> <!--Color設置陰影顏色 ShadowDepth設置陰影偏移度 Direction設置陰影的角度 BlurRadius="20"設置模糊的程度 Opacity="1"設置透明度--> <!--大多數時候使用不設置陰影的偏移方向--> <DropShadowEffect Color="Red" ShadowDepth="5" Direction="-45" BlurRadius="20" Opacity="1"/> </Border.Effect> </Border> <!--設置陰影效果偏移度--> <Border Margin="0 10" Width="100" Height="50" Background="Orange"> <!--Effect設置影響效果標簽--> <Border.Effect> <!--ShadowDepth設置陰影偏移度 --> <DropShadowEffect Color="Red" ShadowDepth="5"/> </Border.Effect> </Border> <!--實現旋轉陰影效果--> <Border Width="100" Height="50" Background="Orange"> <!--設置旋轉效果--> <Border.RenderTransform> <!--Angle設置旋轉角度--> <RotateTransform Angle="45"/> </Border.RenderTransform> <!--Effect設置影響效果標簽--> <Border.Effect> <!--Color設置陰影顏色 ShadowDepth設置陰影偏移度 Direction設置陰影的角度--> <DropShadowEffect Color="Red" ShadowDepth="5" Direction="-45"/> </Border.Effect> </Border> <!--給文本設置陰影效果--> <TextBlock Text="Hello"> <TextBlock.Effect> <!--Color設置陰影顏色 ShadowDepth設置陰影偏移度 Direction設置陰影的角度 BlurRadius="20"設置模糊的程度 Opacity="1"設置透明度--> <DropShadowEffect Color="Gray" ShadowDepth="0" BlurRadius="3"/> </TextBlock.Effect> </TextBlock> <!--實現陰影效果--> <Border Margin="0 60 0 0" Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="10"> <!--這裡設置隱形效果是對整個border內所有的控制項生效,只要是非透明不部分都給它做陰影效果--> <Border.Effect> <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/> </Border.Effect> <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border> <!--實現只有外部顯示陰影效果,不影響內部控制項--> <!--Background="White" 設置內容區域為白色背景 - 樣式組合可以千變萬化-發揮想象力--> <Border Margin="0 10 0 0" Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="10" Background="White"> <!--這裡設置隱形效果是對整個border內所有的控制項生效,只要是非透明不部分都給它做陰影效果--> <Border.Effect> <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/> </Border.Effect> <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border> <!--實現在內部顯示陰影效果的情況下不影響內部的其它控制項。--> <Grid Margin="0 10 0 0"> <!--ClipToBounds="True" 超出區域部分的陰影效果進行裁切--> <Border Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="0" ClipToBounds="True"> <!--這裡設置隱形效果是對整個border內所有的控制項生效,只要是非透明不部分都給它做陰影效果--> <Border.Effect> <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/> </Border.Effect> </Border> <!--這裡文字放在boder外面,這樣文字部分可以不顯示陰影效果。--> <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> <!--實現在設置圓角的情況下在內部顯示陰影效果--> <Grid Margin="0 10 0 0"> <!--ClipToBounds="True" 超出區域部分的陰影效果進行裁切--> <Border Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="10"> <!--這裡設置告訴boder按照指定尺寸進行裁切--> <Border.Clip> <!--Rect="0 0 100 30" 圖形坐標(x,y,w,h)(x軸坐標,y軸坐標,寬度,高度) RadiusX="10" X軸圓角度--> <RectangleGeometry Rect="0 0 100 30" RadiusX="10" RadiusY="10"/> </Border.Clip> <!--這裡設置隱形效果是對整個border內所有的控制項生效,只要是非透明不部分都給它做陰影效果--> <Border.Effect> <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/> </Border.Effect> </Border> <!--這裡文字放在boder外面,這樣文字部分可以不顯示陰影效果。--> <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </StackPanel> </Grid>效果展示: