开发者

DropShadowEffect applying to child elements - Silverlight XAML

开发者 https://www.devze.com 2023-03-25 15:54 出处:网络
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

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

DropShadowEffect applying to child elements - Silverlight XAML

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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号