2011-08-13 5 views
0

나는 Grid 레이아웃을 가지고 있습니다. 한 행에는 Border이 있고 그 안에는 ToggleButton (왼쪽 여백이 음수이므로 테두리 바깥쪽에 나타납니다). 국경에 DropShadowEffect을 추가했습니다. 그림자 효과와 테두리 외부의 토글 버튼을 클리핑하는 것으로 보입니다. 아래의 코드와 이미지를 참조하십시오. 버튼이 클립핑지고 상기 DropShadow를 얻기가 잘린 곳 오른쪽 빨간 화살표 나타내고테두리 주위에 알 수없는 클리핑

<Grid Margin="0"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="140*" /> 
      <RowDefinition Height="500"/> 
     </Grid.RowDefinitions> 
     <Grid Grid.Row="0" Background="LightGray"> 
      <Border Background="{StaticResource BorderFill}" Height="150" Width="400" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="20,0,20,10" BorderBrush="#FF999999" BorderThickness="1"> 
       <Border.Effect> 
        <DropShadowEffect Color="Gray" BlurRadius="40" ShadowDepth="0.1"/> 
       </Border.Effect> 
       <ToggleButton Click="MenuToggleButtonClick" Margin="-6.5,0,0,5" Style="{StaticResource ExpandCollapseButtons}" Width="Auto" Height="Auto" x:Name="MenuToggleButton" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Bottom" /> 
      </Border> 
     </Grid> 

clipping of shadow and button

왼쪽 화살표는 적색이다. 무슨 일 이니? 이 문제를 어떻게 해결할 수 있습니까?

답변

0

이 클리핑은 내부에 대한 여유 공간이 충분하지 않은 경우에만 발생합니다. Grid에 여백을 더한 것입니다. 브라우저 창 크기를 충분히 작게 조정하면 스크린 샷에서 동작을 재현 할 수있었습니다.

귀하의 경우 높이가 충분하지 않은 것으로 보입니다. 충분한 폭이없는 경우에도 유사한 효과가 발생합니다.

왜이 경계 클리핑이 발생하는지 잘 모르겠습니다. 그러나 GridMinWidth="440"MinHeight="160" (내부 격자 너비와 높이의 여백과 높이) 속성을 추가 한 경우 브라우저 창의 크기를 어느 정도 작게 조정하더라도 더 이상 클리핑을 재현 할 수 없음을 발견했습니다. 방향.

+0

아름다운. 감사! – Aks

+0

무언가 내가 그리드 행 전체 공간을 줄 수 있고 그것의 일부가 숨겨져 필요합니까? – Aks

+0

@Aks : 다른 Grid에서 외부 'Grid'를 래핑 할 수 있습니까? –