Як додати вертикальний роздільник?

Я хочу додати до сітки вертикальний сепаратор, але я можу знайти лише горизонталь. Чи немає властивості, куди можна ввести, якщо лінія роздільника повинна бути горизонтальною чи вертикальною?

Я багато шукав, але не знайшов короткого і простого рішення для цього.

Я використовую .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значення StackPanelна Vertical.

Це не зовсім те, про що запитував автор, але все-таки це дуже просто і працює точно так, як очікувалося.

Прямокутник виконує роботу:

<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щоб перетворення відбулося під час проходу макета, а не під час проходу Рендерінг. Пропуск макета відбувається, коли WPF намагається розмістити елементи керування та визначити, скільки місця займає кожен елемент управління, тоді як пропуск рендерінгу відбувається після проходу макета, коли 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 = бажана висота рядка)

Я використовую "margin", щоб додати набивання з будь-якої сторони вертикальної лінії. У цьому випадку є 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 лінії встановлено Bottom, а для VerticalLines HorizontalAlignment встановлено праворуч.

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>