How to keep NavigationDrawer contents from shifting left/right

[Walter]

I am using NavigationDrawer (20.2.0.38) as follows:

<syncfusion:SfNavigationDrawer Visibility="{Binding IsProjectOpen, Converter={StaticResource BooleanToVisibilityConverter}}"
 sfSkinManager:SfSkinManager.VisualStyle="Office2019White"
 DisplayMode="Expanded"
 ExpandedModeWidth="120">
<syncfusion:NavigationItem Header="Data Sets"
 IsExpanded="True"
 IsSelected="True"
 Command="{Binding NavigateCommand}"
 CommandParameter="DataSets">
<syncfusion:NavigationItem.Icon>
<Image Source="{StaticResource DatabaseIcon}" />
</syncfusion:NavigationItem.Icon>
</syncfusion:NavigationItem>
<syncfusion:NavigationItem Header="Models"
 IsExpanded="True"
 Command="{Binding NavigateCommand}"
 CommandParameter="Models">
<syncfusion:NavigationItem.Icon>
<Image Source="{StaticResource ModelsIcon}" />
</syncfusion:NavigationItem.Icon>
</syncfusion:NavigationItem>
<syncfusion:NavigationItem Header="Workflows"
 IsExpanded="True"
 Command="{Binding NavigateCommand}"
 CommandParameter="Workflows">
<syncfusion:NavigationItem.Icon>
<Image Source="{StaticResource WorkflowIcon}" />
</syncfusion:NavigationItem.Icon>
</syncfusion:NavigationItem>
<syncfusion:SfNavigationDrawer.ContentView>
<ContentControl x:Name="_projectContentControl"
prism:RegionManager.RegionName="{x:Static illumExtensions:RegionNames.ProjectContentRegionName}" />
</syncfusion:SfNavigationDrawer.ContentView>
</syncfusion:SfNavigationDrawer>

When I click any of the navigation buttons the content view shifts right and left, like it's animating the drawer or something. It's fairly jarring. It does not do this when the drawer is compacted.

Can I disable this?

[Shivani Ramakrishnan]

Hi Walter,

Query: How to stop the NavigationDrawer contents from shifting left to right

In the provided code snippet you have used the DisplayMode as Expanded. The behaviour of Expanded mode is to shift the content view from left to right. If you want to disable the content shifting please use the Display mode has Compact. The behaviour of compact mode will not shift the content view. Below is the code snippet:

<syncfusion:SfNavigationDrawer 
     DisplayMode="Compact"
     ExpandedModeWidth="120">

        <syncfusion:NavigationItem Header="Data Sets"
              IsExpanded="True"
              IsSelected="True">
        </syncfusion:NavigationItem>
        <syncfusion:NavigationItem Header="Models"

              IsExpanded="True">
        </syncfusion:NavigationItem>
        <syncfusion:NavigationItem Header="Workflows"
               IsExpanded="True">
        </syncfusion:NavigationItem>
        <syncfusion:SfNavigationDrawer.ContentView>
            <Label Content="Label" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </syncfusion:SfNavigationDrawer.ContentView>
    </syncfusion:SfNavigationDrawer>

We have prepared a new sample for your reference and please get it from the attachments. If your requirement is different, please explain to us briefly and share the replication steps with the sample. It will help us to provide the proper solution at the easiest.  Please let us know if you need any other details.

Regards,

Shivani

Attachment: NavDrawerContent_dfb6446d.zip