CODEWITHSUNDEEP
c#.netwpfribbonseparator
Marta
Marta

Reputation: 2947

Vertical separator in WPF Ribbon

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?

Upvotes: 10

Views: 11134

Answers (6)

Ravi
Ravi

Reputation: 307

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>

Upvotes: 1

akovar
akovar

Reputation: 123

This worked for me:

<Border Width="1" Margin="3" Height="175" Visibility="Visible" Background="#FFB9C9DA" />

Upvotes: 0

E-rich
E-rich

Reputation: 9521

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>

Upvotes: 3

Christo
Christo

Reputation: 1892

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

Upvotes: 5

Michael T
Michael T

Reputation: 1365

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>

Upvotes: 9

Kieren Johnstone
Kieren Johnstone

Reputation: 42003

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

Upvotes: 2

Related Questions