Как добавить вертикальный разделитель?


114

Я хочу добавить вертикальный разделитель к сетке, но могу найти только горизонтальный. Нет ли свойства, куда вы можете указать, должна ли линия разделителя быть горизонтальной или вертикальной?

Я много искал, но не нашел простого и легкого решения этой проблемы.

Я использую .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>

3
нельзя просто использовать стили Rectangle?
Павел

1
это работает, но я не хочу. для этого должен использоваться разделитель. должен быть способ ^^
Мартин Вебер

Думаю, сейчас я действительно использую прямоугольник, даже если он мне не нравится,
Мартин Вебер,

1
Borderтоже может быть решением ..
Mangesh

Ответы:


193

Это должно делать именно то, что хотел автор:

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

если вам нужен горизонтальный разделитель, измените Orientationзначение StackPanelна Vertical.


4
В моем случае для разделителя требовался только стиль, а не включающий его StackPanel.
Xtr

Я всегда реализовывал RenderTransform. Аккуратный ярлык, чтобы запомнить :)
Эшли Гренон

3
Должен быть ответ, это лучший. Не уверен, почему отображается третий ответ!
Татранскиймедвед

Прекрасно работает как по горизонтали, так и по вертикали Menuмежду MenuItems. Всегда красиво растягивается, чтобы соответствовать высоте / ширине меню.
natiiix

50

Это не совсем то, о чем просил автор, но все же это очень просто и работает именно так, как ожидалось.

Rectangle выполняет свою работу:

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

2
Это отлично работает в UWP. Если вам нужна более тонкая линия, используйте заливку вместо цвета обводки и установите ширину 3: <Rectangle HorizontalAlignment="Stretch" Height="3" Margin="-1,6" Stroke="Black" Fill="White" />
Энтони Николс

25

В прошлом я использовал стиль, найденный здесь

<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 здесь или здесь


Звучит здорово. Однако это не сильно меняет. Я все еще не могу закрепить элементы управления в графическом дизайнере vs2012. Может баг в vs2012?
Мартин Вебер

@MartinWeber Я не совсем понимаю, что вы подразумеваете под «стыковкой» элемента управления в VS. На какой панели размещен ваш разделитель? Если это DockPanel, вы должны иметь возможность установить DockPanel.Dockна свою Separatorсторону, к которой вы хотите, чтобы он пристыковался. В WPF панель, на которой размещается элемент управления, обычно определяет его положение, а иногда и размер по умолчанию. Если вы новичок в макетах WPF, я бы порекомендовал прочитать эту статью: Макеты WPF - Быстрый визуальный старт
Рэйчел,

Спасибо за ссылку! Я прочту это. Да, я новичок в WPF. Под «стыковкой» я имел в виду, что когда я перетаскиваю элемент управления рядом с другим, я получаю красную линию, так что все элементы управления в одной строке фактически находятся в одной строке. просто помощник от vs2012. когда я вращаю разделитель, я больше не получаю эти строки.
Мартин Вебер

1
@MartinWeber Извините, я не могу вам больше помочь - я использую VS2010 и обычно вообще не использую конструктор перетаскивания, так как я часто нахожу его ненужным и не люблю поддерживать беспорядок XMAL, который, я думаю, он создает :) Вы вероятно, будет больше удачи в создании нового вопроса специально для вашей проблемы с дизайнером Visual Studio, поскольку этот вопрос здесь, кажется, больше сосредоточен на том, как сделать вертикальный разделитель
Рэйчел

Спасибо за советы. Я попробую XAML без конструктора и прочитаю несколько руководств. Может быть, если я получу лучшее понимание вещей, я сам решу проблему;)
Мартин Вебер

11

Мне нравится использовать элемент управления «Линия». Это дает вам точный контроль над тем, где начинается и где заканчивается разделитель. Хотя это не совсем разделитель, он работает точно так же, особенно в 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 начала и конца линии, вы также можете использовать его для горизонтальных линий и линий под любым углом между ними.


2

Это очень простой способ сделать это без каких-либо функций и визуальных эффектов,

Используйте сетку и просто настройте ее.

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

Просто еще один способ сделать это.


2
Превосходно!!!! Решил это так, но с той же идеей: <Grid HorizontalAlignment="Stretch" Height="1" Margin="0,10" Background="Black"/>
Энтони Николс

2

Вертикальный разделитель

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

горизонтальный разделитель

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

0

Из 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 установлен на Right.

  3. Затем нам нужно указать строке, сколько строк или столбцов нужно охватить, это делается путем привязки к свойству RowDefinitions или ColumnDefintions count.



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


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>

использовать

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.