DropShadowEffect, применяемый к дочерним элементам - Silverlight XAML - PullRequest
2 голосов
/ 03 августа 2011

У меня есть ItemsControl, который содержит несколько вложенных контейнеров.Я хочу добавить тень вокруг каждого элемента основного ItemsControl.Но вместо этого он добавляет его в определенные контейнеры, которые находятся внутри основного ItemsControl (создавая ряды теней).Я разместил эффект на нескольких разных уровнях, но он не изменился.Я начал с самого внешнего контейнера предмета в главном ItemsControl и пошел вверх оттуда.

Вот где у меня сейчас есть эффект для размещенной тени:

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

ИВот определение для Step5Item, я добавил документацию о том, где появляются тени: (правка) Я удалил содержимое для элементов, так как это было просто стилизацией и т. д.

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

Существует также теньвнизу, но я не знаю, находится ли он в последнем элементе ItemsControl или в самой внешней границе.

Если вы хотите, я могу очистить второй фрагмент кода больше.Я вынул некоторые вещи, но оставил в элементах, думая, что это может быть лучше для удобочитаемости.

EDIT Я пытался применить эффект после добавления дочерних элементов, надеясь, что, так как они будут созданыдо того, как эффект вошел в игру, проблема не возникнет.Я попытался разместить эффект в нижней части основного элемента ItemsControl, а также в нижней части самой внешней сетки в Step5Item.Я также удалил некоторый контент из Step5Item, чтобы сделать его более читабельным.

EDIT2

Вот два изображения с эффектом и без него.Я оставил код DropShadow именно там, где поместил его выше, хотя, как я уже сказал, я могу разместить его во многих местах, чтобы получить тот же эффект.

С Dropshadow

С ошибкой http://img811.imageshack.us/img811/2168/dropshadowerror.png

Без тени тени

Без ошибки http://img402.imageshack.us/img402/1456/nodropshadowexample.png

Редактировать 3

Это эффект границы и тени, который я используюиз решения Эрно.Я надеюсь, что смогу еще больше увеличить глубину тени, потому что на правой стороне нет тени, только дно.В настоящее время, если я изменяю ShadowDepth, он изменяется на местоположение тени, чтобы быть на расстоянии, равном новому размеру, но это только толщина 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>

1 Ответ

2 голосов
/ 04 августа 2011

Вы пытались сделать следующее?

Я добавил еще одну сетку и добавил границу SIBLING с эффектом.Сетка, содержащая строки, отображается поверх нее, но НЕ является дочерним элементом 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>
...