सीमा को बाल तत्वों को कैसे ट्रिम करें?

Question

मुझे लगता है कि Border अंदर से 10 एक सेट BorderCornerRadius संपत्ति के साथ होता है, इसलिए StackPanel है। पैनल में क्रमशः नीले और लाल पृष्ठभूमि के साथ दो Border एस शामिल हैं।

नीली सीमा के ऊपरी बाएं और ऊपरी दाएं कोने और लाल सीमा के निचले बाएं और निचले दाएं किनारे पहले सीमा के घुमावदार किनारों से चिपके हुए हैं। मैं नीली और लाल सीमाओं को पैरेंट सीमा तक ट्रिम करना चाहता हूं। क्या यह संभव है?

वैसे, मुझे पता है कि अगर मैं नीली और लाल सीमाओं की CornerRadius संपत्ति के लिए एक ही मान निर्धारित करता हूं, तो यह पहले के वक्र का पालन करेगा। मुझे वह नहीं चाहिए - मैं ट्रिम करना चाहता हूं। धन्यवाद!

<Border 
    Width="200" 
    Height="200" 
    BorderThickness="1" 
    BorderBrush="Black" 
    CornerRadius="10"> 
    <StackPanel> 
     <Border Height="100" Background="Blue" /> 
     <Border Height="100" Background="Red" /> 
    </StackPanel> 
</Border> 

Answer 1

आप क्लिप संपत्ति के लिए एक कनवर्टर लिख सकते हैं पुनः बनाने लगते हैं। कनवर्टर को IMultiValueConverter को कार्यान्वित करना चाहिए और वास्तविक आकार और कोने त्रिज्या से बाध्य होना चाहिए, उदाहरण के लिए।

public class BorderClipConverter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) 
    { 
     if (values.Length == 3 && values[0] is double && values[1] is double && values[2] is CornerRadius) 
     { 
      var width = (double)values[0]; 
      var height = (double)values[1]; 

      if (width < Double.Epsilon || height < Double.Epsilon) 
      { 
       return Geometry.Empty; 
      } 

      var radius = (CornerRadius)values[2]; 

      // Actually we need more complex geometry, when CornerRadius has different values. 
      // But let me not to take this into account, and simplify example for a common value. 
      var clip = new RectangleGeometry(new Rect(0, 0, width, height), radius.TopLeft, radius.TopLeft); 
      clip.Freeze(); 

      return clip; 
     } 

     return DependencyProperty.UnsetValue; 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
    { 
     throw new NotSupportedException(); 
    } 
} 

उपयोग:

<Border CornerRadius="10"> 
    <Border.Clip> 
     <MultiBinding Converter="{StaticResource BorderClipConverter}"> 
      <Binding Path="ActualWidth" 
         RelativeSource="{RelativeSource Self}"/> 
      <Binding Path="ActualHeight" 
         RelativeSource="{RelativeSource Self}"/> 
      <Binding Path="CornerRadius" 
         RelativeSource="{RelativeSource Self}"/> 
     </MultiBinding> 
    </Border.Clip> 
</Border> 

Answer 2

ClipToBounds वह संपत्ति है जो इस मामले में मदद कर सकती है।

संपादित करें: कुछ परीक्षण मैं देखा है कि ClipToBounds केवल वास्तविक सीमा का ध्यान रखता है (यानी आयताकार क्षेत्र नियंत्रण का उपयोग करता है), इसलिए सामग्री अभी भी कोनों पर बाहर चिपक जाता है के बाद ...

यह लगता सुझाव देने के लिए सीमा पर सरल क्लिपिंग संभव नहीं है। आप Clip संपत्ति को गोलाकार आयताकार पर सेट कर सकते हैं, यह बहुत सुविधाजनक नहीं है क्योंकि इसका आकार बाध्य नहीं हो सकता है।

आपके विकल्प एक VisualBrush के साथ एक साथ एक OpacityMask का उपयोग कर या एक कतरन जब भी प्रासंगिक गुण एक MultiBinding & MultiValueConverter का उपयोग करके बदल ...

Answer 3

वहाँ भी एक XAML-केवल OpacityMask संपत्ति का उपयोग करके अपने समस्या का समाधान है। यह चाल बाहरी सीमा के अंदर Grid बनाने और ग्रिड की ओपेसिटीमास्क को एक अन्य तत्व पर सेट करना है जो क्लिपिंग मास्क के रूप में कार्य करती है।

<Border Width="200" Height="200" 
     BorderThickness="1" BorderBrush="Black" 
     CornerRadius="10"> 
    <Grid> 
     <Grid.OpacityMask> 
      <VisualBrush Visual="{Binding ElementName=clipMask}" Stretch="None" /> 
     </Grid.OpacityMask> 
     <Border x:Name="clipMask" Background="White" CornerRadius="10" /> 
     <StackPanel Background="White"> 
      <Border Height="100" Background="Blue" /> 
      <Border Height="100" Background="Red" /> 
     </StackPanel> 
    </Grid> 
</Border> 

स्निपेट में ऊपर मैं मुखौटा कतरन के रूप में एक Border इस्तेमाल किया, लेकिन यह भी रूप में लंबे समय के रूप में अपनी भरण रंग अपारदर्शी है एक और तत्व हो सकता है। ध्यान दें कि क्लिपमास्क सीमा में भी CornerRadius है। http://www.codeproject.com/Articles/225076/Creating-Inner-Shadows-for-WPF-and-Silverlight