কিভাবে একটি উল্লম্ব পৃথককারী যুক্ত করবেন?

Question

আমি একটি গ্রিডে একটি উল্লম্ব পৃথককারী যুক্ত করতে চাই, তবে আমি কেবল অনুভূমিকটি খুঁজে পেতে পারি। বিভাজনের রেখাটি অনুভূমিক বা উল্লম্ব হওয়া উচিত, সেখানে কি কোনও সম্পত্তি নেই?

আমি অনেক অনুসন্ধান করেছি, তবে এর কোনও সংক্ষিপ্ত এবং সহজ সমাধান খুঁজে পাইনি।

আমি নেট ফ্রেমওয়ার্ক 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?

— পল

এটি কাজ করে, তবে আমি যা চাই তা নয় isn't বিভাজকের সাথে এটি করার জন্য নিয়ন্ত্রণ হওয়া উচিত। একটি উপায় আছে ^^

— মার্টিন ওয়েবার

আমার মনে হয় আমি আসলে আয়তক্ষেত্রটি এখনই ব্যবহার করি, এমনকি যদি এটি আমার পছন্দ না হয়

— মার্টিন ওয়েবার

Borderসমাধানও হতে পারে ..

— মঙ্গেশ

Answer 1

এটি লেখক যা চেয়েছিলেন ঠিক তা করা উচিত:

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

আপনি একটি অনুভূমিক বিভাজক চাই, পরিবর্তন Orientationএর StackPanelজন্য Vertical।

Comments

আমার ক্ষেত্রে বিভাজনকারী স্ট্যাকপ্যানেলে নয়, কেবল স্টাইলের প্রয়োজন ছিল the

— Xtr

আমি সবসময় বাস্তবায়ন করেছি a RenderTransform। মনে রাখার জন্য ঝরঝরে শর্টকাট :)

— অ্যাশলে গ্রেনন

একটি উত্তর হওয়া উচিত, এই সেরা সেরা। তৃতীয় উত্তর হিসাবে কেন দেখাচ্ছে তা নিশ্চিত নয়!

— তাতরান্সকিমেমেড

উভয় অনুভূমিক এবং উল্লম্ব মধ্যে পুরোপুরি ভাল কাজ করে Menuমধ্যবর্তী MenuItemগুলি হিসাবে ভাল। মেনুটির উচ্চতা / প্রস্থের সাথে মেলে সর্বদা সুন্দরভাবে প্রসারিত।

— নাটিয়িক্স

Answer 2

এটি লেখক যা চেয়েছিলেন ঠিক তা নয়, তবে এটি খুব সাধারণ এবং প্রত্যাশার মতো ঠিক কাজ করে works

আয়তক্ষেত্রটি কাজটি করে:

<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

এটি ইউডব্লিউপিতে দুর্দান্ত কাজ করে। আপনার যদি একটি সরু রেখার প্রয়োজন হয় তবে স্ট্রোক রঙের পরিবর্তে পূরণ করুন এবং প্রস্থটি 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যাতে রূপান্তরটি লেআউট পাসের সময় ঘটে, রেন্ডার পাসের সময় নয়। লেআউট পাসটি ঘটে যখন ডাব্লুপিএফ নিয়ন্ত্রণ নিয়ন্ত্রণের চেষ্টা করে এবং প্রতিটি নিয়ন্ত্রণ কতটা জায়গা নেয় তা নির্ধারণ করার চেষ্টা করে, যখন ডাব্লুপিএফ নিয়ন্ত্রণ রেন্ডার করার চেষ্টা করে লেআউট পাসের পরে রেন্ডার পাস হয়।

আপনি মধ্যে পার্থক্য সম্বন্ধে আরও পড়তে পারেন LayoutTransformএবং RenderTransform এখানে বা এখানে

Comments

ভালই শোনা যাচ্ছে. তবে এটি এতটা বদলায় না change আমি এখনও vs2012 এর গুই-ডিজাইনারের নিয়ন্ত্রণগুলিকে ডক করতে পারি না। Vs2012 এ সম্ভবত একটি বাগ?

— মার্টিন ওয়েবার

@ মার্টিন ওয়েবার আমি নিশ্চিত না যে আপনি ভিএস-তে নিয়ন্ত্রণ "ডকিং" দ্বারা বোঝাতে চাইছেন what আপনার বিভাজক কোন ধরণের প্যানেলে হোস্ট করা হয়? যদি এটি হয় তবে DockPanelআপনি যেদিকে ডক করতে চান তা DockPanel.Dockআপনার Separatorপক্ষে সেট করতে সক্ষম হওয়া উচিত । ডাব্লুপিএফ দিয়ে, নিয়ন্ত্রণের হোস্টিং প্যানেল সাধারণত নিয়ন্ত্রণের অবস্থান এবং কখনও কখনও এমনকি ডিফল্ট আকারও নির্ধারণ করে। আপনি যদি ডাব্লুপিএফের বিন্যাসে নতুন হন তবে আমি এই নিবন্ধটি পড়ার পরামর্শ দেব: ডাব্লুপিএফ লেআউটগুলি - একটি ভিজ্যুয়াল কুইক স্টার্ট

