2011-08-02 12 views
2

いくつかのネストされたコンテナを含むItemsControlがあります。メインのItemsControlの各要素の周りにドロップシャドウを追加したいと思います。代わりに、メインのItemsControl(シャドウの行を作成する)内にある特定のコンテナに追加します。私はいくつかの異なるレベルでエフェクトを配置しましたが、変更はありません。メインのItemsControl内のアイテムの最も外側のコンテナから始め、そこから上に移動しました。私は現在置かれ、ドロップシャドウの効果を持っているのはここ子要素に適用するDropShadowEffect - Silverlight XAML

がある:私はコンテンツを削除(編集)を:

<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番目のコード片をもっときれいにすることができます。私はいくつかのものを取り出したが、読みやすさのために最善の考えをして要素に残した。

EDIT は、私は効果が遊びに行く前に、彼らが作成されるので、問題が発生しないということを期待して子要素を追加した後に効果を適用してみました。 Step5Itemの最も外側のグリッドの下部と同様に、メインのItemsControlの両方の下部にエフェクトを配置しようとしました。私はStep5Itemからいくつかのコンテンツを削除して、読みやすくすることを望みました。ここ

EDIT2

効果を有するとせずに2枚の画像があります。私は上に置いたところでDropShadowコードをそのまま残しましたが、私が言ったように、私は同じ効果を得るために多くの場所に置くことができます。ドロップシャドウ

With Error http://img811.imageshack.us/img811/2168/dropshadowerror.pngドロップシャドウ

なし

Without Error 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> 
+0

問題を明確にするためにいくつかのスクリーンショットを投稿できますか? – XAMeLi

+0

@XAMeLi画像を追加しました – StephenT

+0

私はまだ問題を理解していません。コードをスリム化できますか? –

答えて

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

多くのリワークの後、私は最終的にほとんどの作業をするというアイディアを得ました。私はそれをどこか別の場所に置いています(あなたのソリューションは、すべてのItemControlオブジェクトで繰り返されていました。しかし、何らかの理由で、私がshadowdepthを使ってdropshadowのサイズを増やすのではなく、3,4,9などの実線の影を得るのではなく、私はサイズが1であるシャドウを取得しますが、離れたところでは、入力した数字が使用されたことを示しています。私は使用しているコードで質問の一番下を更新しています。洞察があれば教えてください。 – StephenT

+0

@StephenT、あなたは、ボーダーとグリッドの両方の兄弟に大きなマージンを与えることができます。それは影に余裕を持たせるか、新しい問題が何であるかを理解していないのですか? –

+1

@Stephen、それを得ました。ボーダーには背景色がありません。背景なし=>影なし。 –

関連する問題