จะเพิ่มตัวคั่นแนวตั้งได้อย่างไร?

ฉันต้องการเพิ่มตัวคั่นแนวตั้งลงในตาราง แต่ฉันหาได้เฉพาะแนวนอน ไม่มีพร็อพเพอร์ตี้ที่คุณสามารถป้อนได้ว่าเส้นของตัวคั่นควรเป็นแนวนอนหรือแนวตั้ง?

ฉันค้นหามาก แต่ไม่พบวิธีแก้ปัญหาที่สั้นและง่าย

ฉันใช้. Net Framework 4.0 และ Visual Studio Ultimate 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>

สิ่งนี้ควรทำตามที่ผู้เขียนต้องการ:

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

ถ้าคุณต้องการที่คั่นแนวนอนเปลี่ยนOrientationของการStackPanelVertical

นี่ไม่ใช่สิ่งที่ผู้เขียนถาม แต่ถึงกระนั้นมันก็ง่ายมากและทำงานได้ตามที่คาดไว้

สี่เหลี่ยมผืนผ้าทำงาน:

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

ในอดีตฉันเคยใช้สไตล์ที่พบที่นี่

<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เพื่อให้การเปลี่ยนแปลงเกิดขึ้นระหว่าง Layout pass ไม่ใช่ระหว่าง Render pass Layout pass เกิดขึ้นเมื่อ WPF พยายามจัดวางตัวควบคุมและคำนวณว่าแต่ละคอนโทรลใช้พื้นที่เท่าใดในขณะที่ Render pass เกิดขึ้นหลังจาก Layout pass เมื่อ WPF พยายามแสดงการควบคุม

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างLayoutTransformและRenderTransform ที่นี่หรือที่นี่

ฉันชอบใช้การควบคุม "เส้น" ช่วยให้คุณสามารถควบคุมตำแหน่งที่ตัวคั่นเริ่มต้นและสิ้นสุดได้อย่างแน่นอน แม้ว่าจะไม่ใช่ตัวคั่น แต่ก็มีหน้าที่เหมือนกันโดยเฉพาะใน 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 ของจุดเริ่มต้นและจุดสิ้นสุดของบรรทัดคุณจึงสามารถใช้สำหรับเส้นแนวนอนและเส้นที่มุมใดก็ได้ระหว่างกัน

นี่เป็นวิธีง่ายๆในการทำโดยไม่มีฟังก์ชันใด ๆ และเอฟเฟกต์ภาพทั้งหมด

ใช้เส้นตารางและปรับแต่งได้ง่ายๆ

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

อีกวิธีหนึ่งที่จะทำ

ตัวคั่นแนวตั้ง

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

ตัวคั่นแนวนอน

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

จากhttp://social.msdn.microsoft.com/Forums/vstudio/en-US/12ead5d4-1d57-4dbb-ba81-bc13084ba370/how-can-i-add-a-line-as-a-visual-separator -to-the-content-control-like-grid? forum = wpf :

ลองดูตัวอย่างนี้และดูว่าเหมาะกับความต้องการของคุณหรือไม่มีสามประเด็นหลัก ๆ

1. Line.Stretch ถูกกำหนดให้เติม

2. สำหรับเส้นแนวนอน VerticalAlignment ของเส้นถูกกำหนดไว้ด้านล่างและสำหรับ VerticalLines นั้น HorizontalAlignment จะถูกตั้งค่าเป็น Right

3. จากนั้นเราต้องบอกบรรทัดว่าจะขยายจำนวนแถวหรือคอลัมน์ซึ่งทำได้โดยการผูกเข้ากับคุณสมบัติการนับ RowDefinitions หรือ ColumnDefintions

   
   
   

       <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}"/>  
   

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

นี่คือวิธีที่ฉันทำ:

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