मैं एक डब्ल्यूपीएफ तत्व को एक आयताकार फ्लैट 3 डी सीमा कैसे दे सकता हूं?

Question

मैं अपने नियंत्रण टेम्पलेट्स में से एक के लिए एक आयताकार 'फ्लैट 3 डी' लुक बनाना चाहता हूं। इसके सबसे सरल संस्करण में इसका मतलब है कि नीचे की रेखा एक शीर्ष है जो शीर्ष पर उससे अधिक गहरा है, और शायद बाएं और दाएं रेखाओं के बीच कुछ भिन्नता भी हो सकती है।

एक और जटिल संस्करण मुझे या अधिक ब्रश प्रदान करने की अनुमति देगा ताकि ग्रेडियेंट लागू किया जा सके।

WPF में डिफ़ॉल्ट <Border> तत्व आपको प्रति किनारे की एक अलग मोटाई निर्दिष्ट करने देता है, लेकिन मुझे एकाधिक ब्रश निर्दिष्ट करने का कोई तरीका नहीं मिल रहा है।

तो, मैं जितना संभव हो सके प्रभाव को मैं कैसे उत्पन्न कर सकता हूं?

EDIT यह सुझाव दिया गया है कि मैं इसका उदाहरण देता हूं कि मैं इसका उपयोग कैसे करना चाहता हूं। व्यक्तिगत रूप से मुझे शैली या उपयोगकर्ता नियंत्रण होने में खुशी होगी। उपयोगकर्ता नियंत्रण इस प्रकार इस्तेमाल किया जा सकता है:

<FourSidedBorder LeftSideBrush="#00f" RightSideBrush="#0f0" ... /> 

या शायद और भी आसान:

<FourSidedBorder BorderBrush="#00f,#0f0,#f00,#fff" 
       BorderThickness="1,2,3,4" ... /> 

ये सिर्फ विचार कर रहे हैं। कोई समझदार, संक्षिप्त समाधान स्वागत है।

Answer 1

यहाँ एक समाधान मैं तैयार हूँ कि मैं क्या चाहते हैं के सबसे को प्राप्त होता है। यह स्वतंत्र रूप से सभी चार पक्षों पर पूर्ण नियंत्रण नहीं देता है, लेकिन यह आयताकार फ्लैट 3 डी व्यू देता है जो मैं चाहता हूं।

यह इस प्रकार से दिखाई देता है:

http://img62.imageshack.us/img62/9638/flatrectanglebackground.png

खुद के लिए यह देखने के लिए Kaxaml में चिपकाएं:

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Background="#CCC"> 
    <Page.Resources> 
    <!-- A brush for flat 3D panel borders --> 
    <LinearGradientBrush x:Key="Flat3DBorderBrush" 
         StartPoint="0.499,0" EndPoint="0.501,1"> 
     <GradientStop Color="#FFF" Offset="0" /> 
     <GradientStop Color="#DDD" Offset="0.01" /> 
     <GradientStop Color="#AAA" Offset="0.99" /> 
     <GradientStop Color="#888" Offset="1" /> 
    </LinearGradientBrush> 
    </Page.Resources> 
    <Grid> 
    <!-- A flat 3D panel --> 
    <Border 
      HorizontalAlignment="Center" VerticalAlignment="Center" 
      BorderBrush="{StaticResource Flat3DBorderBrush}" 
      BorderThickness="1" Background="#BBB"> 

      <!-- some content here --> 
      <Control Width="100" Height="100"/> 

    </Border> 
    </Grid> 
</Page> 

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

Answer 2

ईमानदारी से लेयरिंग तकनीकों का उपयोग करने का सबसे आसान तरीका होगा। उदाहरण के लिए इस तरह एक ग्रिड बनाएं:

<Grid Width="50" Height="50"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 

    <!-- Top Border --> 
    <Border Height="3" Background="LightGray" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" /> 

    <!-- Right Border --> 
    <Border Width="3" Background="DarkGray" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" /> 

    <!-- Content --> 
    <Border Background="Gray" Grid.Row="1" Grid.Column="1" /> 

    <!-- Left Border --> 
    <Border Width="3" Background="LightGray" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" /> 

    <!-- Bottom Border --> 
    <Border Height="3" Background="DarkGray" Grid.Row="2" Grid.Column="1" /> 

    </Grid> 

मुझे लगता है कि आपको यह विचार मिलता है। यह संभवतः यह करने का सबसे आसान तरीका है। आप एक टेम्पलेट के रूप में स्थापित करने और इसे इस तरह इस्तेमाल कर सकते हैं:

<Template x:Key="My3DBorder" TargetType="ContentControl"> 
    <!-- Put the Grid definition in here from above --> 
</Template> 

<ContentControl Template="{StaticResource My3dBorder}"> 
    <!-- My Content Goes Here --> 
</ContentControl> 

Answer 3

मैंने कई सीमाओं को सीधे एक-दूसरे के ऊपर रखकर ऐसा कुछ किया है। उदा .:

<Border 
    x:Name="TopAndLeft" 
    BorderThickness="3,3,0,0" 
    BorderBrush="{x:Static SystemColors.ControlLightBrush}"> 
<Border 
    x:Name="BottomAndRight" 
    BorderThickness="0,0,3,3" 
    BorderBrush="{x:Static SystemColors.ControlDarkBrush}"> 
    <ContentPresenter ... /> 
</Border> 
</Border> 

यह सीमा प्रदान करता है कि सभी अन्य सुविधाओं का जोड़ा लाभ प्रदान करता है - कोने त्रिज्या और ऐसे।

Answer 4

आप प्रेजेंटेशन फ्रेमवर्क का संदर्भ दे सकते हैं।क्लासिक विधानसभा और उसके बाद का उपयोग

<Window xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"> 
... 

<Grid Width="50" Height="50"> 
    <mwt:ClassicBorderDecorator BorderThickness="3,3,3,3"/> 
</Grid> 

मैं this technique for looking at control templates उपयोग कर रहा था देखने के लिए कैसे डिफ़ॉल्ट बटन स्टाइल गया