2011-08-02 8 views
2

중첩 컨테이너가 포함 된 ItemsControl이 있습니다. 주 ItemsControl의 각 요소 주위에 드롭 섀도우를 추가하고 싶습니다. 그러나 대신 Main 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의 마지막 요소 또는 가장 바깥 쪽 테두리에 있는지 여부는 알 수 없습니다.

원하면 다시 두 번째 코드 조각을 정리할 수 있습니다. 몇 가지 물건을 꺼내었지만 요소에 남겨져 가독성을 위해 최선이라고 생각했습니다.

편집 이 나는 ​​효과가 놀이에 가기 전에 자신이 만든 것 때문에 문제가 발생하지 않을 것을 바라고 자식 요소를 추가 한 후 효과를 적용했습니다. Step5Item의 바깥 쪽 모눈 아래쪽뿐만 아니라 주 ItemsControl의 아래쪽에 효과를 배치하려고했습니다. 또한 Step5Item에서 일부 콘텐츠를 제거하여 더 읽기 쉽게 만들었습니다.

EDIT2

여기와 효과가없는 두 이미지이다. 내가 위에서 말한 것처럼 DropShadow 코드를 그대로 놔 뒀지 만, 내가 말했듯이 같은 효과를 얻기 위해 여러 곳에 배치 할 수 있습니다. 편집 3

Without Error http://img402.imageshack.us/img402/1456/nodropshadowexample.png

의 DropShadow

없이

With Error http://img811.imageshack.us/img811/2168/dropshadowerror.png

의 DropShadow

이 국경과 내가 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

의 두께입니까?

다른 Grid를 추가하고 SIBLING Border에 효과를 추가했습니다. 행을 포함하는 그리드는 그 위에 표시되지만 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 객체를 가지고 반복 할 것이고, 나는 그것을 전체적으로 원했다). 하지만 어떤 이유로 그림자 그림자 크기가 3,4,9 또는 그 크기가 아니라 그림자 그림자 크기를 늘릴 때. 나는 크기가 1 인 그림자를 얻었지만 멀리 떨어진 곳에서는 입력 한 숫자가 사용되었음을 나타냅니다. 내 질문의 맨 아래에있는 코드를 사용하여 업데이트하고 있습니다. 통찰력이 있다면 알려주십시오. – StephenT

+0

@StephenT, 테두리 및 그리드 형제 모두에 더 큰 여백을 줄 수 있습니다. 그 그림자가 더 많은 공간을 줄 것이거나 새로운 문제가 무엇인지 이해하지 못하겠습니까? –

+1

@Stephen, 알았어, 테두리에 배경색이 없습니다. 배경 없음 => 그림자 없음. –

관련 문제