वर्टिकल सेपरेटर कैसे जोड़ें?

Question

मैं एक ग्रिड में एक ऊर्ध्वाधर विभाजक जोड़ना चाहता हूं, लेकिन मैं केवल क्षैतिज पा सकता हूं। क्या कोई संपत्ति नहीं है, जहां आप प्रवेश कर सकते हैं यदि विभाजक की रेखा क्षैतिज या ऊर्ध्वाधर होनी चाहिए?

मैंने बहुत खोज की, लेकिन इसका एक छोटा और आसान समाधान नहीं मिला।

मैं .Net फ्रेमवर्क 4.0 और विजुअल स्टूडियो अल्टीमेट 2012 का उपयोग करता हूं।

अगर मैं 90 डिग्री तक क्षैतिज विभाजक को घुमाने की कोशिश करता हूं, तो यह अन्य घटकों को "डॉक" करने की क्षमता खो देता है।

घुमाया हुआ विभाजक इस तरह दिखता है:

<Separator HorizontalAlignment="Left" Height="100" Margin="264,26,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5">
    <Separator.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="90"/>
            <TranslateTransform/>
        </TransformGroup>
    </Separator.RenderTransform>
</Separator>

Comments

तुम सिर्फ एक स्टाइल का उपयोग नहीं कर सकते Rectangle?

— पॉल

यह काम करता है, लेकिन मैं क्या चाहता हूँ नहीं है विभाजक को ऐसा करने के लिए नियंत्रण होना चाहिए। एक रास्ता होना चाहिए ^ ^

— मार्टिन वेबर

मुझे लगता है कि मैं वास्तव में आयत का उपयोग करता हूं, भले ही मुझे यह पसंद नहीं है

— मार्टिन वेबर

Borderयह भी एक समाधान हो सकता है ..

— मंगेश

Answer 1

यह वही होना चाहिए जो लेखक चाहता था:

<StackPanel Orientation="Horizontal">
    <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />            
</StackPanel>

यदि आप एक क्षैतिज विभाजक चाहते हैं, को बदलने Orientationके StackPanelलिए Vertical।

Comments

मेरे मामले में विभाजक पर केवल शैली की आवश्यकता थी, न कि स्टैकपैनल को घेरने की।

— एक्सटीआर

मैंने हमेशा लागू किया है RenderTransform। याद करने के लिए नीट शॉर्टकट :)

— एशले ग्रेनन

एक उत्तर होना चाहिए, यह सी सबसे अच्छा है। यह सुनिश्चित नहीं है कि तीसरा उत्तर क्यों दिखाया जा रहा है!

— तात्रसिकम्वेद

दोनों के Menuबीच क्षैतिज और ऊर्ध्वाधर दोनों में पूरी तरह से अच्छी तरह से काम करता है MenuItem। मेनू की ऊँचाई / चौड़ाई से मेल खाने के लिए हमेशा अच्छी तरह से फैला होता है।

— नाटीिक्स

Answer 2

यह बिल्कुल वैसा नहीं है जैसा लेखक ने पूछा, लेकिन फिर भी, यह बहुत सरल है और अपेक्षा के अनुरूप काम करता है।

आयत काम करती है:

<StackPanel Grid.Column="2" Orientation="Horizontal">
    <Button >Next</Button>
    <Button >Prev</Button>
    <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Black" />
    <Button>Filter all</Button>
</StackPanel>

Comments

यह UWP में बढ़िया काम करता है। यदि आपको एक पतली रेखा के उपयोग की आवश्यकता है, तो स्ट्रोक रंग के बजाय भरें और चौड़ाई को 3 पर सेट करें: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />

— एंथनी निकोल्स

Answer 3

अतीत में मैंने यहां पाई गई शैली का उपयोग किया है

<Style x:Key="VerticalSeparatorStyle" 
       TargetType="{x:Type Separator}"
       BasedOn="{StaticResource {x:Type Separator}}">
    <Setter Property="Margin" Value="6,0,6,0"/>
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <TransformGroup>
                <TransformGroup.Children>
                    <TransformCollection>
                        <RotateTransform Angle="90"/>
                    </TransformCollection>
                </TransformGroup.Children>
            </TransformGroup>
        </Setter.Value>
    </Setter>
</Style>

<Separator Style="{DynamicResource VerticalSeparatorStyle}" />

आपको LayoutTransformइसके बजाय परिवर्तन सेट करने की आवश्यकता हैRenderTransform ताकि परिवर्तन लेआउट पास के दौरान होता है, न कि रेंडर पास के दौरान। लेआउट पास तब होता है जब WPF लेआउट नियंत्रणों की कोशिश कर रहा होता है और यह पता लगाता है कि प्रत्येक नियंत्रण कितना स्थान लेता है, जबकि लेआउट पास के बाद होता है जब WPF नियंत्रणों को प्रस्तुत करने की कोशिश कर रहा होता है।

