update

example/T_CheckBox.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"CheckBox"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+
+    FluCheckBox{
+        Layout.topMargin: 20
+        Layout.leftMargin: 10
+        Layout.bottomMargin: 20
+    }
+}

example/T_Home.qml

@@ -16,7 +16,8 @@ FluScrollablePage{
         ListElement{
             icon:"qrc:/res/image/ic_home_github.png"
             title:"FluentUI GitHub"
-            desc:"The latest Windows nativecontrols and styles for your applications."
+            desc:"The latest FluentUI controls and styles for your applications."
+            url:"https://github.com/zhuzichu520/FluentUI"
         }
 
     }
@@ -33,8 +34,8 @@ FluScrollablePage{
         Rectangle{
             anchors.fill: parent
             gradient: Gradient{
-                GradientStop { position: 0.8; color: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
+                GradientStop { position: 0.8; color: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
-                GradientStop { position: 1.0; color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
+                GradientStop { position: 1.0; color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
             }
         }
         FluText{
@@ -43,7 +44,7 @@ FluScrollablePage{
             anchors{
                 top: parent.top
                 left: parent.left
-                topMargin: 60
+                topMargin: 20
                 leftMargin: 20
             }
         }
@@ -56,7 +57,7 @@ FluScrollablePage{
             }
             orientation: ListView.Horizontal
             boundsBehavior: ListView.StopAtBounds
-            height: 200
+            height: 240
             model: model_header
             header: Item{height: 10;width: 10}
             footer: Item{height: 10;width: 10}
@@ -65,18 +66,64 @@ FluScrollablePage{
             }
             clip: false
             delegate:Item{
-                width: 180
+                width: 220
-                height: 200
+                height: 240
                 FluArea{
                     radius: 8
-                    width: 160
+                    width: 200
-                    height: 180
+                    height: 220
                     anchors.centerIn: parent
-                    color:{
+                    Rectangle{
-                        if(item_mouse.containsMouse){
+                        anchors.fill: parent
-                            return FluTheme.dark ? Qt.lighter(Qt.rgba(0,0,0,1),1.05)  : Qt.darker(Qt.rgba(1,1,1,1),1.05)
+                        radius: 8
+                        color:{
+                            if(FluTheme.dark){
+                                if(item_mouse.containsMouse){
+                                    return Qt.rgba(1,1,1,0.03)
+                                }
+                                return Qt.rgba(0,0,0,0)
+                            }else{
+                                if(item_mouse.containsMouse){
+                                    return Qt.rgba(0,0,0,0.03)
+                                }
+                                return Qt.rgba(0,0,0,0)
+                            }
+                        }
+                    }
+
+                    ColumnLayout{
+                        Image {
+                            Layout.topMargin: 20
+                            Layout.leftMargin: 20
+                            Layout.preferredWidth: 50
+                            Layout.preferredHeight: 50
+                            source: model.icon
+                        }
+                        FluText{
+                            text: model.title
+                            fontStyle: FluText.BodyLarge
+                            Layout.topMargin: 20
+                            Layout.leftMargin: 20
+                        }
+                        FluText{
+                            text: model.desc
+                            Layout.topMargin: 5
+                            Layout.preferredWidth: 160
+                            Layout.leftMargin: 20
+                            color: FluColors.Grey100
+                            font.pixelSize: 12
+                            wrapMode: Text.WrapAnywhere
+                        }
+                    }
+                    FluIcon{
+                        iconSource: FluentIcons.OpenInNewWindow
+                        iconSize: 15
+                        anchors{
+                            bottom: parent.bottom
+                            right: parent.right
+                            rightMargin: 10
+                            bottomMargin: 10
                         }
-                        return FluTheme.dark ? Qt.rgba(0,0,0,0.98)  : Qt.rgba(1,1,1,0.98)
                     }
                     MouseArea{
                         id:item_mouse
@@ -86,13 +133,163 @@ FluScrollablePage{
                             if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
                             else scrollbar_header.increase()
                         }
+                        onClicked: {
+                            Qt.openUrlExternally(model.url)
+                        }
                     }
                 }
             }
         }
-
-
     }
 
+    ListModel{
+        id:model_added
+        ListElement{
+            title:"TabView"
+            icon:"qrc:/res/image/control/TabView.png"
+            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+        }
+        ListElement{
+            title:"MediaPlayer"
+            icon:"qrc:/res/image/control/MediaPlayerElement.png"
+            desc:"A control to display video and image content"
+        }
+    }
+
+    ListModel{
+        id:model_update
+        ListElement{
+            title:"Buttons"
+            icon:"qrc:/res/image/control/Button.png"
+             desc:"A control that responds to user input and raisesa Click event."
+        }
+        ListElement{
+            title:"InfoBar"
+            icon:"qrc:/res/image/control/InfoBar.png"
+             desc:"An inline message to display app-wide statuschange information."
+        }
+        ListElement{
+            title:"Slider"
+            icon:"qrc:/res/image/control/Slider.png"
+             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
+        }
+        ListElement{
+            title:"CheckBox"
+            icon:"qrc:/res/image/control/Checkbox.png"
+             desc:"A control that a user can select or clear."
+        }
+    }
+
+    Component{
+        id:com_item
+        Item{
+            width: 320
+            height: 120
+            FluArea{
+                radius: 8
+                width: 300
+                height: 100
+                anchors.centerIn: parent
+                Rectangle{
+                    anchors.fill: parent
+                    radius: 8
+                    color:{
+                        if(FluTheme.dark){
+                            if(item_mouse.containsMouse){
+                                return Qt.rgba(1,1,1,0.03)
+                            }
+                            return Qt.rgba(0,0,0,0)
+                        }else{
+                            if(item_mouse.containsMouse){
+                                return Qt.rgba(0,0,0,0.03)
+                            }
+                            return Qt.rgba(0,0,0,0)
+                        }
+                    }
+                }
+                Image{
+                    id:item_icon
+                    height: 40
+                    width: 40
+                    source: model.icon
+                    anchors{
+                        left: parent.left
+                        leftMargin: 20
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                FluText{
+                    id:item_title
+                    text:model.title
+                    fontStyle: FluText.Subtitle
+                    anchors{
+                        left: item_icon.right
+                        leftMargin: 20
+                        top: item_icon.top
+                    }
+                }
+
+                FluText{
+                    id:item_desc
+                    text:model.desc
+                    color:FluColors.Grey100
+                    wrapMode: Text.WrapAnywhere
+                    elide: Text.ElideRight
+                    maximumLineCount: 2
+                    anchors{
+                        left: item_title.left
+                        right: parent.right
+                        rightMargin: 20
+                        top: item_title.bottom
+                        topMargin: 5
+                    }
+                }
+
+                MouseArea{
+                    id:item_mouse
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onClicked: {
+                        rootwindow.startPageByTitle(model.title)
+                    }
+                }
+            }
+        }
+    }
+
+    FluText{
+        text: "Recently added samples"
+        fontStyle: FluText.TitleLarge
+        Layout.topMargin: 20
+        Layout.leftMargin: 20
+    }
+
+    GridView{
+        Layout.fillWidth: true
+        implicitHeight: contentHeight
+        cellHeight: 120
+        cellWidth: 320
+        boundsBehavior: GridView.StopAtBounds
+        model:model_added
+        delegate: com_item
+    }
+
+    FluText{
+        text: "Recently updated samples"
+        fontStyle: FluText.TitleLarge
+        Layout.topMargin: 20
+        Layout.leftMargin: 20
+    }
+
+    GridView{
+        Layout.fillWidth: true
+        implicitHeight: contentHeight
+        cellHeight: 120
+        cellWidth: 320
+        boundsBehavior: GridView.StopAtBounds
+        model: model_update
+        delegate: com_item
+    }
 
 }

example/T_Slider.qml

@@ -2,7 +2,6 @@
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
 FluScrollablePage{

example/page/MainPage.qml

@@ -49,6 +49,13 @@ FluWindow {
             }
         }
 
+        FluPaneItem{
+            title:"CheckBox"
+            onTap:{
+                nav_view.push("qrc:/T_CheckBox.qml")
+            }
+        }
+
         FluPaneItem{
             title:"ToggleSwitch"
             onTap:{
@@ -259,5 +266,9 @@ FluWindow {
         }
     }
 
+    function startPageByTitle(title){
+        console.debug(title)
+        nav_view.startPageByTitle(title)
+    }
 
 }

example/qml.qrc

@@ -50,5 +50,104 @@
         <file>T_Home.qml</file>
         <file>res/image/bg_home_header.png</file>
         <file>res/image/ic_home_github.png</file>
+        <file>res/image/control/Acrylic.png</file>
+        <file>res/image/control/AnimatedIcon.png</file>
+        <file>res/image/control/AnimatedVisualPlayer.png</file>
+        <file>res/image/control/AnimationInterop.png</file>
+        <file>res/image/control/AppBarButton.png</file>
+        <file>res/image/control/AppBarSeparator.png</file>
+        <file>res/image/control/AppBarToggleButton.png</file>
+        <file>res/image/control/AutomationProperties.png</file>
+        <file>res/image/control/AutoSuggestBox.png</file>
+        <file>res/image/control/Border.png</file>
+        <file>res/image/control/BreadcrumbBar.png</file>
+        <file>res/image/control/Button.png</file>
+        <file>res/image/control/CalendarDatePicker.png</file>
+        <file>res/image/control/CalendarView.png</file>
+        <file>res/image/control/Canvas.png</file>
+        <file>res/image/control/Checkbox.png</file>
+        <file>res/image/control/Clipboard.png</file>
+        <file>res/image/control/ColorPaletteResources.png</file>
+        <file>res/image/control/ColorPicker.png</file>
+        <file>res/image/control/ComboBox.png</file>
+        <file>res/image/control/CommandBar.png</file>
+        <file>res/image/control/CommandBarFlyout.png</file>
+        <file>res/image/control/CompactSizing.png</file>
+        <file>res/image/control/ConnectedAnimation.png</file>
+        <file>res/image/control/ContentDialog.png</file>
+        <file>res/image/control/CreateMultipleWindows.png</file>
+        <file>res/image/control/DataGrid.png</file>
+        <file>res/image/control/DatePicker.png</file>
+        <file>res/image/control/DropDownButton.png</file>
+        <file>res/image/control/EasingFunction.png</file>
+        <file>res/image/control/Expander.png</file>
+        <file>res/image/control/FilePicker.png</file>
+        <file>res/image/control/FlipView.png</file>
+        <file>res/image/control/Flyout.png</file>
+        <file>res/image/control/Grid.png</file>
+        <file>res/image/control/GridView.png</file>
+        <file>res/image/control/HyperlinkButton.png</file>
+        <file>res/image/control/IconElement.png</file>
+        <file>res/image/control/Image.png</file>
+        <file>res/image/control/ImplicitTransition.png</file>
+        <file>res/image/control/InfoBadge.png</file>
+        <file>res/image/control/InfoBar.png</file>
+        <file>res/image/control/InkCanvas.png</file>
+        <file>res/image/control/InkToolbar.png</file>
+        <file>res/image/control/InputValidation.png</file>
+        <file>res/image/control/ItemsRepeater.png</file>
+        <file>res/image/control/Line.png</file>
+        <file>res/image/control/ListBox.png</file>
+        <file>res/image/control/ListView.png</file>
+        <file>res/image/control/MediaPlayerElement.png</file>
+        <file>res/image/control/MenuBar.png</file>
+        <file>res/image/control/MenuFlyout.png</file>
+        <file>res/image/control/NavigationView.png</file>
+        <file>res/image/control/NumberBox.png</file>
+        <file>res/image/control/PageTransition.png</file>
+        <file>res/image/control/ParallaxView.png</file>
+        <file>res/image/control/PasswordBox.png</file>
+        <file>res/image/control/PersonPicture.png</file>
+        <file>res/image/control/PipsPager.png</file>
+        <file>res/image/control/Pivot.png</file>
+        <file>res/image/control/ProgressBar.png</file>
+        <file>res/image/control/ProgressRing.png</file>
+        <file>res/image/control/PullToRefresh.png</file>
+        <file>res/image/control/RadialGradientBrush.png</file>
+        <file>res/image/control/RadioButton.png</file>
+        <file>res/image/control/RadioButtons.png</file>
+        <file>res/image/control/RatingControl.png</file>
+        <file>res/image/control/RelativePanel.png</file>
+        <file>res/image/control/RepeatButton.png</file>
+        <file>res/image/control/RevealFocus.png</file>
+        <file>res/image/control/RichEditBox.png</file>
+        <file>res/image/control/RichTextBlock.png</file>
+        <file>res/image/control/ScrollViewer.png</file>
+        <file>res/image/control/SemanticZoom.png</file>
+        <file>res/image/control/Shape.png</file>
+        <file>res/image/control/Slider.png</file>
+        <file>res/image/control/Sound.png</file>
+        <file>res/image/control/SplitButton.png</file>
+        <file>res/image/control/SplitView.png</file>
+        <file>res/image/control/StackPanel.png</file>
+        <file>res/image/control/StandardUICommand.png</file>
+        <file>res/image/control/SwipeControl.png</file>
+        <file>res/image/control/TabView.png</file>
+        <file>res/image/control/TeachingTip.png</file>
+        <file>res/image/control/TextBlock.png</file>
+        <file>res/image/control/TextBox.png</file>
+        <file>res/image/control/ThemeTransition.png</file>
+        <file>res/image/control/TimePicker.png</file>
+        <file>res/image/control/TitleBar.png</file>
+        <file>res/image/control/ToggleButton.png</file>
+        <file>res/image/control/ToggleSplitButton.png</file>
+        <file>res/image/control/ToggleSwitch.png</file>
+        <file>res/image/control/ToolTip.png</file>
+        <file>res/image/control/TreeView.png</file>
+        <file>res/image/control/VariableSizedWrapGrid.png</file>
+        <file>res/image/control/Viewbox.png</file>
+        <file>res/image/control/WebView.png</file>
+        <file>res/image/control/XamlUICommand.png</file>
+        <file>T_CheckBox.qml</file>
     </qresource>
 </RCC>