2009-10-22 4 views
2

제 생각을 용서해주십시오 .- 저는 WPF에 매우 익숙합니다.WPF에서 UIElement를 클립으로 사용하십시오.

"내부"둥근 모서리 모양을 나타내는 내 응용 프로그램에서 약간의 시각적 효과를 구현하고자합니다. 문제의 창은 여러 UIElements를 캡슐화하는 짙은 테두리가 있으며, 그 중 하나는 창 하단에있는 StatusBar입니다. 이 StatusBar에는 창 테두리와 일치하는 어두운 배경이 있습니다. StatusBar 위에는 내용보기가 있습니다.이보기는 현재 그리드입니다. 배경이 반투명합니다 (이는 제한적인 것 같아요. 바탕 화면의 내용보기를 통해 볼 수 있습니다). 나는 내용의 관점 (아래 그림에서 투명한 내부 영역으로 표현됨)이 둥근 모서리의 모습을 가지길 원하지만, 나는 환상을 직접 만들어야한다고 기대한다.

내 첫 번째 방법 (경계과 같은 어두운 색으로 채워진) 사각형을 추가했다 (I는 럴커가 아닌 poster- please find the drawing here이기 때문에 이미지를 게시 할 수 없습니다) StatusBar 바로 위와 둥근 모서리가있는 테두리를 OpacityMask에 지정합니다 (Chris Cavanagh **가 제안한 솔루션과 비슷 함). 슬프게도, 생성되는 효과는 내가 달성하고자하는 것과는 정반대입니다.

이 상황에서 클립 속성을 사용할 수 있다는 것을 알고 있지만 어떤 종류의 기하 도형을 사용하면 동적으로 크기가 조정되지 않으므로 부적절한 것으로 판단됩니다. 상주합니다.

편집 : 내 XAML 포함 :

<Grid Background="{StaticResource ClientBg}" Tag="{Binding OverlayVisible}" Style="{StaticResource mainGridStyle}"> 

     <DockPanel LastChildFill="True"> 

      <!-- Translates to a StackPanel with a Menu and a Button --> 
      <local:FileMenuView DockPanel.Dock="Top" /> 

      <!-- Translates to a StatusBar --> 
      <local:StatusView DockPanel.Dock="Bottom" /> 

      <!-- Translates to a Grid --> 
      <local:ContentView /> 

     </DockPanel> 

    </Grid> 

모든 포인터를 내가 필요하면 더 심층적 인 내용을 제공 할 준비가 컴백 기념 이상이다. ** http://www.dotnetkicks.com/wpf/WPF_easy_rounded_corners_for_anything

답변

1

편집

: 지금 나는 당신이 무슨 뜻인지 얻었다. 실제로 Path + OpacityMask 방식을 사용할 수 있습니다. 불투명 마스크로 사용하려면 "거꾸로 된"패스를 그려야합니다. 그러나 나는 당신을 위해 더 간단하고 빠른 해결책을 가지고있다 :). Border + CornerRadius를 사용하고 단단한 패스로 간격을 채 웁니다. 그냥 Kaxaml에 다음 코드를 시도하고 이것이 당신이 찾고 있던 무엇을 알려 주시기 :

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="240" 
    Height="320" 
    AllowsTransparency="True" 
    Background="Transparent" 
    WindowStyle="None"> 
    <Grid> 
     <Grid.RowDefinitions> 
     <RowDefinition Height="24"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="24"/> 
     </Grid.RowDefinitions> 
     <Border Background="Black"/> 
     <Border Grid.Row="1" BorderBrush="Black" BorderThickness="5"> 
     <Grid> 
      <Border Background="White" CornerRadius="0, 0, 5, 5" Opacity="0.7"/> 
      <Path 
       Width="15" 
       Height="15" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Bottom" 
       Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z" 
       Fill="Black" 
       Stretch="Fill"/> 
      <Path 
       Width="15" 
       Height="15" 
       HorizontalAlignment="Right" 
       VerticalAlignment="Bottom" 
       Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z" 
       Fill="Black" 
       Stretch="Fill"> 
       <Path.RenderTransform> 
        <TransformGroup> 
        <ScaleTransform ScaleX="-1"/> 
        <TranslateTransform X="15"/> 
        </TransformGroup> 
       </Path.RenderTransform> 
      </Path> 
     </Grid> 
     </Border> 
     <Border Grid.Row="2" Background="Black"/> 
    </Grid> 
</Window> 

PS를 : 당신은 변환을 렌더링 피함으로써이 솔루션을 단순화 할 수 있습니다,하지만 당신은 아이디어를 얻었다.

+0

답장을 보내 주셔서 감사합니다. 데스크톱 자체가 콘텐츠 영역의 반투명 배경에서 볼 수 있다는 점을 제외하고는 정확합니다. 이것은 내 질문에 명확하지 않았다. 이것을 반영하도록 업데이트했습니다. – egoodberry

+0

이제 알았어. 업데이트 확인 :). 희망이 도움이됩니다. – Anvaka

+0

그것은 완벽합니다 - 고마워요! – egoodberry