आप के बीच के अंतर के बारे में अधिक पढ़ सकते हैं LayoutTransformऔर RenderTransform यहाँ या यहाँ

Comments

वह बहुत अच्छा लगता है। हालाँकि, यह उतना नहीं बदलता है। मैं अभी भी vs2012 के गाइ-डिज़ाइनर में नियंत्रण को डॉक नहीं कर सकता। शायद बनाम 2017 में बग?

— मार्टिन वेबर

@ मर्टिन वेबर मुझे यकीन नहीं है कि वीएस में नियंत्रण "डॉकिंग" से आपका क्या मतलब है। आपके विभाजक को किस प्रकार के पैनल में होस्ट किया गया है? यदि यह एक है DockPanel, तो आप DockPanel.Dockअपने Separatorपक्ष में यह निर्धारित करने में सक्षम होना चाहिए कि आप इसे किस ओर ले जाना चाहते हैं। WPF के साथ, नियंत्रण की मेजबानी करने वाला पैनल आमतौर पर नियंत्रण की स्थिति और कभी-कभी डिफ़ॉल्ट आकार भी निर्धारित करता है। यदि आप WPF के लेआउट के लिए नए हैं, तो मैं इस लेख के माध्यम से पढ़ने की सलाह दूंगा

— राहेल

लिंक के लिए धन्यवाद! मैं वही पढ़ूंगा। हाँ, मैं WPF के लिए नया हूँ। "डॉकिंग" से मेरा मतलब था, जब मैं एक नियंत्रण को दूसरे के पास खींचता हूं तो मुझे एक लाल रेखा मिलती है ताकि एक पंक्ति में सभी नियंत्रण वास्तव में एक पंक्ति में हों। vs2012 से सिर्फ एक सहायक। जब मैं विभाजक को घुमाता हूं, तो मुझे ये लाइनें नहीं मिलती हैं।

— मार्टिन वेबर

@MartinWeber क्षमा करें, मैं आपकी अधिक सहायता नहीं कर सकता - मैं VS2010 का उपयोग करता हूं और आमतौर पर ड्रैग / ड्रॉप डिजाइनर का उपयोग नहीं करता हूं क्योंकि मुझे अक्सर यह अनावश्यक लगता है और एक्सएमएल मेस को बनाए रखना पसंद नहीं है, मुझे लगता है कि यह उत्पन्न करता है :) आप विशेष रूप से आपके विजुअल स्टूडियो डिजाइनर समस्या के लिए एक नया प्रश्न बनाने से बेहतर भाग्य होगा, क्योंकि यह प्रश्न यहां एक ऊर्ध्वाधर विभाजक बनाने पर अधिक ध्यान केंद्रित करता है

— राहेल

आपकी युक्तियों के लिए धन्यवाद। मैं XAML डिज़ाइनर के बिना कोशिश करूँगा और कुछ ट्यूटोरियल पढ़ूँगा। हो सकता है कि अगर मुझे चीजों की बेहतर समझ हो जाए तो मैं खुद समस्या का हल निकाल लूंगा;)

— मार्टिन वेबर

Answer 4

मुझे "लाइन" नियंत्रण का उपयोग करना पसंद है। यह आपको सटीक नियंत्रण देता है जहां विभाजक शुरू होता है और समाप्त होता है। हालांकि यह बिल्कुल विभाजक नहीं है, लेकिन यह एक ही तरीका है, विशेष रूप से एक StackPanel में।

ग्रिड के भीतर भी लाइन कंट्रोल काम करता है। मैं StackPanel का उपयोग करना पसंद करता हूं क्योंकि आपको विभिन्न नियंत्रणों के अतिव्यापी होने की चिंता करने की आवश्यकता नहीं है।

<StackPanel Orientation="Horizontal">
    <Button Content="Button 1" Height="20" Width="70"/>
    <Line X1="0" X2="0" Y1="0" Y2="20" Stroke="Black" StrokeThickness="0.5" Margin="5,0,10,0"/>
    <Button Content="Button 2" Height="20" Width="70"/>
</StackPanel>

X1 = x प्रारंभिक स्थिति (एक ऊर्ध्वाधर रेखा के लिए 0 होनी चाहिए)

X2 = x समाप्ति स्थिति (एक ऊर्ध्वाधर रेखा के लिए X1 = X2)

Y1 = y प्रारंभिक स्थिति (एक ऊर्ध्वाधर रेखा के लिए 0 होनी चाहिए)

Y2 = y समाप्ति स्थिति (Y2 = वांछित पंक्ति ऊँचाई)

ऊर्ध्वाधर लाइन के किसी भी तरफ पैडिंग जोड़ने के लिए मैं "मार्जिन" का उपयोग करता हूं। इस उदाहरण में, बाईं ओर 5 पिक्सेल और ऊर्ध्वाधर रेखा के दाईं ओर 10 पिक्सेल हैं।

