内部阴影形状 [英] Inner shadow to the shape

问题描述

如何将内阴影和透视效果应用于形状。

How to apply the inner shadow and perspective effect to shapes.

推荐答案

您好，

以下是一些样本，用于为WPF中的控件创建内部阴影。

The following are some samples to create the inner shadow for controls in WPF.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
        <SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
        <SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
        <Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Grid>
                            <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" ClipToBounds="True">
                                <Grid Margin="-2">
                                    <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Margin="1"/>
                                    <Border Background="Transparent" BorderBrush="Black" 

                                        BorderThickness="1" Margin="0">
                                        <Border.Effect>
                                            <DropShadowEffect ShadowDepth="0" BlurRadius="10"/>
                                        </Border.Effect>
                                    </Border>
                                </Grid>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                        <Condition Property="IsSelectionActive" Value="false"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Border Background="LightGray" BorderBrush="DarkGray" 

      BorderThickness="1" ClipToBounds="True" Margin="10">
            <Border Background="Transparent" BorderBrush="Black" 

        BorderThickness="10" Margin="-10">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="10"/>
                </Border.Effect>
            </Border>
        </Border>

        <Grid Grid.Column="1" Margin="10">

            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=myRect}" Stretch="None" />
            </Grid.OpacityMask>

            <Rectangle Fill="LightYellow" x:Name="myRect"
                Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8" Margin="10"/>
            <Rectangle  

        Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8" Margin="10">
                <Rectangle.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="Orange"/>
                </Rectangle.Effect>
            </Rectangle>
        </Grid>
        <Grid Grid.Row="1">

            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=myEllipse}" Stretch="None" />
            </Grid.OpacityMask>

            <Ellipse x:Name="myEllipse" Fill="#FF3EFF00" Margin="10"/>
            <Ellipse Stroke="#FF0B7500" StrokeThickness="2" Margin="10">
                <Ellipse.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="Green"/>
                </Ellipse.Effect>
            </Ellipse>

        </Grid>
        <TextBox Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Text="TextBox" HorizontalContentAlignment="Stretch" Margin="10" Style="{DynamicResource TextBoxStyle1}"/>


    </Grid>
</Window>

您可以通过上面的代码获得如下图所示的内部阴影。

You shall able to get inner shadows like the image below by the code above.

关键是使用 Clip 属性以及不透明蒙版。

对于控件，您还可以通过编辑模板来实现内部阴影。

For the controls, you could also implement the inner shadow by editing the templates.

顺便提一下，您还可以查看一下这篇文章：为WPF和Silverlight创建内部阴影效果

By the way, you may also take a look at this article:Creating Inner Shadow Effects for WPF and Silverlight

希望这对您有所帮助。

Hope this will be helpful to you.

这篇关于内部阴影形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！