2

ネストされたコンテナを含む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の最後の要素からのものなのか、それとも最も外側の境界からのものなのかはわかりません。

よろしければ、2番目のコード部分をさらにクリーンアップできます。私はいくつかのものを取り出しましたが、読みやすさのためにそれが最善かもしれないと考えて、要素を残しました。

編集子 要素を追加した後、エフェクトが機能する前に作成されるため、問題が発生しないことを期待して、エフェクトを適用してみました。エフェクトをメインのItemsControlの下部と、Step5Itemの最も外側のグリッドの下部の両方に配置してみました。また、Step5Itemから一部のコンテンツを削除して、読みやすくしたいと思います。

EDIT2

効果がある場合とない場合の2つの画像を次に示します。DropShadowコードを上に配置した場所に正確に残しましたが、前述のように、同じ効果を得るために多くの場所に配置できます。

ドロップシャドウ付き

エラーあり

ドロップシャドウなし

エラーなしhttp://img402.imageshack.us/img402/1456/nodropshadowexample.png

編集3

これは、Ernoのソリューションで使用している境界線とドロップシャドウの効果です。右側には影がなく、下部だけなので、影の深さをもう少し増やしたいと思っています。現在、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>
4

1 に答える 1

2

次のことを試しましたか？

別のグリッドを追加し、効果のある 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>
于 2011-08-04T16:20:43.983 に答える