10

How can I add Vertical separator to WPF Ribbon, to RibbonGroup? I have tried something like that, but i got horizontal separator istead of vertical.

<r:RibbonGroup>
<r:RibbonButton Command="{StaticResource SomeButton}" />     
 <r:RibbonSeparator></r:RibbonSeparator> 
 <r:RibbonToggleButton IsChecked="False" Command="{StaticResource AnotherButton}"/></r:RibbonToggleButton>
 </r:RibbonGroup>

So how can I make vertical separator?

2
  • What Ribbon Control are you using? And which .NET/WPF version?
    – ℍ ℍ
    Jun 7, 2010 at 13:28
  • I use Ribbon from RibbonControlsLibrary (Microsoft.Windows.Controls.Ribbon) and 3.5 .NET Framework
    – Marta
    Jun 7, 2010 at 14:32

6 Answers 6

9

This is how I would do it.

<ribbon:RibbonGroup.Resources>
    <!-- Vertical Separator-->
    <Style TargetType="{x:Type ribbon:RibbonSeparator}"
           x:Key="KeyRibbonSeparatorVertical">
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <RotateTransform Angle="90"/>
            </Setter.Value>
        </Setter>
    </Style>
</ribbon:RibbonGroup.Resources>
1
  • This solution works in new Ribbon version. Solution with RibbonLabel is not working now cause there is no RibbonLabel in new wpf Ribbon.
    – Marta
    Sep 6, 2011 at 9:59
5

It looks like this doesn't work in the latest version (3.5.40729.1) anymore. The RibbonSeparator also doesn;t work, but you can use:

<Ribbon:RibbonControlGroup Height="55" Margin="5" Width="1" MinHeight="55" MaxWidth="1"/>
3

You can wrap what you have in a RibbonGroup, a vertical separator is created to the right of the group.

Vertical Ribbon Separator using RibbonGroup as wrapper

All I did was wrapped the first button in a RibbonGroup.

<ribbon:RibbonTab x:Name="HomeTab" 
                  Header="Home">
    <ribbon:RibbonGroup x:Name="Group1" 
                        Header="Group1">
        <ribbon:RibbonGroup>
            <ribbon:RibbonButton x:Name="Button1"
                             LargeImageSource="Images\LargeIcon.png"
                             Label="Button1" Margin="-5" />
        </ribbon:RibbonGroup>

        <ribbon:RibbonButton x:Name="Button2"
                             SmallImageSource="Images\SmallIcon.png"
                             Label="Button2" />
        <ribbon:RibbonButton x:Name="Button3"
                             SmallImageSource="Images\SmallIcon.png"
                             Label="Button3" />
        <ribbon:RibbonButton x:Name="Button4"
                             SmallImageSource="Images\SmallIcon.png"
                             Label="Button4" />
    </ribbon:RibbonGroup>

</ribbon:RibbonTab>
2

You can use a RibbonLabel, which can host any control in a RibbonGroup. It comes in very handy!

For a vertical line separator, you can try this:

<ribbon:RibbonLabel>
    <Rectangle Height="56" Margin="2,0" Stroke="Silver"/>
</ribbon:RibbonLabel>

(Of course, you can style it as you see fit for the app..)

0
1

Works with me-

                <my:RibbonSeparator Margin="5,0" Width="70" BorderBrush="Navy" BorderThickness="2">
                    <my:RibbonSeparator.RenderTransform>
                        <RotateTransform Angle="90" />
                    </my:RibbonSeparator.RenderTransform>
                </my:RibbonSeparator>
0

This worked for me:

<Border Width="1" Margin="3" Height="175" Visibility="Visible" Background="#FFB9C9DA" />
1
  • or if you want to avoid hardcoded color use binding for Background="{Binding Path=BorderBrush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type my:Ribbon}}}"
    – akovar
    Feb 20, 2015 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.