चूंकि लाइन नियंत्रण आपको लाइन के प्रारंभ और अंत के x और y निर्देशांक लेने देता है, आप इसे बीच में किसी भी कोण पर क्षैतिज रेखाओं और रेखाओं के लिए उपयोग कर सकते हैं।

Answer 5

यह कोई कार्यक्षमता और सभी दृश्य प्रभाव के साथ करने का एक बहुत ही सरल तरीका है,

एक ग्रिड का उपयोग करें और बस इसे अनुकूलित करें।

<Grid Background="DodgerBlue" Height="250" Width="1" VerticalAlignment="Center" Margin="5,0,5,0"/>

बस इसे करने का एक और तरीका है।

Comments

अति उत्कृष्ट!!!! इसे इस तरह हल किया, लेकिन एक ही विचार: <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>

— एंथनी निकोल्स

Answer 6

लंबवत विभाजक

<Rectangle VerticalAlignment="Stretch" Fill="Blue" Width="1"/>

क्षैतिज विभाजक

<Rectangle HorizontalAlignment="Stretch" Fill="Blue" Height="4"/>

Answer 7

से http://social.msdn.microsoft.com/Forums/vstudio/en-US/12ead5d4-1d57-4dbb-ba81-bc13084ba370/how-can-i-add-a-line-as-a-visual-separator -तो-सामग्री-नियंत्रण-जैसे-ग्रिड; फोरम = wpf :

इस उदाहरण को आज़माएँ और देखें कि क्या यह आपकी आवश्यकताओं के अनुरूप है, इसके तीन मुख्य पहलू हैं।

1. Line.Stretch भरने के लिए सेट है।

2. क्षैतिज रेखाओं के लिए रेखा का वर्टिकल एलाइगमेंट बॉटम सेट है, और वर्टिकललाइंस के लिए हॉरिजोंटल एलाइगमेंट राइट पर सेट है।

3. फिर हमें यह बताने की आवश्यकता है कि कितने पंक्तियों या स्तंभों को स्पैन करना है, यह राउडीफिनिशंस या कॉलमडिफिनिशंस संपत्ति की गणना के लिए बाइंडिंग द्वारा किया जाता है।

   
   
   

       <Style x:Key="horizontalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}">  
           <Setter Property="X2" Value="1" /> 
           <Setter Property="VerticalAlignment" Value="Bottom" /> 
           <Setter Property="Grid.ColumnSpan" 
                   Value="{Binding   
                               Path=ColumnDefinitions.Count,  
                               RelativeSource={RelativeSource AncestorType=Grid}}"/> 
       </Style> 
   
       <Style x:Key="verticalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}">  
           <Setter Property="Y2" Value="1" /> 
           <Setter Property="HorizontalAlignment" Value="Right" /> 
           <Setter Property="Grid.RowSpan"   
                   Value="{Binding   
                               Path=RowDefinitions.Count,  
                               RelativeSource={RelativeSource AncestorType=Grid}}"/> 
       </Style> 
   </Grid.Resources>        
   
   <Grid.RowDefinitions> 
       <RowDefinition Height="20"/>  
       <RowDefinition Height="20"/>  
       <RowDefinition Height="20"/>  
       <RowDefinition Height="20"/>  
   </Grid.RowDefinitions> 
   
   <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="20"/>  
       <ColumnDefinition Width="20"/>  
       <ColumnDefinition Width="20"/>  
       <ColumnDefinition Width="20"/>  
   </Grid.ColumnDefinitions> 
   
   <Line Grid.Column="0" Style="{StaticResource verticalLineStyle}"/>  
   <Line Grid.Column="1" Style="{StaticResource verticalLineStyle}"/>  
   <Line Grid.Column="2" Style="{StaticResource verticalLineStyle}"/>  
   <Line Grid.Column="3" Style="{StaticResource verticalLineStyle}"/>  
   
   <Line Grid.Row="0" Style="{StaticResource horizontalLineStyle}"/>  
   <Line Grid.Row="1" Style="{StaticResource horizontalLineStyle}"/>  
   <Line Grid.Row="2" Style="{StaticResource horizontalLineStyle}"/>  
   <Line Grid.Row="3" Style="{StaticResource horizontalLineStyle}"/>  

Answer 8

<Style x:Key="MySeparatorStyle" TargetType="{x:Type Separator}">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
                <Setter Property="Margin" Value="10,0,10,0"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Separator}">
                            <Border 
                                  BorderBrush="{TemplateBinding BorderBrush}" 
                                  BorderThickness="{TemplateBinding BorderThickness}" 
                                  Background="{TemplateBinding Background}" 
                                  Height="20" 
                                  Width="3" 
                                  SnapsToDevicePixels="true"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

उपयोग

<StackPanel  Orientation="Horizontal"  >
       <TextBlock>name</TextBlock>
           <Separator Style="{StaticResource MySeparatorStyle}" ></Separator>
       <Button>preview</Button>
 </StackPanel>

Answer 9

यहाँ देखें कि मैंने यह कैसे किया:

<TextBlock Margin="0,-2,0,0">|</TextBlock>