DropShadowEffect s'appliquant aux éléments enfants - Silverlight XAML

Question

J'ai un ItemsControl qui contient des conteneurs imbriqués. Je veux ajouter une ombre portée autour de chaque élément du ItemsControl principal. Mais au lieu de cela, l'effet est ajouté à certains conteneurs qui se trouvent dans le ItemsControl principal (créant des rangées d'ombres). J'ai placé l'effet à un certain nombre de niveaux différents, mais cela ne donne aucun résultat. J'ai commencé par le conteneur le plus externe de l'élément dans le ItemsControl principal et j'ai remonté à partir de là.

Voici où j'ai actuellement placé l'effet de l'ombre portée :

<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>

Et voici la définition de Step5Item, j'ai ajouté de la documentation pour savoir où les ombres apparaissent : (edit) J'ai enlevé le contenu des éléments puisque c'était juste du style et ainsi de suite.

<!-- 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>

Il y a également une ombre en bas, mais je ne sais pas si elle provient du dernier élément du ItemsControl ou de la bordure extérieure.

Si vous voulez, je peux nettoyer le second morceau de code. J'ai supprimé certaines choses mais laissé les éléments, en pensant que c'était mieux pour la lisibilité.

EDIT J'ai essayé d'appliquer l'effet après avoir ajouté les éléments enfants en espérant que le problème ne se produirait pas puisqu'ils seraient créés avant que l'effet n'entre en jeu. J'ai essayé de placer l'effet au bas du ItemsControl principal ainsi qu'au bas de la grille la plus extérieure de Step5Item. J'ai également supprimé une partie du contenu de Step5Item pour le rendre plus lisible.

EDIT2

Voici deux images avec et sans l'effet. J'ai laissé le code DropShadow exactement à l'endroit où je l'ai placé ci-dessus, mais comme je l'ai dit, je peux le placer à plusieurs endroits pour obtenir le même effet.

Avec l'ombre à paupières

Sans ombre à paupières

Sans erreur http://img402.imageshack.us/img402/1456/nodropshadowexample.png

Edit 3

Voici l'effet de bordure et d'ombre portée que j'utilise à partir de la solution d'Erno. J'espère pouvoir augmenter la profondeur de l'ombre car le côté droit ne reçoit pas d'ombre, seulement le bas. Actuellement, si je modifie ShadowDepth, l'emplacement de l'ombre est modifié pour être à une distance égale à la nouvelle taille, mais l'épaisseur n'est que de 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>

Answer 1

Avez-vous essayé de faire ce qui suit ?

J'ai ajouté une autre Grille et j'ai ajouté une Bordure SIBLING avec l'effet. La grille contenant les rangées est affichée par-dessus mais n'est PAS un contrôle enfant de la bordure.

        <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>