UIElementをWPFのクリップとして使用する
質問
私の無知をご容赦ください-私は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:レンダリング変換を回避することでこのソリューションを簡素化できますが、アイデアは得られました。