Search code examples
wpfdropshadoweffect

WPF drop shadow by transparent border


Good day. Im creating a grid like this (with shadow). everything would be fine, but i can't do a shadow border with transparent background, so the background of grid can't be transparent (it's critical). Is there a solution to this problem? current

<Grid Visibility="{Binding InfoPanelVisibility}" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">


                <Border Background="White" BorderThickness="1,0,0,0" >
                    <Border.Effect>
                        <DropShadowEffect BlurRadius="8" Color="WhiteSmoke" Direction="250"></DropShadowEffect>
                    </Border.Effect>
                </Border>

                <Grid.Background>
                    <SolidColorBrush Color="White" Opacity="0.4" />
                </Grid.Background>

                <ScrollViewer>
                          ...
                </ScrollViewer>

            </Grid>

Solution

  • I wrote this code for myself ,its function is Obvious

    there's a ControlTemplate in Style.Resource , which I have defined a grid in it

    in grid,there's a Rectangle to use its borders to create shadows and a ContentPresenter!

    <Style TargetType="Grid">
            <Setter Property="Template" Value="{DynamicResource GridBorderShadowEffect}"></Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="Transparent"/>
                </Setter.Value>
            </Setter>
            <Style.Resources>
                <ControlTemplate x:Key="GridBorderShadowEffect" TargetType="{x:Type Grid}">
                    <Grid>
                        <Grid.Style>
                            <Style TargetType="Grid">
                                  <Setter Property="Margin" Value="5"></Setter>
                            </Style>
                        </Grid.Style>
                        <Rectangle>
                            <Rectangle.Style>
                                <Style TargetType="Rectangle">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding 
                                        RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}},
                                        Path=WindowState}" Value="Normal">
                                            <Setter Property="StrokeThickness" Value="2"/>
                                            <Setter Property="Stroke" Value="Purple"></Setter>
                                            <Setter Property="BitmapEffect">
                                                <Setter.Value>
                                                    <DropShadowBitmapEffect ShadowDepth="10"  Softness="1" Opacity="1"  Color="Purple" />
                                                </Setter.Value>
                                            </Setter>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Rectangle.Style>
                        </Rectangle>
                        <ContentPresenter>
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Style.Resources>
        </Style>