diff --git a/example/qml/component/CustomWindow.qml b/example/qml/component/CustomWindow.qml
index 614aa53..884dde2 100644
--- a/example/qml/component/CustomWindow.qml
+++ b/example/qml/component/CustomWindow.qml
@@ -39,15 +39,15 @@ FluWindow {
         id:framless_helper
         onReady: {
             setTitleBarItem(title_bar)
-            framless_helper.moveWindowToDesktopCenter()
+            moveWindowToDesktopCenter()
             setHitTestVisible(title_bar.minimizeButton())
             setHitTestVisible(title_bar.maximizeButton())
             setHitTestVisible(title_bar.closeButton())
-            framless_helper.setWindowFixedSize(fixSize)
+            setWindowFixedSize(fixSize)
             title_bar.maximizeButton.visible = !fixSize
             if (blurBehindWindowEnabled)
                 window.backgroundVisible = false
-            window.visible = true
+            window.show()
         }
     }
     Connections{
diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml
index a34553e..31e349e 100644
--- a/src/imports/FluentUI/Controls/FluNavigationView.qml
+++ b/src/imports/FluentUI/Controls/FluNavigationView.qml
@@ -29,18 +29,7 @@ Item {
     QtObject{
         id:d
         property var stackItems: []
-        property int displayMode: {
-            if(control.displayMode !==FluNavigationView.Auto){
-                return control.displayMode
-            }
-            if(control.width<=700){
-                return FluNavigationView.Minimal
-            }else if(control.width<=900){
-                return FluNavigationView.Compact
-            }else{
-                return FluNavigationView.Open
-            }
-        }
+        property int displayMode: FluNavigationView.Open
         property bool enableNavigationPanel: false
         property bool isCompact: d.displayMode === FluNavigationView.Compact
         property bool isMinimal: d.displayMode === FluNavigationView.Minimal
@@ -50,14 +39,6 @@ Item {
         onIsCompactAndNotPanelChanged: {
             collapseAll()
         }
-        onDisplayModeChanged: {
-            if(d.displayMode === FluNavigationView.Compact){
-                collapseAll()
-            }
-            if(d.displayMode === FluNavigationView.Minimal){
-                d.enableNavigationPanel = false
-            }
-        }
         function handleItems(){
             var idx = 0
             var data = []
@@ -93,6 +74,31 @@ Item {
             return data
         }
     }
+    Component.onCompleted: {
+        d.displayMode = Qt.binding(function(){
+            if(control.displayMode !==FluNavigationView.Auto){
+                return control.displayMode
+            }
+            if(control.width<=700){
+                return FluNavigationView.Minimal
+            }else if(control.width<=900){
+                return FluNavigationView.Compact
+            }else{
+                return FluNavigationView.Open
+            }
+        })
+    }
+    Connections{
+        target: d
+        function onDisplayModeChanged(){
+            if(d.displayMode === FluNavigationView.Compact){
+                collapseAll()
+            }
+            if(d.displayMode === FluNavigationView.Minimal){
+                d.enableNavigationPanel = false
+            }
+        }
+    }
     Component{
         id:com_panel_item_empty
         Item{
@@ -614,7 +620,15 @@ Item {
             }
             return "transparent"
         }
+        clip: true
         x: visible ? 0 : -width
+        Behavior on width {
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: [ 0, 0, 0, 1 ]
+            }
+        }
         Behavior on x {
             NumberAnimation{
                 duration: 167