— রাচেল

লিঙ্কের জন্য ধন্যবাদ! আমি এটা পড়তে হবে। হ্যাঁ আমি ডব্লিউপিএফ-এ নতুন। "ডকিং" দিয়ে আমি বোঝাতে চাইছিলাম, যখন আমি অন্যটির কাছে একটি নিয়ন্ত্রণ টেনে আনি তখন আমি একটি লাল রেখা পাই যাতে একটি লাইনের সমস্ত নিয়ন্ত্রণ আসলে একটি লাইনে থাকে। vs2012 থেকে কেবলমাত্র একজন সহায়ক। আমি যখন বিভাজকটি ঘোরান, আমি আর এই লাইনগুলি পাই না।

— মার্টিন ওয়েবার

@ মার্টিন ওয়েবার দুঃখিত, আমি আপনাকে আরও সাহায্য করতে পারি না - আমি ভিএস ২০১০ ব্যবহার করি এবং সাধারণত আমি এটি বিনা শৃঙ্খলাবদ্ধ বলে মনে করি এবং সাধারণত এটি ড্র্যাম / ড্রপ ডিজাইনার ব্যবহার করি না এবং আমার মনে হয় যে এটি এক্সএমএল জগাখিচুড়ি সৃষ্টি করেছে :) আপনি আপনি আপনার ভিজ্যুয়াল স্টুডিও ডিজাইনার সমস্যার জন্য বিশেষত একটি নতুন প্রশ্ন তৈরি করার সম্ভবত আরও ভাল ভাগ্য হবে, কারণ এই প্রশ্নটি এখানে উল্লম্ব বিভাজক কীভাবে তৈরি করা যায় তার উপর আরও বেশি কেন্দ্রীভূত বলে মনে হয়

— রাচেল

আপনার টিপস জন্য আপনাকে ধন্যবাদ। আমি ডিজাইনার ছাড়াই এক্সএএমএল চেষ্টা করব এবং কয়েকটি টিউটোরিয়াল পড়ব। হতে পারে যদি আমি বিষয়গুলির আরও ভাল বুঝতে পারি তবে আমি নিজেই সমস্যার সমাধান করব;)

— মার্টিন ওয়েবার

Answer 4

আমি "লাইন" নিয়ন্ত্রণ ব্যবহার করতে চাই। বিভাজকটি আরম্ভ এবং শেষ কোথায় হয় তা এটি আপনাকে সঠিক নিয়ন্ত্রণ দেয়। যদিও এটি ঠিক কোনও বিভাজক নয়, এটি একইভাবে কাজ করে, বিশেষত স্ট্যাকপ্যানেলে।

লাইন নিয়ন্ত্রণ গ্রিডের মধ্যেও কাজ করে। আমি স্ট্যাকপ্যানেলটি ব্যবহার করতে পছন্দ করি কারণ আপনাকে বিভিন্ন নিয়ন্ত্রণের ওভারল্যাপিংয়ের বিষয়ে চিন্তা করতে হবে না।

<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 হওয়া উচিত)

এক্স 2 = এক্স সমাপ্তি অবস্থান (উল্লম্ব লাইনের জন্য এক্স 1 = এক্স 2)

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 থেকে -তে-সামগ্রী-নিয়ন্ত্রণ-মত গ্রিড? ফোরাম = ডাব্লুপিএফ :

এই উদাহরণটি ব্যবহার করে দেখুন এবং এটি আপনার প্রয়োজন অনুসারে ফিট করে কিনা, এর তিনটি প্রধান দিক রয়েছে।

1. Line.Stretch পূরণের জন্য সেট করা হয়।

2. অনুভূমিক রেখার জন্য রেখার উল্লম্ব অ্যালাইনমেন্টটি নীচে সেট করা হয়েছে, এবং উল্লম্বলাইনগুলির জন্য অনুভূমিকলাইনমেন্টটি ডানদিকে সেট করা হয়েছে।

3. এরপরে আমাদের কতটি সারি বা কলাম বিস্তৃত হতে হবে তা লাইনটি বলার দরকার আছে, এটি RowDifinitions বা কলামডেফিনেশনগুলি সম্পত্তি হিসাবে গণনা করে আবদ্ধ করেই করা হয়।

   
   
   

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