Question

I am creating Ribbon Control for my application and for which I have already written most of code . The only problem I am facing is that the Ribbon Buttons I am adding to the Tabs are not aligning properly in the Tab . As you can see in the Screen Shot the button is aligning to bottom of the Tab. How can I bring these button to top so they are visible.

This is How my app looks like

The XAML Code is below

<UserControl x:Class="SongPurifier.UserControls.RibbonControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:ribbon="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
        >
<Grid>
    <ribbon:Ribbon x:Name="ribbon" VerticalAlignment="Top">
        <ribbon:RibbonTab Header="Home">
            <ribbon:RibbonSplitButton  
                Label="Open" 
                LargeImageSource="/Images/Folder Open.png"
                Command="{Binding OpenFolderCommand}">
            </ribbon:RibbonSplitButton>
        </ribbon:RibbonTab>

        <ribbon:RibbonTab Header="Edit" >
            <ribbon:RibbonButton Label="Replace String" 
                                 LargeImageSource="/Images/Find Replace.png"
                                 Command="{Binding EditSongInfoCommand}"
                                 >
            </ribbon:RibbonButton >

            <ribbon:RibbonButton Label="Update Song Info"
                                 LargeImageSource="/Images/Update.png"
                                 Command="{Binding UpdateSongInfoCommand}"
                                 >
            </ribbon:RibbonButton>
        </ribbon:RibbonTab>
        <ribbon:RibbonTab Header="Update" >
            <ribbon:RibbonButton 
                Label="Check for Update" >

            </ribbon:RibbonButton>
        </ribbon:RibbonTab>
    </ribbon:Ribbon>
</Grid>

Answer 1

Sachin:
Place your Ribbon Buttons inside a RibbonGroup.

<my:RibbonTab Header="Home">
    <my:RibbonGroup Header="File">
        <ribbon:RibbonSplitButton  
            Label="Open" 
            LargeImageSource="/Images/Folder Open.png"
            Command="{Binding OpenFolderCommand}">
        </ribbon:RibbonSplitButton>
    </my:RibbonGroup>
</my:RibbonTab>