We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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.

5 Replies

DV Dat Vo July 25, 2016 07:34 AM UTC

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>



DV Dat Vo July 25, 2016 05:33 PM UTC

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>



KJ Keerthana Jegannathan Syncfusion Team July 26, 2016 12:01 PM UTC

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. 
 
 
Regards, 
Keerthana J 



DV Dat Vo July 26, 2016 02:39 PM UTC

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.


KJ Keerthana Jegannathan Syncfusion Team July 27, 2016 05:57 AM UTC

  
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 


Loader.
Up arrow icon