Dikey Ayırıcı nasıl eklenir?

Izgaraya dikey bir Ayırıcı eklemek istiyorum, ancak yalnızca yatay olanı bulabiliyorum. Ayırıcının çizgisinin yatay mı yoksa dikey mi olması gerektiğini girebileceğiniz bir Özellik yok mu?

Çok aradım ama buna kısa ve kolay bir çözüm bulamadım.

.Net Framework 4.0 ve Visual Studio Ultimate 2012 kullanıyorum.

Yatay Ayırıcıyı 90 derece döndürmeye çalışırsam, diğer Bileşenlere "kenetlenme" özelliğini kaybeder.

Döndürülen ayırıcı şuna benzer:

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

Bu tam olarak yazarın istediği şeyi yapmalıdır:

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

Eğer yatay ayırıcı istiyorsanız, değiştirmek Orientationve StackPaneliçin Vertical.

Bu tam olarak yazarın istediği şey değil, ama yine de çok basit ve tam olarak beklendiği gibi çalışıyor.

Dikdörtgen şu işi yapar:

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

Geçmişte burada bulunan stili kullandım

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

Bunun LayoutTransformyerine dönüşümü ayarlamanız gerekir , RenderTransformböylece dönüşüm Render geçişi sırasında değil Düzen geçişi sırasında gerçekleşir. Düzen geçişi, WPF denetimleri düzenlemeye ve her bir denetimin ne kadar alan kapladığını anlamaya çalışırken oluşur; Oluşturma geçişi, WPF denetimleri oluşturmaya çalışırken düzen geçişinden sonra gerçekleşir.

BuradaLayoutTransform ve RenderTransform burada veya burada arasındaki fark hakkında daha fazla bilgi edinebilirsiniz.

"Hat" kontrolünü kullanmayı seviyorum. Ayırıcının nerede başlayıp nerede bittiği konusunda size tam kontrol sağlar. Tam olarak bir ayırıcı olmasa da, özellikle bir StackPanel'de aynı şekilde çalışır.

Hat kontrolü de bir ızgara içinde çalışır. StackPanel'i kullanmayı tercih ediyorum çünkü çakışan farklı kontroller konusunda endişelenmenize gerek yok.

<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 başlangıç ​​konumu (dikey bir çizgi için 0 olmalıdır)

X2 = x bitiş konumu (dikey bir çizgi için X1 = X2)

Y1 = y başlangıç ​​konumu (dikey bir çizgi için 0 olmalıdır)

Y2 = y bitiş konumu (Y2 = istenen satır yüksekliği)

Dikey çizginin herhangi bir tarafına dolgu eklemek için "kenar boşluğu" kullanıyorum. Bu örnekte, dikey çizginin solunda 5 piksel ve sağında 10 piksel vardır.

Çizgi kontrolü, çizginin başlangıç ​​ve bitişinin x ve y koordinatlarını seçmenize izin verdiğinden, bunu aradaki herhangi bir açıda yatay çizgiler ve çizgiler için de kullanabilirsiniz.

Bu, hiçbir işlevsellik ve tüm görsel efekt olmadan yapmanın çok basit bir yoludur.

Bir ızgara kullanın ve sadece özelleştirin.

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

Bunu yapmanın başka bir yolu.

Dikey ayırıcı

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

yatay ayırıcı

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

Gönderen http://social.msdn.microsoft.com/Forums/vstudio/en-US/12ead5d4-1d57-4dbb-ba81-bc13084ba370/how-can-i-add-a-line-as-a-visual-separator -içerik-denetimi-benzeri-ızgara? forum = wpf :

Bu örneği deneyin ve ihtiyaçlarınıza uygun olup olmadığına bakın, bunun üç ana yönü vardır.

1. Line.Stretch dolduracak şekilde ayarlandı.

2. Yatay çizgiler için, çizginin VerticalAlignment öğesi Alt, Dikey Çizgiler için ise HorizontalAlignment Sağ olarak ayarlanır.

3. Daha sonra satıra kaç satır veya sütunun yayılacağını söylememiz gerekir, bu, RowDefinitions veya ColumnDefintions count özelliğine bağlanarak yapılır.

   
   
   

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

kullanım

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

İşte böyle yaptım:

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