Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
547 lines (517 sloc) 35.4 KB
<Application
x:Class="NewShellDm.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
xmlns:controls="using:Microsoft.Toolkit.Uwp.SampleApp.Controls"
xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:local="using:NewShellDm"
xmlns:toolkitControls="using:Microsoft.Toolkit.Uwp.UI.Controls"
RequestedTheme="Light">
<Application.Resources>
<!-- Colors -->
<Color x:Key="Grey-01">#FF333333</Color>
<Color x:Key="Grey-02">#FF444444</Color>
<Color x:Key="White">#FFFFFFFF</Color>
<Color x:Key="Blue-01">#FF0078D7</Color>
<Color x:Key="Brand-Color">#3750D1</Color>
<SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="{StaticResource Brand-Color}" />
<!-- Brushes -->
<SolidColorBrush x:Key="Brush-Grey-01" Color="{StaticResource Grey-01}" />
<SolidColorBrush x:Key="Brush-Grey-02" Color="{StaticResource Grey-02}" />
<SolidColorBrush x:Key="Brush-White" Color="{StaticResource White}" />
<SolidColorBrush x:Key="Brush-Blue-01" Color="{StaticResource Blue-01}" />
<SolidColorBrush x:Key="Brush-Brand-Color" Color="{StaticResource Brand-Color}" />
<!-- Converters -->
<converters:BoolNegationConverter x:Key="BoolNegationConverter" />
<!-- Styles -->
<converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
<Style x:Key="HambugerMenuItemStyle" TargetType="ListViewItem">
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="0" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="Padding" Value="16,0,14,0" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid
x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
Control.IsTemplateFocusTarget="True">
<!-- Wrap SelectionIndicator in a grid so that its offset is 0,0 - this enables the offset animation. -->
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Rectangle
x:Name="SelectionIndicator"
Height="3"
Fill="{ThemeResource SystemControlHighlightAccentBrush}"
Opacity="0.0" />
</Grid>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Opacity="0.6" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PointerStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
<Setter Target="ContentPresenter.Opacity" Value="0.6" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
<Setter Target="ContentPresenter.Opacity" Value="0.6" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="SelectionIndicator.Opacity" Value="1.0" />
<Setter Target="ContentPresenter.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
<Setter Target="SelectionIndicator.Opacity" Value="1.0" />
<Setter Target="ContentPresenter.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
<Setter Target="SelectionIndicator.Opacity" Value="1.0" />
<Setter Target="ContentPresenter.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="VerticalHambugerMenuItemStyle" TargetType="ListViewItem">
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid
x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
Control.IsTemplateFocusTarget="True">
<!-- Wrap SelectionIndicator in a grid so that its offset is 0,0 - this enables the offset animation. -->
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<Rectangle
x:Name="SelectionIndicator"
Width="6"
Height="24"
Fill="{ThemeResource SystemControlForegroundAccentBrush}"
Opacity="0.0" />
</Grid>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PointerStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters />
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="HorizontalHamburgerMenu" TargetType="toolkitControls:HamburgerMenu">
<Setter Property="HamburgerMenuTemplate">
<Setter.Value>
<DataTemplate>
<FontIcon
Margin="16"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Glyph="&#xE700;" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkitControls:HamburgerMenu">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter
x:Name="ContentPart"
Grid.Row="1"
AutomationProperties.Name="Content"
Content="{TemplateBinding Content}" />
<toolkitControls:DropShadowPanel
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
BlurRadius="30"
OffsetY="3"
ShadowOpacity="0.2">
<Grid Background="{TemplateBinding PaneBackground}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border
Grid.ColumnSpan="3"
Height="1"
VerticalAlignment="Bottom"
Background="#48000000" />
<ListView
x:Name="ButtonsListView"
AutomationProperties.Name="Menu items"
IsItemClickEnabled="True"
ItemContainerStyle="{StaticResource HambugerMenuItemStyle}"
ItemTemplate="{TemplateBinding ItemTemplate}"
ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
ItemsSource="{TemplateBinding ItemsSource}"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
SelectedIndex="{Binding SelectedIndex, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectionMode="Single"
TabIndex="1">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<Grid Grid.Column="1">
<Button
Name="SearchButton"
Padding="0"
VerticalAlignment="Stretch"
AutomationProperties.Name="Search button"
Background="Transparent"
BorderThickness="0"
TabIndex="1">
<FontIcon
Margin="16,12"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Foreground="{TemplateBinding PaneForeground}"
Glyph="&#xE721;"
Opacity="0.6" />
</Button>
<AutoSuggestBox
x:Name="SearchBox"
MinWidth="300"
Margin="5,0"
VerticalAlignment="Center"
IsTabStop="True"
QueryIcon="Find"
TabIndex="1"
Visibility="Collapsed" />
</Grid>
<ListView
x:Name="OptionsListView"
Grid.Column="2"
AutomationProperties.Name="Option items"
IsItemClickEnabled="True"
ItemContainerStyle="{StaticResource HambugerMenuItemStyle}"
ItemTemplate="{TemplateBinding OptionsItemTemplate}"
ItemTemplateSelector="{TemplateBinding OptionsItemTemplateSelector}"
ItemsSource="{TemplateBinding OptionsItemsSource}"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
SelectedIndex="{Binding SelectedOptionsIndex, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectedItem="{Binding SelectedOptionsItem, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectionMode="Single"
TabIndex="2">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</toolkitControls:DropShadowPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="VerticalHamburgerMenu" TargetType="toolkitControls:HamburgerMenu">
<Setter Property="HamburgerMenuTemplate">
<Setter.Value>
<DataTemplate>
<FontIcon
Margin="16"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Glyph="&#xE700;" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkitControls:HamburgerMenu">
<Grid>
<SplitView
x:Name="MainSplitView"
DisplayMode="Overlay"
IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
IsTabStop="False"
OpenPaneLength="{TemplateBinding OpenPaneLength}"
PaneBackground="Transparent">
<SplitView.Pane>
<Grid x:Name="PaneGrid" FlowDirection="LeftToRight">
<Grid.RowDefinitions>
<RowDefinition Height="48" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border
Grid.RowSpan="2"
Background="{TemplateBinding PaneBackground}"
Opacity="0.96">
<interactivity:Interaction.Behaviors>
<behaviors:Blur
AutomaticallyStart="True"
Delay="0"
Value="3"
Duration="0" />
</interactivity:Interaction.Behaviors>
</Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
x:Name="HamburgerButton"
Width="{TemplateBinding HamburgerWidth}"
Height="{TemplateBinding HamburgerHeight}"
Padding="0"
VerticalAlignment="Top"
AutomationProperties.Name="Main button"
Background="Transparent"
BorderThickness="0"
TabIndex="0"
Visibility="{TemplateBinding HamburgerVisibility}">
<ContentControl
Margin="{TemplateBinding HamburgerMargin}"
ContentTemplate="{TemplateBinding HamburgerMenuTemplate}"
Foreground="{TemplateBinding PaneForeground}"
IsTabStop="False" />
</Button>
<Grid Grid.Column="1" Height="40">
<Button
Name="SearchButton"
Padding="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
AutomationProperties.Name="Search button"
Background="Transparent"
BorderThickness="0"
TabIndex="1"
Visibility="Visible">
<FontIcon
Margin="16,12"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Foreground="{TemplateBinding PaneForeground}"
Glyph="&#xE721;" />
</Button>
<AutoSuggestBox
x:Name="SearchBox"
Margin="5,0"
VerticalAlignment="Center"
IsTabStop="True"
QueryIcon="Find"
RequestedTheme="Dark"
TabIndex="1"
Tag="Vertical"
Visibility="Collapsed" />
</Grid>
</Grid>
<ScrollViewer
x:Name="RootScrollViewer"
Grid.Row="1"
Padding="0,0"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Auto"
ZoomMode="Disabled">
<StackPanel>
<ListView
x:Name="ButtonsListView"
AutomationProperties.Name="Menu items"
ItemContainerStyle="{StaticResource VerticalHambugerMenuItemStyle}"
ItemTemplate="{TemplateBinding ItemTemplate}"
ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
ItemsSource="{TemplateBinding ItemsSource}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
SelectedIndex="{Binding SelectedIndex, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectionMode="None"
TabIndex="1" />
<Border
Height="1"
Margin="32,15,32,14"
BorderBrush="White"
BorderThickness="0,1,0,0"
Opacity="0.4" />
</StackPanel>
</ScrollViewer>
</Grid>
</SplitView.Pane>
<ContentPresenter
x:Name="ContentPart"
AutomationProperties.Name="Content"
Content="{TemplateBinding Content}" />
</SplitView>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DismissTextBlockButtonStyle" TargetType="ButtonBase">
<Setter Property="Background" Value="{ThemeResource HyperlinkButtonBackground}" />
<Setter Property="Foreground" Value="{ThemeResource ApplicationForegroundThemeBrush}" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid Margin="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter
x:Name="Text"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>