DropShadowEffect applying to child elements - Silverlight XAML
I have an ItemsControl which contains some nested containers. I want to add a dropshadow around each element of the main ItemsControl. But instead it is adding it to certain containers that are within the main ItemsControl (creating rows of shadows). I have placed the effect at a number of different levels but it results in no change. I started out with the outermost container of the item within the main ItemsControl and went upward from there.
Here is where I currently have the effect for the drop shadow placed:
<ItemsControl >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!-- I have tried adding the dropshadow effect within this stackpanel -->
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- Where I define the dropshadow -->
<ItemsControl.Effect>
<DropShadowEffect BlurRadius="0" ShadowDepth="1" Color="LightGray"/>
</ItemsControl.Effect>
<!-- End of dropshadow definition -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<media:Step5Item />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl&开发者_StackOverflow中文版gt;
And here is the definition for Step5Item, I added documentation for where the shadows are appearing: (edit) I removed the content for the elements since that was just styling and so forth.
<!-- This is inserted by the above code's DataTemplate -->
<!-- I have tried adding a border here and giving it a dropshadow effect -->
<Grid >
<!-- I have tried inserting a dropshadow effect here -->
<TextBlock Grid.Row="0"/>
<Border BorderBrush="LightGray" BorderThickness="1" >
<!-- I have tried inserting a dropshadow effect here -->
<Grid>
<Border >
<!-- There is a shadow around this border/grid -->
<Grid Grid.Row="0" >
<TextBlock Grid.Column="0" />
<Button Grid.Column="2"/>
</Grid>
</Border>
<!--There is a shadow around each element in this ItemsControl-->
<ItemsControl Grid.Row="2" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,4" >
<Path Grid.Row="0">
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="1500,0"/>
</Path.Data>
</Path>
<Grid Grid.Row="1">
<Image Grid.Column="0" />
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Border>
</Grid>
There is also a shadow at the bottom but I don't know if its from the last element in the ItemsControl or if it is from the outer most border.
If you'd like I can clean up the second code piece more. I took out some stuff but left in the elements, thinking that might be best for readability.
EDIT I tried applying the effect after I add the child elements hoping that since they would be created before the effect went into play that the problem would not occur. I tried placing the effect at the bottom of both the main ItemsControl as well as at the bottom of the outermost grid in Step5Item. I have also removed some content from Step5Item to make it hopefully more readable.
EDIT2
Here are two images with and without the effect. I left the DropShadow code exactly where I placed it above, though like I said, I can place it in many places to get the same effect.
With Dropshadow
Without Dropshadow
Without Error http://img402.imageshack.us/img402/1456/nodropshadowexample.png
Edit 3
This is the border and drop shadow effect that I am using from Erno's solution. I am hoping to be able to increase the shadowdepth some more because the right side is not getting any shadow, only the bottom. Currently if I change ShadowDepth it changes to location of the shadow to be at a distance away equal to the new size but it is only a thickness of 1.
<Border Margin="0,1,0,0" Height="auto" Width="auto" CornerRadius="5,5,5,5" BorderThickness="1" BorderBrush="LightGray">
<Border.Effect>
<DropShadowEffect BlurRadius="0" ShadowDepth="1" Direction="315" Color="LightGray"/>
</Border.Effect>
</Border>
Have you tried to do the following?
I added another Grid and added a SIBLING Border with the effect. The grid containing the rows is displayed on top of it but is NOT a child control of the Border.
<ItemsControl Grid.Row="2" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,4" >
<Grid>
<Border>
<Border.Effect>
<DropShadow />
</Border.Effect>
</Border>
<Path Grid.Row="0">
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="1500,0"/>
</Path.Data>
</Path>
<Grid Grid.Row="1">
<Image Grid.Column="0" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
精彩评论