Bagaimana cara menambahkan pemisah vertikal?

Saya ingin menambahkan Pemisah vertikal ke Grid, tetapi saya hanya dapat menemukan horizontal. Apakah tidak ada Properti, di mana Anda bisa masuk jika garis pemisah harus horizontal atau vertikal?

Saya banyak mencari, tetapi tidak menemukan solusi yang singkat dan mudah untuk ini.

Saya menggunakan .Net Framework 4.0 dan Visual Studio Ultimate 2012.

Jika saya mencoba memutar Pemisah horizontal sebesar 90 derajat, ia kehilangan kemampuan untuk "berlabuh" ke Komponen lain.

Pemisah yang diputar terlihat seperti ini:

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

Ini harus melakukan apa yang diinginkan penulis:

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

jika Anda menginginkan pemisah horizontal, ubah Orientationdari StackPanelmenjadi Vertical.

Ini tidak persis seperti yang diminta penulis, tetapi tetap saja, ini sangat sederhana dan bekerja persis seperti yang diharapkan.

Persegi panjang melakukan pekerjaan:

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

Di masa lalu saya menggunakan gaya yang ditemukan di sini

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

Anda perlu menyetel transformasi ke dalam LayoutTransformalih-alih RenderTransformagar transformasi terjadi selama Pass Layout, bukan selama Render pass. Pass Layout terjadi ketika WPF mencoba mengatur tata letak dan mencari tahu berapa banyak ruang yang dibutuhkan setiap kontrol, sedangkan Render pass terjadi setelah tata letak berlalu ketika WPF mencoba merender kontrol.

Anda dapat membaca lebih lanjut tentang perbedaan antara LayoutTransformdan di RenderTransform sini atau di sini

Saya suka menggunakan kontrol "Line". Ini memberi Anda kontrol yang tepat atas di mana pemisah dimulai dan diakhiri. Meskipun bukan pemisah, fungsinya sama, terutama di StackPanel.

Kontrol garis juga berfungsi dalam kisi. Saya lebih suka menggunakan StackPanel karena Anda tidak perlu khawatir tentang berbagai kontrol yang tumpang tindih.

<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 posisi awal (harus 0 untuk garis vertikal)

X2 = x posisi akhir (X1 = X2 untuk garis vertikal)

Y1 = y posisi awal (harus 0 untuk garis vertikal)

Y2 = y posisi akhir (Y2 = tinggi garis yang diinginkan)

Saya menggunakan "margin" untuk menambahkan padding di setiap sisi garis vertikal. Dalam contoh ini, ada 5 piksel di kiri dan 10 piksel di kanan garis vertikal.

Karena kontrol garis memungkinkan Anda memilih koordinat x dan y dari awal dan akhir garis, Anda juga dapat menggunakannya untuk garis horizontal dan garis pada setiap sudut di antaranya.

Ini adalah cara yang sangat sederhana untuk melakukannya tanpa fungsionalitas dan semua efek visual,

Gunakan kisi dan sesuaikan saja.

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

Hanya cara lain untuk melakukannya.

Pemisah vertikal

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

pemisah horizontal

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

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

Coba contoh ini dan lihat apakah itu sesuai dengan kebutuhan Anda, ada tiga aspek utamanya.

1. Line.Stretch diatur untuk mengisi.

2. Untuk garis horizontal VerticalAlignment garis disetel ke Bawah, dan untuk Garis Vertikal HorizontalAlignment disetel ke Kanan.

3. Kita kemudian perlu memberi tahu baris berapa banyak baris atau kolom untuk direntangkan, ini dilakukan dengan mengikat ke properti penghitungan RowDefinitions atau 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>

menggunakan

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

Inilah cara saya melakukannya:

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