2011-03-27 9 views
5

के साथ सीमा के अंदर नियंत्रण कैसे शैली बनाएं मेरे पास एक साधारण विंडो है जिसमें एक कोने त्रिज्या के साथ बाहरी सीमा है, और पृष्ठभूमि के साथ एक आंतरिक सीमा है। सीमा मूल रूप से गोलाकार कोने बाहरी सीमा के अंदर किसी भी प्रकार की सामग्री के लिए प्लेसहोल्डर है। ,कोने त्रिज्या

Bad corner rendering

मैं अपने बाहरी नियंत्रण को कैसे समायोजित करूं:

<Window x:Class="TestRunner.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" 
     WindowStyle="None" Background="{x:Null}" > 
    <Border BorderThickness="2" BorderBrush="Black" CornerRadius="8" >  
      <Border Background="White"> 

      </Border> 
    </Border> 
</Window> 

समस्या यह है कि आंतरिक नियंत्रण गोल कोने के वारिस नहीं है, तो यह गोल कोने की चोटी पर ले जाती है, इस तरह है इसलिए आंतरिक नियंत्रण गोलाकार कोने के शीर्ष पर आकर्षित करने का प्रयास नहीं करते हैं।

आंतरिक नियंत्रण पर गोलाकार कोने सेट करना व्यवहार्य विकल्प नहीं है क्योंकि यह कोने त्रिज्या के भयानक डुप्लिकेशंस का कारण बनता है।

उत्तर

4

मुझे लगता है कि आपके पास समस्या का वर्णन करने के लिए Border के भीतर Border है। यदि संभव हो, तो बाहरी Border के भीतर किसी भी नियंत्रण को शामिल न करके पूरी तरह से समस्या से बचें जो कोनों में कुछ भी प्रस्तुत करता है।

आप चाहिए एक नियंत्रण है कि कोनों में कुछ renders शामिल हैं, तो आप इस्तेमाल कर सकते हैं एक Clip:

<Border x:Name="border" CornerRadius="10"> 
    <Border.Clip> 
     <RectangleGeometry Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}" RadiusX="10" RadiusY="10"/> 
    </Border.Clip> 

    <Border Background="White"/> 
</Border> 

एक अन्य विकल्प (अपने सटीक परिदृश्य के आधार पर) के ऊपर बाहरी Border जगह "करने के लिए हो सकता है "दूसरी सामग्री। जब तक यह false करने के लिए एक पारदर्शी Fill और IsHitTestVisible सेट है, यह पर्याप्त हो सकता है:

<Grid> 
    <Border Background="White"/> 
    <Border CornerRadius="10" BorderBrush="Black" BorderThickness="3" Fill="Transparent" IsHitTestVisible="false"/> 
</Grid> 
0

एक संभावना यह बाहरी सीमा पर कुछ गद्दी डाल करने के लिए हो सकता है:

<Border BorderThickness="2" BorderBrush="Black" CornerRadius="8" Padding="4"> 
    .... 
</Border> 

लेकिन इस जन्म दे सकता है आपके आवेदन में बहुत अधिक सफेद जगह के लिए।

1

RectangleGeometry में कम से कम WPF में Width संपत्ति नहीं है।

मेरी जरूरतों के लिए, मैं के रूप में यहाँ वर्णित एक IMultiValueConverter बनाने के लिए किया था: https://stackoverflow.com/a/5650367/2663813

उसके बाद, मैं अभी भी कोनों पर एक समस्या थी, तो मैं केंट के दूसरा समाधान इस्तेमाल किया (ध्यान दें कि Border.Fill मौजूद नहीं है या तो)।

<Grid> 
    <Border x:Name="canvasBorder" CornerRadius="5"> 
     <Border.Resources> 
      <tools:ContentClipConverter x:Key="ContentClipConverter" /> 
     </Border.Resources> 
     <Border.Clip> 
      <MultiBinding Converter="{StaticResource ContentClipConverter}"> 
       <Binding Path="ActualWidth" 
       RelativeSource="{RelativeSource Self}"/> 
       <Binding Path="ActualHeight" 
       RelativeSource="{RelativeSource Self}"/> 
       <Binding Path="CornerRadius" 
       RelativeSource="{RelativeSource Self}"/> 
      </MultiBinding> 
     </Border.Clip> 
     <!-- ... --> 
    </Border> 
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="Transparent" IsHitTestVisible="false" /> 
</Grid> 

और ContentClipConverter.cs अंदर:

/// <summary> 
/// Clips the content of a rounded corner border. 
/// Code taken from <a href="https://stackoverflow.com/a/5650367/2663813">this topic</a> 
/// </summary> 
public class ContentClipConverter : IMultiValueConverter { 
    /// <summary> 
    /// Gets a clipping geometry for the item 
    /// </summary> 
    /// <param name="values">The input values</param> 
    /// <param name="targetType">The parameter is not used.</param> 
    /// <param name="parameter">The parameter is not used.</param> 
    /// <param name="culture">The parameter is not used.</param> 
    /// <returns>The clipping geometry</returns> 
    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; 
    } 

    /// <summary> 
    /// Not implemented 
    /// </summary> 
    /// <param name="value">The parameter is not used.</param> 
    /// <param name="targetTypes">The parameter is not used.</param> 
    /// <param name="parameter">The parameter is not used.</param> 
    /// <param name="culture">The parameter is not used.</param> 
    /// <returns>This function does not return anything</returns> 
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { 
     throw new NotSupportedException(); 
    } 

यहाँ मैं एक क्या लिखा है

संबंधित मुद्दे