Bagaimana cara menambahkan pemisah vertikal?

114

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>
Martin Weber
sumber
3
tidak bisakah kamu menggunakan gaya Rectangle?
paul
1
itu berhasil, tetapi bukan itu yang saya inginkan. pemisah harus menjadi kontrol untuk melakukan ini. pasti ada cara ^^
Martin Weber
Saya rasa saya benar-benar menggunakan Rectangle sekarang, bahkan jika saya tidak menyukainya
Martin Weber
1
Borderjuga bisa menjadi solusi ..
Mangesh

Jawaban:

193

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.

Emmanuel Romulus
sumber
4
Dalam kasus saya, hanya diperlukan gaya pada pemisah, bukan StackPanel yang melampirkan.
Xtr
Saya selalu menerapkan file RenderTransform. Pintasan rapi untuk diingat :)
Ashley Grenon
3
Harus menjadi jawaban, ini si yang terbaik. Tidak yakin mengapa ditampilkan sebagai jawaban ke-3!
Tatranskymedved
Bekerja dengan sangat baik di kedua horizontal dan vertikal Menuantara MenuItems juga. Selalu melakukan peregangan yang bagus agar sesuai dengan tinggi / lebar menu.
natiiix
50

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>
Anton P.
sumber
2
Ini bekerja dengan baik di UWP. Jika Anda membutuhkan garis yang lebih tipis, gunakan Fill sebagai ganti warna Stroke dan atur lebarnya menjadi 3: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />
Anthony Nichols
25

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

Rachel
sumber
Kedengarannya bagus. Namun, itu tidak banyak berubah. Saya masih tidak bisa memasang kontrol di gui-designer vs2012. Mungkin Bug di vs2012?
Martin Weber
@MartinWeber Saya tidak yakin apa yang Anda maksud dengan "memasang" kontrol di VS. Di jenis panel apa pemisah Anda dihosting? Jika itu adalah DockPanel, Anda harus dapat mengatur DockPanel.Dockpada Anda Separatorke samping apa pun yang Anda inginkan merapat ke. Dengan WPF, panel yang menghosting kontrol biasanya menentukan posisi kontrol dan terkadang bahkan ukuran default. Jika Anda baru mengenal tata letak WPF, saya akan merekomendasikan membaca artikel ini: Tata Letak WPF - Mulai Cepat Visual
Rachel
Terima kasih untuk tautannya! Saya akan membacanya. Ya, saya baru mengenal WPF. Dengan "Docking" yang saya maksud, ketika saya menyeret kontrol dekat yang lain saya mendapatkan garis merah sehingga semua kontrol dalam satu baris sebenarnya dalam satu baris. hanya pembantu dari vs2012. ketika saya memutar pemisah, saya tidak mendapatkan garis ini lagi.
Martin Weber
1
@MartinWeber Maaf saya tidak dapat membantu Anda lebih banyak - Saya menggunakan VS2010 dan biasanya tidak menggunakan desainer drag / drop sama sekali karena saya sering merasa tidak diperlukan dan tidak suka memelihara kekacauan XMAL Saya pikir itu menghasilkan :) Anda mungkin lebih beruntung dalam membuat pertanyaan baru khusus untuk masalah desainer Visual Studio Anda, karena pertanyaan di sini tampaknya lebih difokuskan pada cara membuat pemisah vertikal
Rachel
Terima kasih atas Tip Anda. Saya akan mencoba XAML tanpa Designer dan akan membaca beberapa Tutorial. Mungkin jika saya mendapatkan pemahaman yang lebih baik tentang berbagai hal, saya akan menyelesaikan masalah sendiri;)
Martin Weber
11

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.

Kevin K
sumber
2

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.

Connor Mcgrann
sumber
2
Luar biasa !!!! Memecahkannya dengan cara ini, tetapi ide yang sama: <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>
Anthony Nichols
2

Pemisah vertikal

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

pemisah horizontal

<Rectangle HorizontalAlignment="Stretch" Fill="Blue" Height="4"/>
Mohimenul Joaa
sumber
0

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

VoteCoffee
sumber
0
<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>
hyperneu
sumber
-3

Inilah cara saya melakukannya:

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