استخدم UIElement كمقطع في WPF

Question

من فضلك اعذرني على جهلي، فأنا جديد جدًا على WPF.

إنني أتطلع إلى تنفيذ تأثير مرئي بسيط في تطبيقي يعطي مظهر الزوايا الدائرية "الداخلية".تحتوي النافذة المعنية على حدود داكنة تحتوي على العديد من عناصر واجهة المستخدم (UIElements)، أحدها هو شريط الحالة (StatusBar)، الموجود في الجزء السفلي من النافذة.يحتوي شريط الحالة هذا على خلفية داكنة تتطابق مع حدود النافذة.يوجد أعلى شريط الحالة عرض محتوى، وهو حاليًا عبارة عن شبكة - وخلفيته شبه شفافة (أعتقد أن هذا يمثل قيدًا - يمكنك رؤيته من خلال عرض المحتوى على سطح المكتب أدناه).أرغب في أن يبدو عرض المحتوى (الممثل بالمنطقة الداخلية الشفافة في الشكل أدناه) على شكل زوايا مستديرة، على الرغم من أنني أتوقع أن أضطر إلى إنشاء الوهم بنفسي.

(لا أستطيع نشر الصورة لأنني متربص ولست ملصقاً-) يرجى العثور على الرسم هنا)

كان النهج الأول الذي اتبعته هو إضافة مستطيل (مملوء بنفس اللون الداكن كالحدود) مباشرة فوق شريط الحالة وتعيين حد بزوايا مستديرة لقناع OpacityMask الخاص به (على غرار الحل الذي اقترحه Chris Cavanagh**).ومن المؤسف أن التأثير الذي يتم إنتاجه هو عكس ما أحاول تحقيقه تمامًا.

أدرك أن خاصية Clip يمكن أن تكون مفيدة في هذا النوع من المواقف، ولكن يبدو لي أن استخدام أي نوع من الهندسة سيكون غير مناسب لأنه لن يتم ضبط حجمه ديناميكيًا على المنطقة التي يوجد بها.

يحرر:بما في ذلك 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

Answer 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>

ملاحظة:يمكنك تبسيط هذا الحل عن طريق تجنب تحويلات العرض، ولكنك حصلت على الفكرة.