Ribbon is in the middle of page instead of the top?

[Dat Vo]

I am following the Getting Started guide here:http://help.syncfusion.com/wpf/ribbon/gettingstarted

However, my Ribbon lies on the middle of the page instead of top:

I think I missed something. You can notice the bottom right corner, there suppose to be a minimized button, but the chevron is missing. Backstage does not work too. Also if I press Alt keyboard, NullReferenceException is thrown and my program terminates.

Here is my XAML code:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:BlueCPA.PdfEditor"

xmlns:s="http://schemas.syncfusion.com/wpf"

xmlns:sskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"

sskin:SfSkinManager.VisualStyle="Office2013White"

mc:Ignorable="d"

Title="{DynamicResource ProgramName}" WindowStartupLocation="CenterScreen"

>

Here are the assemblies I referenced (all 4.5):

There is nothing in the code behind, except changing the base class from Window toRibbonWindow:

public partial class MainWindow : RibbonWindow

{

public MainWindow()

{

InitializeComponent();

}

}

Please tell me if I am missing something.

Best Regards,

Dat Vo.

[Dat Vo]

Sorry I messed the XAML code on the previous post. Here is the one (tinypaste alternative: http://pasted.co/46fcc804):

<s:RibbonWindow x:Class="BlueCPA.PdfEditor.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:BlueCPA.PdfEditor"

        xmlns:s="http://schemas.syncfusion.com/wpf"

        xmlns:sskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"

        sskin:SfSkinManager.VisualStyle="Office2013White"

        mc:Ignorable="d"

        Title="{DynamicResource ProgramName}" WindowStartupLocation="CenterScreen"

        >

    <Grid>

        <s:Ribbon Name="rbnMenu">

            <s:RibbonTab Caption="{DynamicResource TabView}" VerticalAlignment="Top">

                <s:RibbonBar Header="{DynamicResource TabViewGroupZoom}">

                    <s:RibbonButton Label="{DynamicResource TabViewButtonZoomIn}" Name="btnZoomIn" SizeForm="Large" />

                    <s:RibbonButton Label="{DynamicResource TabViewButtonZoomOut}" Name="btnZoomOut" SizeForm="Large" />

                </s:RibbonBar>

            </s:RibbonTab>

            <s:QuickAccessToolBar />

        </s:Ribbon>

    </Grid>

</s:RibbonWindow>

[Dat Vo]

Ok, the NullReferenceException was because my XAML was wrong with the QAT. I fixed it and it works well for the Backstage, but the location is still wrong (in the middle of the Window instead of top). I don't have the problem with Default style though, but has it with Office2013White and Office2016White. Here is my fixed XAML:

<s:RibbonWindow x:Class="BlueCPA.PdfEditor.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:BlueCPA.PdfEditor"

        xmlns:s="http://schemas.syncfusion.com/wpf"

        xmlns:sskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"

        sskin:SfSkinManager.VisualStyle="Office2013White"

        mc:Ignorable="d"

        Title="{DynamicResource ProgramName}" WindowStartupLocation="CenterScreen"

        >

    <Grid>

        <s:Ribbon Name="rbnMenu">

            <s:RibbonTab Caption="{DynamicResource TabView}" VerticalAlignment="Top">

                <s:RibbonBar Header="{DynamicResource TabViewGroupZoom}">

                    <s:RibbonButton Label="{DynamicResource TabViewButtonZoomIn}" Name="btnZoomIn" SizeForm="Large" />

                    <s:RibbonButton Label="{DynamicResource TabViewButtonZoomOut}" Name="btnZoomOut" SizeForm="Large" />

                </s:RibbonBar>

            </s:RibbonTab>

            <s:Ribbon.QuickAccessToolBar>

                <s:QuickAccessToolBar>

                    

                </s:QuickAccessToolBar>

            </s:Ribbon.QuickAccessToolBar>

            <s:Ribbon.BackStage>

                <s:Backstage>

                    <s:BackStageCommandButton Header="{DynamicResource BackStageButtonNew}" Name="btnNew" />

                    <s:BackStageCommandButton Header="{DynamicResource BackStageButtonOpen}" Name="btnOpen" />

                    <s:BackStageCommandButton Header="{DynamicResource BackStageButtonSave}" Name="btnSave" />

                </s:Backstage>

            </s:Ribbon.BackStage>

        </s:Ribbon>

    </Grid>

</s:RibbonWindow>

[Keerthana Jegannathan]

Hi Dat, 

 

Thank you for contacting Syncfusion support. 

 

We can align the Ribbon in the top of the window using the property named “VerticalAlignment” or else you can divide the Grid into two and place the Ribbon in first row. Please refer to the below code for further reference. 

 

<Grid> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="Auto"/> 

            <RowDefinition Height="*"/> 

        </Grid.RowDefinitions>  

       <syncfusion:Ribbon ...> 

 

        <Grid Grid.Row="2"> 

        </Grid> 

</Grid> 

 

 

 

We have prepared sample for your reference which can be downloaded from the below location. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/125139/WPFRIB~12015958253.ZIP 

 

Regards, 

Keerthana J 

[Dat Vo]

Thank you very much!

I myself is also using the Grid for positioning it on the top. I thought there was a problem, because with the default VisualStyle, I did not need to do anything else for the Ribbon to stay on the top. I suggest adding that layout information to the article at my link, because it does not say anything when switching to Office2013White Visual Style, to prevent further confusion like mine.

Best Regards,

Dat Vo.

[Keerthana Jegannathan]

  

Hi Dat, 

 

Thank you for your update. 

 

We will modify the alignment of Ribbon to Top in Office2013 visual style by default as in other theme. We will include this in our main release Volume 3, 2016 which will be rolled out by the end of September, 2016. 

 

Regards, 

Keerthana J