質問

私の無知をご容赦ください-私はWPFが初めてです。

「内部」の外観を与えるマイナーな視覚効果をアプリケーションに実装したいと考えています。丸い角。問題のウィンドウには、いくつかのUIElementをカプセル化する暗い境界線があり、その1つはウィンドウの下部にあるStatusBarです。このStatusBarには、ウィンドウの境界に一致する暗い背景があります。 StatusBarの上にはコンテンツビューがあり、現在はグリッドです-その背景は半透明です(これは何らかの制約だと思います-コンテンツビューから下のデスクトップに表示できます)。コンテンツビュー(下の図の透明な内側の領域で表される)に丸みを帯びたコーナーの外観を持たせたいのですが、自分で錯覚を作成する必要があると考えています。

(私はポスターではなく、潜伏者なので画像を投稿できません-ここで図面を見つけてください

最初のアプローチは、StatusBarのすぐ上にRectangle(境界線と同じ濃い色で塗りつぶされた)を追加し、OpacityMaskに角の丸いBorderを割り当てることでした(Chris Cavanagh **が提案したソリューションと同様) 。悲しいことに、生成される効果は、私が達成しようとしているものとは正反対です。

この種の状況ではClipプロパティを使用できることは理解していますが、Geometryが存在する領域に合わせて動的にサイズ調整されないため、Geometryを使用することは不適切であると思われます。

編集: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

役に立ちましたか?

解決

編集:これで意味がわかりました。実際、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:レンダリング変換を回避することでこのソリューションを簡素化できますが、アイデアは得られました。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top