MainPage.xaml

<Page
    x:Class="MileXamlControlsDemo.MainPage"
    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:local="using:MileXamlControlsDemo"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <!--
        Set ExpandedModeThresholdWidth very large because there are bugs in
        wuxc:NavView Expanded Mode, espically when PaneDisplayMode is Auto.
    -->
    <NavigationView
        x:Name="NavView"
        AlwaysShowHeader="True"
        ExpandedModeThresholdWidth="9999999"
        Header="Simple Page"
        IsBackButtonVisible="Visible"
        IsBackEnabled="True"
        IsSettingsVisible="True"
        OpenPaneLength="200"
        PaneDisplayMode="Auto"
        PaneTitle="Pane Title"
        SelectedItem="{Binding ElementName=NavView, Path=MenuItems[0], Mode=OneTime}">

        <NavigationView.Resources>
            <ResourceDictionary>
                <Thickness x:Key="NavigationViewHeaderMargin">12,4,0,0</Thickness>
                <Thickness x:Key="NavigationViewMinimalHeaderMargin">12,44,0,0</Thickness>
                <!--
          Custom titlebar need this.
          <Thickness x:Key="NavigationViewContentMargin">0,32,0,0</Thickness>
                -->
                <SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="Transparent" />
                <AcrylicBrush
                    x:Key="NavigationViewExpandedPaneBackground"
                    BackgroundSource="Backdrop"
                    TintColor="{ThemeResource SystemChromeMediumLowColor}"
                    TintOpacity="0.8" />
                <Visibility x:Key="MenuItemsHostTopSeparatorVisibility">Visible</Visibility>
                <Visibility x:Key="MenuItemsHostBottomSeparatorVisibility">Visible</Visibility>
            </ResourceDictionary>
        </NavigationView.Resources>

        <NavigationView.AutoSuggestBox>
            <AutoSuggestBox AutomationProperties.Name="Search" QueryIcon="Find" />
        </NavigationView.AutoSuggestBox>

        <NavigationView.PaneCustomContent>
            <NavigationViewItem Content="Pane Custom Item" Icon="Highlight" />
        </NavigationView.PaneCustomContent>

        <NavigationView.MenuItems>
            <NavigationViewItemHeader Content="Page Group 1" />
            <NavigationViewItem Content="Menu Item 1" Icon="Play" />
            <NavigationViewItem Content="Menu Item 2" Icon="Save" />
            <NavigationViewItemSeparator Margin="12,0" />
            <NavigationViewItemHeader Content="Page Group 2" />
            <NavigationViewItem Content="Menu Item 3" Icon="Emoji2" />
            <NavigationViewItem Content="Menu Item 4" Icon="Memo" />
            <NavigationViewItem Content="Menu Item 5" Icon="Emoji" />
        </NavigationView.MenuItems>

        <NavigationView.PaneFooter>
            <NavigationViewItem Content="Pane Footer Item" Icon="Contact" />
        </NavigationView.PaneFooter>

        <NavigationView.Content>
            <Pivot Title="Win11's Style for UWP &amp; XAML Islands without installing WinUI">
                <PivotItem Header="Controls Page 1">
                    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
                        <StackPanel
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Orientation="Vertical">
                            <StackPanel
                                Padding="50,25"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="20">
                                <Button Content="Button" />
                                <Button Content="Accent Button" Style="{StaticResource AccentButtonStyle}" />
                                <ToggleButton Content="3-State ToogleButton" IsThreeState="True" />
                                <RepeatButton Content="RepeatButton" />
                                <SplitButton Content="SplitButton">
                                    <SplitButton.Flyout>
                                        <MenuFlyout>
                                            <MenuFlyoutItem Text="Menu1" />
                                            <MenuFlyoutItem Text="Menu2" />
                                        </MenuFlyout>
                                    </SplitButton.Flyout>
                                </SplitButton>
                                <ToggleSplitButton Content="ToggleSplitButton">
                                    <ToggleSplitButton.Flyout>
                                        <MenuBarItemFlyout>
                                            <MenuFlyoutItem Text="Menu1" />
                                            <MenuFlyoutItem Text="Menu2" />
                                        </MenuBarItemFlyout>
                                    </ToggleSplitButton.Flyout>
                                </ToggleSplitButton>
                                <DropDownButton Content="DropDownButton">
                                    <DropDownButton.Flyout>
                                        <MenuBarItemFlyout>
                                            <MenuFlyoutItem Text="Menu1" />
                                            <MenuFlyoutItem Text="Menu2" />
                                        </MenuBarItemFlyout>
                                    </DropDownButton.Flyout>
                                </DropDownButton>
                            </StackPanel>
                            <StackPanel
                                Padding="50,25"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Orientation="Horizontal">
                                <HyperlinkButton Content="HyperLinkButton" />
                                <AppBarButton
                                    Width="90"
                                    Icon="Setting"
                                    Label="AppBarButton outside of CommandBar" />
                                <AppBarToggleButton
                                    Width="125"
                                    Icon="Like"
                                    Label="AppBarToggleButton outside of CommandBar" />
                                <CommandBar
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    DefaultLabelPosition="Right"
                                    IsOpen="False">
                                    <CommandBar.Content>
                                        <StackPanel Orientation="Horizontal">
                                            <SplitButton Content="AppBarSplitButton" Style="{StaticResource SplitButtonCommandBarStyle}">
                                                <SplitButton.Flyout>
                                                    <MenuFlyout>
                                                        <MenuFlyoutItem Text="Menu1" />
                                                        <MenuFlyoutItem Text="Menu2" />
                                                    </MenuFlyout>
                                                </SplitButton.Flyout>
                                            </SplitButton>
                                            <ToggleSplitButton Content="AppBarToggleSplitButton" Style="{StaticResource SplitButtonCommandBarStyle}">
                                                <ToggleSplitButton.Flyout>
                                                    <MenuBarItemFlyout>
                                                        <MenuFlyoutItem Text="Menu1" />
                                                        <MenuFlyoutItem Text="Menu2" />
                                                    </MenuBarItemFlyout>
                                                </ToggleSplitButton.Flyout>
                                            </ToggleSplitButton>
                                        </StackPanel>
                                    </CommandBar.Content>
                                    <CommandBar.PrimaryCommands>
                                        <AppBarSeparator />
                                        <AppBarButton Icon="Setting" Label="AppBarButton" />
                                        <AppBarToggleButton Icon="Like" Label="AppBarToggleButton" />
                                    </CommandBar.PrimaryCommands>
                                    <CommandBar.SecondaryCommands>
                                        <AppBarButton
                                            Icon="Setting"
                                            KeyboardAcceleratorTextOverride="Ctrl+I"
                                            Label="Settings">
                                            <AppBarButton.KeyboardAccelerators>
                                                <KeyboardAccelerator Key="I" Modifiers="Control" />
                                            </AppBarButton.KeyboardAccelerators>
                                        </AppBarButton>
                                    </CommandBar.SecondaryCommands>
                                </CommandBar>
                            </StackPanel>
                            <StackPanel
                                Padding="50,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="20">
                                <TextBlock
                                    VerticalAlignment="Center"
                                    FontSize="24"
                                    FontStyle="Italic"
                                    Foreground="#5178BE"
                                    Style="{StaticResource HeaderTextBlockStyle}"
                                    Text="TextBlock" />
                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <Hyperlink>HyperLinkText</Hyperlink>
                                </TextBlock>
                                <TextBox
                                    Width="180"
                                    Height="32"
                                    Text="TextBox" />
                                <PasswordBox Width="180" Height="32" />
                                <AutoSuggestBox
                                    Width="180"
                                    Height="32"
                                    QueryIcon="Find"
                                    Text="AutoSuggestBox">
                                    <AutoSuggestBox.Items>
                                        <x:String>Value1</x:String>
                                        <x:String>Value2</x:String>
                                        <x:String>Value3</x:String>
                                        <x:String>Value4</x:String>
                                    </AutoSuggestBox.Items>
                                </AutoSuggestBox>
                                <RichEditBox Width="180" Height="100" />
                            </StackPanel>
                            <StackPanel
                                Padding="50,25"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="20">
                                <TextBlock VerticalAlignment="Center" Text="Slider" />
                                <Slider
                                    x:Name="slider"
                                    Width="150"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Maximum="100"
                                    Minimum="0"
                                    Orientation="Horizontal"
                                    TickFrequency="10"
                                    TickPlacement="Outside"
                                    Value="50" />
                                <TextBlock VerticalAlignment="Center" Text="ProgressBar" />
                                <ProgressBar Width="150" Value="{Binding Value, ElementName=slider}" />
                                <TextBlock VerticalAlignment="Center" Text="Pause State" />
                                <ProgressBar
                                    x:Name="ProgressBarPause"
                                    Width="150"
                                    ShowPaused="True"
                                    Value="{Binding Value, ElementName=slider}" />
                                <TextBlock VerticalAlignment="Center" Text="Error State" />
                                <ProgressBar
                                    x:Name="ProgressBarError"
                                    Width="150"
                                    ShowError="True"
                                    Value="{Binding Value, ElementName=slider}" />
                            </StackPanel>
                            <StackPanel
                                Padding="50,25"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="20">
                                <CheckBox Content="3 State CheckBox" IsThreeState="True" />
                                <ToggleSwitch
                                    Margin="0,0,-70,0"
                                    Header="ToggleSwitch"
                                    IsOn="True"
                                    OffContent="Off"
                                    OnContent="On" />
                                <StackPanel>
                                    <RadioButton Content="Radio Button 1" />
                                    <RadioButton Content="Radio Button 2" />
                                </StackPanel>
                                <MenuBar>
                                    <MenuBarItem Title="MenuBar 1">
                                        <MenuFlyoutSubItem Text="SubMenu">
                                            <MenuFlyoutItem Text="SubItem1" />
                                            <MenuFlyoutItem Text="SubItem2" />
                                        </MenuFlyoutSubItem>
                                        <MenuFlyoutItem Text="Item1" />
                                        <MenuFlyoutSeparator />
                                        <MenuFlyoutItem Text="Item2" />
                                    </MenuBarItem>
                                    <MenuBarItem Title="MenuBar 2">
                                        <MenuFlyoutItem Text="Item3" />
                                        <MenuFlyoutItem Text="Item4" />
                                        <MenuFlyoutItem Text="Item5" />
                                    </MenuBarItem>
                                </MenuBar>
                                <Button Content="Menu Flyout">
                                    <Button.Flyout>
                                        <MenuFlyout>
                                            <MenuFlyoutItem Text="Share">
                                                <MenuFlyoutItem.Icon>
                                                    <FontIcon Glyph="&#xE72D;" />
                                                </MenuFlyoutItem.Icon>
                                                <MenuFlyoutItem.KeyboardAccelerators>
                                                    <KeyboardAccelerator Key="S" Modifiers="Control" />
                                                </MenuFlyoutItem.KeyboardAccelerators>
                                            </MenuFlyoutItem>
                                            <MenuFlyoutItem Text="Copy">
                                                <MenuFlyoutItem.Icon>
                                                    <SymbolIcon Symbol="Copy" />
                                                </MenuFlyoutItem.Icon>
                                                <MenuFlyoutItem.KeyboardAccelerators>
                                                    <KeyboardAccelerator Key="C" Modifiers="Control" />
                                                </MenuFlyoutItem.KeyboardAccelerators>
                                            </MenuFlyoutItem>
                                            <MenuFlyoutItem Text="Delete">
                                                <MenuFlyoutItem.Icon>
                                                    <SymbolIcon Symbol="Delete" />
                                                </MenuFlyoutItem.Icon>
                                                <MenuFlyoutItem.KeyboardAccelerators>
                                                    <KeyboardAccelerator Key="Delete" />
                                                </MenuFlyoutItem.KeyboardAccelerators>
                                            </MenuFlyoutItem>
                                            <MenuFlyoutSeparator />
                                            <MenuFlyoutItem Text="Rename" />
                                            <MenuFlyoutItem Text="Select" />
                                        </MenuFlyout>
                                    </Button.Flyout>
                                </Button>
                                <Button Content="Flyout Presenter">
                                    <Button.Flyout>
                                        <Flyout>
                                            <StackPanel>
                                                <TextBlock
                                                    Margin="0,0,0,12"
                                                    Style="{ThemeResource BaseTextBlockStyle}"
                                                    Text="This is Flyout Presenter" />
                                                <Button Content="OK" />
                                            </StackPanel>
                                        </Flyout>
                                    </Button.Flyout>
                                </Button>
                                <ComboBox
                                    Width="120"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    IsEditable="True"
                                    PlaceholderText="ComboBox">
                                    <x:String>Value1</x:String>
                                    <x:String>Value2</x:String>
                                    <x:String>Value3</x:String>
                                    <x:String>Value4</x:String>
                                </ComboBox>
                            </StackPanel>
                        </StackPanel>
                    </ScrollViewer>
                </PivotItem>
                <PivotItem Header="Controls Page 2">
                    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
                        <Grid
                            Padding="5,25"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            ColumnSpacing="20">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <ColorPicker
                                Grid.Column="0"
                                ColorSpectrumShape="Box"
                                IsAlphaEnabled="False"
                                IsAlphaSliderVisible="True"
                                IsAlphaTextInputVisible="True"
                                IsColorChannelTextInputVisible="True"
                                IsColorSliderVisible="True"
                                IsHexInputVisible="True"
                                IsMoreButtonVisible="False" />
                            <StackPanel Grid.Column="1" Spacing="10">
                                <CalendarView Height="250" />
                                <InkToolbar x:Name="inkToolbar" VerticalAlignment="Top" />
                                <Grid Width="300" Height="200" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                                    <InkCanvas x:Name="inkCanvasDemo" />
                                  </Grid>
                                </StackPanel>
                            <StackPanel Grid.Column="2" Spacing="10">
                                <FlipView Width="300" Height="230">
                                    <FlipViewItem HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                        <StackPanel>
                                            <PersonPicture DisplayName="Jane Doe" />
                                            <TextBlock HorizontalAlignment="Center" Text="Jane Doe" />
                                        </StackPanel>
                                    </FlipViewItem>
                                    <FlipViewItem HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                        <StackPanel>
                                            <PersonPicture DisplayName="Ana Bowman" />
                                            <TextBlock HorizontalAlignment="Center" Text="Ana Bowman" />
                                        </StackPanel>
                                    </FlipViewItem>
                                    <FlipViewItem HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                        <StackPanel>
                                            <PersonPicture DisplayName="Kendall Collins" />
                                            <TextBlock HorizontalAlignment="Center" Text="Kendall Collins" />
                                        </StackPanel>
                                    </FlipViewItem>
                                    <FlipViewItem HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                        <StackPanel>
                                            <PersonPicture DisplayName="Henry Ross" />
                                            <TextBlock HorizontalAlignment="Center" Text="Henry Ross" />
                                        </StackPanel>
                                    </FlipViewItem>
                                    <FlipViewItem HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                        <StackPanel>
                                            <PersonPicture DisplayName="Vance DeLeon" />
                                            <TextBlock HorizontalAlignment="Center" Text="Vance DeLeon" />
                                        </StackPanel>
                                    </FlipViewItem>
                                    <FlipViewItem HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                        <StackPanel>
                                            <PersonPicture DisplayName="Amari Rivera" />
                                            <TextBlock HorizontalAlignment="Center" Text="Amari Rivera" />
                                        </StackPanel>
                                    </FlipViewItem>
                                </FlipView>
                                <TreeView Width="300" ItemsSource="{x:Bind TreeViewDataList}">
                                    <TreeView.ItemTemplate>
                                        <DataTemplate x:DataType="local:TreeViewItemModel">
                                            <TreeViewItem
                                                Content="{x:Bind Name}"
                                                IsExpanded="True"
                                                IsSelected="{x:Bind IsSelected}"
                                                ItemsSource="{x:Bind ChildrenNode}" />
                                        </DataTemplate>
                                    </TreeView.ItemTemplate>
                                </TreeView>
                                <HyperlinkButton
                                    HorizontalAlignment="Center"
                                    Click="{x:Bind HyperlinkButton_Click1}"
                                    Content="TreeViewNode Flaw"
                                    ToolTipService.ToolTip="TreeViewNode can not set Content property directly.&#13;Click to learn More" />
                            </StackPanel>
                            <StackPanel Grid.Column="3" Spacing="10">
                                <MediaPlayerElement
                                    x:Name="MediaPlayer"
                                    Width="330"
                                    Height="250"
                                    AreTransportControlsEnabled="True"
                                    Stretch="UniformToFill" />
                                <HyperlinkButton
                                    HorizontalAlignment="Center"
                                    Click="{x:Bind HyperlinkButton_Click}"
                                    Content="Video need vp9 extension support" />
                                <DatePicker HorizontalAlignment="Stretch" />
                                <TimePicker HorizontalAlignment="Stretch" />
                                <CalendarDatePicker HorizontalAlignment="Stretch" />
                                <Grid HorizontalAlignment="Stretch" ColumnSpacing="10">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Button
                                        Grid.Column="0"
                                        HorizontalAlignment="Stretch"
                                        Content="TimePickerFlyout">
                                        <Button.Flyout>
                                            <TimePickerFlyout />
                                        </Button.Flyout>
                                    </Button>
                                    <Button
                                        Grid.Column="1"
                                        HorizontalAlignment="Stretch"
                                        Content="DatePickerFlyout">
                                        <Button.Flyout>
                                            <DatePickerFlyout />
                                        </Button.Flyout>
                                    </Button>
                                </Grid>
                                <RatingControl />
                            </StackPanel>
                        </Grid>
                    </ScrollViewer>
                </PivotItem>
                <PivotItem Header="Background uses Mica" />
            </Pivot>
        </NavigationView.Content>
    </NavigationView>
</Page>