locked
Drop Shadow on Groupbox. How to stop cascading. RRS feed

  • Question

  • I am completely new to WPF so I apologize already.  I am coming from the WinForms world a little late.  So far I really enjoy the effects and things I can do in the GUI world.  I added a drop shadow to a group box and really like the way it appears, however it puts a drop shadow on everything in the group box as well.  Is there a way I can limit the effect to just the group box?

    <GroupBox Header="CMS Information" Margin="8,176.248,8,19">
    				<GroupBox.Effect>
    					<DropShadowEffect ShadowDepth="2"/>
    				</GroupBox.Effect>
    				<Grid>
    					<Grid.RowDefinitions>
    						<RowDefinition Height="0.245*"/>
    						<RowDefinition Height="0.755*"/>
    					</Grid.RowDefinitions>
    					<TextBlock HorizontalAlignment="Left" Margin="3,8,0,6.065" TextWrapping="Wrap" Text="Connection Status:" Width="116"/>
    					<TextBlock HorizontalAlignment="Left" Margin="119,8,0,6.065" TextWrapping="Wrap" Text="Not Connected" Width="110.996"/>
    				</Grid>

    Thursday, July 19, 2012 3:47 PM

Answers

  • Hello Voast.

    If you have Blend you could do this easily.

    Remove the drop shadow you placed on the GroupBox.  Edit the GroupBox Template.  Add a DropShadow to the Header and the last or second [Border], but not the content presenter.

    If you don't have blend... here is a style you could use....

    <Window
    	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" 
    	mc:Ignorable="d"
    	x:Class="WpfApplication1.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
    		<Style x:Key="GroupBoxStyle1" TargetType="{x:Type GroupBox}">
    			<Setter Property="BorderBrush" Value="#D5DFE5"/>
    			<Setter Property="BorderThickness" Value="1"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type GroupBox}">
    						<Grid SnapsToDevicePixels="true">
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="6"/>
    								<ColumnDefinition Width="Auto"/>
    								<ColumnDefinition Width="*"/>
    								<ColumnDefinition Width="6"/>
    							</Grid.ColumnDefinitions>
    							<Grid.RowDefinitions>
    								<RowDefinition Height="Auto"/>
    								<RowDefinition Height="Auto"/>
    								<RowDefinition Height="*"/>
    								<RowDefinition Height="6"/>
    							</Grid.RowDefinitions>
    							<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/>
    							<!--Place Drop Shadow on the Header-->
    							<Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
    								<Border.Effect>
    									<DropShadowEffect/>
    								</Border.Effect>
    								<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    							</Border>
    							<ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    							<!--Place Drop Shadow on the Second Border-->
    							<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3">
    								<Border.Effect>
    									<DropShadowEffect/>
    								</Border.Effect>
    								<Border.OpacityMask>
    									<MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}">
    										<Binding ElementName="Header" Path="ActualWidth"/>
    										<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
    										<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
    									</MultiBinding>
    								</Border.OpacityMask>
    								<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
    									<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
    								</Border>
    							</Border>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<GroupBox Header="GroupBox" HorizontalAlignment="Left" VerticalAlignment="Top" Height="155.92" Width="172.697" Margin="8,8,0,0" Style="{DynamicResource GroupBoxStyle1}">
    			<GroupItem Content="GroupItem" Margin="0,0,1.543,0" d:LayoutOverrides="Width"/>
    		</GroupBox>
    	</Grid>
    </Window>

    Hope that helps.

    ~Christine


    My Gallery

    • Marked as answer by Voast Dev Monday, July 23, 2012 1:56 AM
    Thursday, July 19, 2012 4:24 PM

All replies

  • Hello Voast.

    If you have Blend you could do this easily.

    Remove the drop shadow you placed on the GroupBox.  Edit the GroupBox Template.  Add a DropShadow to the Header and the last or second [Border], but not the content presenter.

    If you don't have blend... here is a style you could use....

    <Window
    	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" 
    	mc:Ignorable="d"
    	x:Class="WpfApplication1.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
    		<Style x:Key="GroupBoxStyle1" TargetType="{x:Type GroupBox}">
    			<Setter Property="BorderBrush" Value="#D5DFE5"/>
    			<Setter Property="BorderThickness" Value="1"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type GroupBox}">
    						<Grid SnapsToDevicePixels="true">
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="6"/>
    								<ColumnDefinition Width="Auto"/>
    								<ColumnDefinition Width="*"/>
    								<ColumnDefinition Width="6"/>
    							</Grid.ColumnDefinitions>
    							<Grid.RowDefinitions>
    								<RowDefinition Height="Auto"/>
    								<RowDefinition Height="Auto"/>
    								<RowDefinition Height="*"/>
    								<RowDefinition Height="6"/>
    							</Grid.RowDefinitions>
    							<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/>
    							<!--Place Drop Shadow on the Header-->
    							<Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
    								<Border.Effect>
    									<DropShadowEffect/>
    								</Border.Effect>
    								<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    							</Border>
    							<ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    							<!--Place Drop Shadow on the Second Border-->
    							<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3">
    								<Border.Effect>
    									<DropShadowEffect/>
    								</Border.Effect>
    								<Border.OpacityMask>
    									<MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}">
    										<Binding ElementName="Header" Path="ActualWidth"/>
    										<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
    										<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
    									</MultiBinding>
    								</Border.OpacityMask>
    								<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
    									<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
    								</Border>
    							</Border>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<GroupBox Header="GroupBox" HorizontalAlignment="Left" VerticalAlignment="Top" Height="155.92" Width="172.697" Margin="8,8,0,0" Style="{DynamicResource GroupBoxStyle1}">
    			<GroupItem Content="GroupItem" Margin="0,0,1.543,0" d:LayoutOverrides="Width"/>
    		</GroupBox>
    	</Grid>
    </Window>

    Hope that helps.

    ~Christine


    My Gallery

    • Marked as answer by Voast Dev Monday, July 23, 2012 1:56 AM
    Thursday, July 19, 2012 4:24 PM
  • That looks great, thanks.
    Monday, July 23, 2012 1:56 AM