replaced hamburgermenu with navview in sample app shell
This commit is contained in:
Nikola Metulev
Родитель
cc4eaaa7af
Коммит
a54698b05e
|
|
@ -4,22 +4,25 @@
|
|||
xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
|
||||
RequiresPointerMode="Auto">
|
||||
|
||||
<Application.Resources>
|
||||
<ResourceDictionary>
|
||||
<!-- Color Resources -->
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceDictionary Source="ms-appx:///Styles/Themes.xaml" />
|
||||
<ResourceDictionary Source="ms-appx:///Styles/Generic.xaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
<Application.Resources>
|
||||
<ResourceDictionary>
|
||||
<!-- Color Resources -->
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceDictionary Source="ms-appx:///Styles/Themes.xaml" />
|
||||
<ResourceDictionary Source="ms-appx:///Styles/Generic.xaml" />
|
||||
|
||||
<!-- Converters -->
|
||||
<converters:BoolNegationConverter x:Key="BoolNegationConverter" />
|
||||
<!-- WinUI -->
|
||||
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
<converters:EmptyStringToObjectConverter x:Key="EmptyStringToObject"
|
||||
EmptyValue="Collapsed"
|
||||
NotEmptyValue="Visible" />
|
||||
<!-- Converters -->
|
||||
<converters:BoolNegationConverter x:Key="BoolNegationConverter" />
|
||||
|
||||
<converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
|
||||
</ResourceDictionary>
|
||||
</Application.Resources>
|
||||
<converters:EmptyStringToObjectConverter x:Key="EmptyStringToObject"
|
||||
EmptyValue="Collapsed"
|
||||
NotEmptyValue="Visible" />
|
||||
|
||||
<converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
|
||||
</ResourceDictionary>
|
||||
</Application.Resources>
|
||||
</Application>
|
||||
|
|
@ -1,653 +0,0 @@
|
|||
// Licensed to the .NET Foundation under one or more agreements.
|
||||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using System;
|
||||
using System.Linq;
|
||||
using System.Numerics;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.Toolkit.Uwp.UI.Animations;
|
||||
using Microsoft.Toolkit.Uwp.UI.Controls;
|
||||
using Microsoft.Toolkit.Uwp.UI.Extensions;
|
||||
using Windows.Foundation.Metadata;
|
||||
using Windows.UI.Core;
|
||||
using Windows.UI.Xaml;
|
||||
using Windows.UI.Xaml.Controls;
|
||||
using Windows.UI.Xaml.Media.Animation;
|
||||
|
||||
namespace Microsoft.Toolkit.Uwp.SampleApp.Controls
|
||||
{
|
||||
#pragma warning disable CS0618 // Type or member is obsolete
|
||||
public class ExtendedHamburgerMenu : HamburgerMenu
|
||||
#pragma warning restore CS0618 // Type or member is obsolete
|
||||
{
|
||||
private static readonly bool _isCreatorsUpdateOrAbove = ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 4);
|
||||
|
||||
private Button _hamburgerButton;
|
||||
private ListView _buttonsListView;
|
||||
private ListView _optionsListView;
|
||||
private Grid _samplePickerGrid;
|
||||
private GridView _samplePickerGridView;
|
||||
private Border _contentShadow;
|
||||
private Grid _searchGrid;
|
||||
private TextBlock _titleTextBlock;
|
||||
private AutoSuggestBox _searchBox;
|
||||
private Button _searchButton;
|
||||
|
||||
private Canvas _moreInfoCanvas;
|
||||
private FrameworkElement _moreInfoContent;
|
||||
private Image _moreInfoImage;
|
||||
|
||||
/// <summary>
|
||||
/// Event raised when an item is clicked
|
||||
/// </summary>
|
||||
public event ItemClickEventHandler SamplePickerItemClick;
|
||||
|
||||
private Sample _currentSample;
|
||||
|
||||
public string Title
|
||||
{
|
||||
get { return (string)GetValue(TitleProperty); }
|
||||
set { SetValue(TitleProperty, value); }
|
||||
}
|
||||
|
||||
public static readonly DependencyProperty TitleProperty =
|
||||
DependencyProperty.Register("Title", typeof(string), typeof(ExtendedHamburgerMenu), new PropertyMetadata(string.Empty));
|
||||
|
||||
public Sample CurrentSample
|
||||
{
|
||||
get
|
||||
{
|
||||
return _currentSample;
|
||||
}
|
||||
|
||||
set
|
||||
{
|
||||
_currentSample = value;
|
||||
var noop = SetHamburgerMenuSelection();
|
||||
}
|
||||
}
|
||||
|
||||
public void HideSamplePicker()
|
||||
{
|
||||
if (SetupSamplePicker())
|
||||
{
|
||||
_samplePickerGrid.Visibility = Visibility.Collapsed;
|
||||
}
|
||||
|
||||
var noop = SetHamburgerMenuSelection();
|
||||
}
|
||||
|
||||
public async void ShowSamplePicker(Sample[] samples = null)
|
||||
{
|
||||
if (!SetupSamplePicker())
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (samples == null && _currentSample != null)
|
||||
{
|
||||
var category = await Samples.GetCategoryBySample(_currentSample);
|
||||
if (category != null)
|
||||
{
|
||||
samples = category.Samples;
|
||||
}
|
||||
}
|
||||
|
||||
if (samples == null)
|
||||
{
|
||||
samples = (await Samples.GetCategoriesAsync()).FirstOrDefault()?.Samples;
|
||||
}
|
||||
|
||||
if (samples == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (_samplePickerGrid.Visibility == Visibility.Visible &&
|
||||
_samplePickerGridView.ItemsSource is Sample[] currentSamples &&
|
||||
currentSamples.Count() == samples.Count() &&
|
||||
currentSamples.Except(samples).Count() == 0)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
_samplePickerGridView.ItemsSource = samples;
|
||||
|
||||
if (_currentSample != null && samples.Contains(_currentSample))
|
||||
{
|
||||
_samplePickerGridView.SelectedItem = _currentSample;
|
||||
}
|
||||
else
|
||||
{
|
||||
_samplePickerGridView.SelectedItem = null;
|
||||
}
|
||||
|
||||
_samplePickerGrid.Visibility = Visibility.Visible;
|
||||
}
|
||||
|
||||
public async Task StartSearch(string startingText = null)
|
||||
{
|
||||
if (_searchBox == null || _searchBox.Visibility == Visibility.Visible)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var currentSearchText = _searchBox.Text;
|
||||
|
||||
_searchBox.Text = string.Empty;
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(startingText))
|
||||
{
|
||||
_searchBox.Text = startingText;
|
||||
}
|
||||
else
|
||||
{
|
||||
_searchBox.Text = currentSearchText;
|
||||
}
|
||||
|
||||
_searchButton.Visibility = Visibility.Collapsed;
|
||||
_searchBox.Visibility = Visibility.Visible;
|
||||
|
||||
_searchBox.Focus(FocusState.Programmatic);
|
||||
|
||||
// We need to wait for the textbox to be created to focus it (only first time).
|
||||
TextBox innerTextbox = null;
|
||||
|
||||
do
|
||||
{
|
||||
innerTextbox = _searchBox.FindDescendant<TextBox>();
|
||||
innerTextbox?.Focus(FocusState.Programmatic);
|
||||
|
||||
if (innerTextbox == null)
|
||||
{
|
||||
await Task.Delay(150);
|
||||
}
|
||||
}
|
||||
while (innerTextbox == null);
|
||||
}
|
||||
|
||||
protected override void OnApplyTemplate()
|
||||
{
|
||||
Window.Current.CoreWindow.CharacterReceived -= CoreWindow_CharacterReceived;
|
||||
Window.Current.CoreWindow.CharacterReceived += CoreWindow_CharacterReceived;
|
||||
|
||||
base.OnApplyTemplate();
|
||||
|
||||
if (_hamburgerButton != null)
|
||||
{
|
||||
_hamburgerButton.Click -= HamburgerButton_Click;
|
||||
}
|
||||
|
||||
SystemNavigationManager.GetForCurrentView().BackRequested -= OnBackRequested;
|
||||
ItemClick -= ExtendedHamburgerMenu_ItemClick;
|
||||
OptionsItemClick -= ExtendedHamburgerMenu_OptionsItemClick;
|
||||
|
||||
_hamburgerButton = GetTemplateChild("HamburgerButton") as Button;
|
||||
_optionsListView = GetTemplateChild("OptionsListView") as ListView;
|
||||
_searchGrid = GetTemplateChild("SearchGrid") as Grid;
|
||||
_titleTextBlock = GetTemplateChild("TitleTextBlock") as TextBlock;
|
||||
_buttonsListView = GetTemplateChild("ButtonsListView") as ListView;
|
||||
|
||||
if (_hamburgerButton != null)
|
||||
{
|
||||
_hamburgerButton.Click += HamburgerButton_Click;
|
||||
}
|
||||
|
||||
SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;
|
||||
ItemClick += ExtendedHamburgerMenu_ItemClick;
|
||||
OptionsItemClick += ExtendedHamburgerMenu_OptionsItemClick;
|
||||
|
||||
SetupMoreInfo();
|
||||
SetupSearch();
|
||||
}
|
||||
|
||||
private void CoreWindow_CharacterReceived(CoreWindow sender, CharacterReceivedEventArgs args)
|
||||
{
|
||||
if (args.KeyCode == 27)
|
||||
{
|
||||
HideSamplePicker();
|
||||
}
|
||||
}
|
||||
|
||||
private void SetupMoreInfo()
|
||||
{
|
||||
if (_moreInfoCanvas != null)
|
||||
{
|
||||
_moreInfoCanvas.Tapped -= MoreInfoCanvas_Tapped;
|
||||
SizeChanged += OnSizeChanged;
|
||||
}
|
||||
|
||||
_moreInfoCanvas = GetTemplateChild("MoreInfoCanvas") as Canvas;
|
||||
_moreInfoContent = GetTemplateChild("MoreInfoContent") as FrameworkElement;
|
||||
_moreInfoImage = GetTemplateChild("MoreInfoImage") as Image;
|
||||
|
||||
if (_moreInfoCanvas != null)
|
||||
{
|
||||
_moreInfoCanvas.Tapped += MoreInfoCanvas_Tapped;
|
||||
SizeChanged += OnSizeChanged;
|
||||
}
|
||||
}
|
||||
|
||||
private bool SetupSamplePicker()
|
||||
{
|
||||
if (_samplePickerGrid != null)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
_samplePickerGrid = GetTemplateChild("SamplePickerGrid") as Grid;
|
||||
_samplePickerGridView = GetTemplateChild("SamplePickerGridView") as GridView;
|
||||
_contentShadow = GetTemplateChild("ContentShadow") as Border;
|
||||
|
||||
if (_samplePickerGridView != null)
|
||||
{
|
||||
_samplePickerGridView.ItemClick += SamplePickerGridView_ItemClick;
|
||||
_samplePickerGridView.ChoosingItemContainer += SamplePickerGridView_ChoosingItemContainer;
|
||||
}
|
||||
|
||||
if (_contentShadow != null)
|
||||
{
|
||||
_contentShadow.Tapped += ContentShadow_Tapped;
|
||||
}
|
||||
|
||||
return _samplePickerGrid != null;
|
||||
}
|
||||
|
||||
private void SetupSearch()
|
||||
{
|
||||
if (_searchBox != null)
|
||||
{
|
||||
_searchBox.LostFocus -= SearchBox_LostFocus;
|
||||
_searchBox.TextChanged -= SearchBox_TextChanged;
|
||||
_searchBox.KeyDown -= SearchBox_KeyDown;
|
||||
_searchBox.QuerySubmitted -= SearchBox_QuerySubmitted;
|
||||
}
|
||||
|
||||
if (_searchButton != null)
|
||||
{
|
||||
_searchButton.Click -= SearchButton_Click;
|
||||
_searchButton.GotFocus -= SearchButton_GotFocus;
|
||||
}
|
||||
|
||||
_searchBox = GetTemplateChild("SearchBox") as AutoSuggestBox;
|
||||
_searchButton = GetTemplateChild("SearchButton") as Button;
|
||||
|
||||
if (_searchBox == null || _searchButton == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
_searchBox.LostFocus += SearchBox_LostFocus;
|
||||
_searchBox.TextChanged += SearchBox_TextChanged;
|
||||
_searchBox.KeyDown += SearchBox_KeyDown;
|
||||
_searchBox.QuerySubmitted += SearchBox_QuerySubmitted;
|
||||
|
||||
_searchButton.Click += SearchButton_Click;
|
||||
_searchButton.GotFocus += SearchButton_GotFocus;
|
||||
|
||||
_searchBox.DisplayMemberPath = "Name";
|
||||
_searchBox.TextMemberPath = "Name";
|
||||
}
|
||||
|
||||
private void SearchBox_KeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
|
||||
{
|
||||
if (e.Key == Windows.System.VirtualKey.Down)
|
||||
{
|
||||
if (_samplePickerGrid.Visibility == Visibility.Visible)
|
||||
{
|
||||
_samplePickerGridView.Focus(FocusState.Keyboard);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void SearchButton_Click(object sender, RoutedEventArgs e)
|
||||
{
|
||||
var t = StartSearch();
|
||||
}
|
||||
|
||||
private void SearchButton_GotFocus(object sender, RoutedEventArgs e)
|
||||
{
|
||||
var t = StartSearch();
|
||||
}
|
||||
|
||||
private void SearchBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
|
||||
{
|
||||
UpdateSearchSuggestions();
|
||||
}
|
||||
|
||||
private void SearchBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
|
||||
{
|
||||
UpdateSearchSuggestions();
|
||||
}
|
||||
|
||||
private async void UpdateSearchSuggestions()
|
||||
{
|
||||
var samples = (await Samples.FindSamplesByName(_searchBox.Text)).OrderBy(s => s.Name).ToArray();
|
||||
if (samples.Count() > 0)
|
||||
{
|
||||
ShowSamplePicker(samples);
|
||||
}
|
||||
else
|
||||
{
|
||||
HideSamplePicker();
|
||||
}
|
||||
}
|
||||
|
||||
private async void SearchBox_LostFocus(object sender, RoutedEventArgs e)
|
||||
{
|
||||
_searchButton.Visibility = Visibility.Visible;
|
||||
|
||||
if (_isCreatorsUpdateOrAbove)
|
||||
{
|
||||
new ScaleAnimation() { To = "0, 1, 1", Duration = TimeSpan.FromMilliseconds(300) }.StartAnimation(_searchBox);
|
||||
|
||||
await Task.Delay(300);
|
||||
}
|
||||
|
||||
_searchBox.Visibility = Visibility.Collapsed;
|
||||
}
|
||||
|
||||
private void ExtendedHamburgerMenu_OptionsItemClick(object sender, ItemClickEventArgs e)
|
||||
{
|
||||
HideSamplePicker();
|
||||
}
|
||||
|
||||
private void ExtendedHamburgerMenu_ItemClick(object sender, ItemClickEventArgs e)
|
||||
{
|
||||
if (!SetupSamplePicker())
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.ClickedItem is SampleCategory category)
|
||||
{
|
||||
if (_samplePickerGrid.Visibility != Visibility.Collapsed && SelectedItem == e.ClickedItem)
|
||||
{
|
||||
if (_hamburgerButton != null && _hamburgerButton.Visibility == Visibility.Visible)
|
||||
{
|
||||
HideItemsInNarrowView();
|
||||
}
|
||||
else
|
||||
{
|
||||
HideSamplePicker();
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
ShowSamplePicker(category.Samples);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void OnBackRequested(object sender, BackRequestedEventArgs e)
|
||||
{
|
||||
if (SetupSamplePicker() && _samplePickerGrid.Visibility == Visibility.Visible)
|
||||
{
|
||||
HideSamplePicker();
|
||||
e.Handled = true;
|
||||
}
|
||||
}
|
||||
|
||||
private async Task SetHamburgerMenuSelection()
|
||||
{
|
||||
if (_currentSample != null)
|
||||
{
|
||||
var category = await Samples.GetCategoryBySample(_currentSample);
|
||||
|
||||
if (Items.Contains(category))
|
||||
{
|
||||
SelectedItem = category;
|
||||
SelectedOptionsItem = null;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
SelectedItem = null;
|
||||
SelectedOptionsIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
private void ContentShadow_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
|
||||
{
|
||||
HideSamplePicker();
|
||||
|
||||
if (_hamburgerButton != null && _hamburgerButton.Visibility == Visibility.Visible)
|
||||
{
|
||||
HideItemsInNarrowView();
|
||||
}
|
||||
}
|
||||
|
||||
private void SamplePickerGridView_ChoosingItemContainer(Windows.UI.Xaml.Controls.ListViewBase sender, ChoosingItemContainerEventArgs args)
|
||||
{
|
||||
if (args.ItemContainer != null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
GridViewItem container = (GridViewItem)args.ItemContainer ?? new GridViewItem();
|
||||
container.Loaded += ContainerItem_Loaded;
|
||||
container.PointerEntered += ItemContainer_PointerEntered;
|
||||
container.PointerExited += ItemContainer_PointerExited;
|
||||
|
||||
args.ItemContainer = container;
|
||||
}
|
||||
|
||||
private void ContainerItem_Loaded(object sender, RoutedEventArgs e)
|
||||
{
|
||||
var itemsPanel = (ItemsWrapGrid)_samplePickerGridView.ItemsPanelRoot;
|
||||
var itemContainer = (GridViewItem)sender;
|
||||
itemContainer.Loaded -= this.ContainerItem_Loaded;
|
||||
|
||||
var button = itemContainer.FindDescendant<Button>();
|
||||
if (button != null)
|
||||
{
|
||||
button.Click -= MoreInfoClicked;
|
||||
button.Click += MoreInfoClicked;
|
||||
}
|
||||
|
||||
if (!_isCreatorsUpdateOrAbove)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var itemIndex = _samplePickerGridView.IndexFromContainer(itemContainer);
|
||||
|
||||
var referenceIndex = itemsPanel.FirstVisibleIndex;
|
||||
|
||||
if (_samplePickerGridView.SelectedIndex >= 0)
|
||||
{
|
||||
referenceIndex = _samplePickerGridView.SelectedIndex;
|
||||
}
|
||||
|
||||
var relativeIndex = Math.Abs(itemIndex - referenceIndex);
|
||||
|
||||
if (itemContainer.Content != CurrentSample && itemIndex >= 0 && itemIndex >= itemsPanel.FirstVisibleIndex && itemIndex <= itemsPanel.LastVisibleIndex)
|
||||
{
|
||||
var staggerDelay = TimeSpan.FromMilliseconds(relativeIndex * 30);
|
||||
|
||||
var animationCollection = new AnimationCollection()
|
||||
{
|
||||
new OpacityAnimation() { From = 0, To = 1, Duration = TimeSpan.FromMilliseconds(400), Delay = staggerDelay, SetInitialValueBeforeDelay = true },
|
||||
new ScaleAnimation() { From = "0.9", To = "1", Duration = TimeSpan.FromMilliseconds(400), Delay = staggerDelay }
|
||||
};
|
||||
|
||||
VisualExtensions.SetNormalizedCenterPoint(itemContainer, "0.5");
|
||||
|
||||
animationCollection.StartAnimation(itemContainer);
|
||||
}
|
||||
}
|
||||
|
||||
private void MoreInfoClicked(object sender, RoutedEventArgs e)
|
||||
{
|
||||
if (_moreInfoContent == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var button = (Button)sender;
|
||||
var sample = button.DataContext as Sample;
|
||||
|
||||
var container = button.FindAscendant<GridViewItem>();
|
||||
if (container == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var point = container.TransformToVisual(this).TransformPoint(new Windows.Foundation.Point(0, 0));
|
||||
|
||||
var x = point.X - ((_moreInfoContent.Width - container.ActualWidth) / 2);
|
||||
var y = point.Y - ((_moreInfoContent.Height - container.ActualHeight) / 2);
|
||||
|
||||
x = Math.Max(x, 10);
|
||||
x = Math.Min(x, ActualWidth - _moreInfoContent.Width - 10);
|
||||
|
||||
y = Math.Max(y, 10);
|
||||
y = Math.Min(y, ActualHeight - _moreInfoContent.Height - 10);
|
||||
|
||||
Canvas.SetLeft(_moreInfoContent, x);
|
||||
Canvas.SetTop(_moreInfoContent, y);
|
||||
|
||||
var centerX = (point.X + (container.ActualWidth / 2)) - x;
|
||||
var centerY = (point.Y + (container.ActualHeight / 2)) - y;
|
||||
|
||||
VisualExtensions.SetCenterPoint(_moreInfoContent, new Vector3((float)centerX, (float)centerY, 0).ToString());
|
||||
|
||||
// _samplePickerGridView.PrepareConnectedAnimation("sample_icon", sample, "SampleIcon");
|
||||
_moreInfoContent.DataContext = sample;
|
||||
_moreInfoCanvas.Visibility = Visibility.Visible;
|
||||
|
||||
// var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("sample_icon");
|
||||
// var result = animation.TryStart(_moreInfoImage);
|
||||
}
|
||||
|
||||
private void HideMoreInfo()
|
||||
{
|
||||
if (_isCreatorsUpdateOrAbove && _moreInfoImage != null && _moreInfoContent.DataContext != null)
|
||||
{
|
||||
ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("sample_icon", _moreInfoImage);
|
||||
}
|
||||
|
||||
_moreInfoCanvas.Visibility = Visibility.Collapsed;
|
||||
|
||||
if (_isCreatorsUpdateOrAbove && _moreInfoImage != null && _moreInfoContent.DataContext != null)
|
||||
{
|
||||
var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("sample_icon");
|
||||
var t = _samplePickerGridView.TryStartConnectedAnimationAsync(animation, _moreInfoContent.DataContext, "SampleIcon");
|
||||
}
|
||||
|
||||
_moreInfoContent.DataContext = null;
|
||||
}
|
||||
|
||||
private void MoreInfoCanvas_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
|
||||
{
|
||||
HideMoreInfo();
|
||||
}
|
||||
|
||||
private void OnSizeChanged(object sender, SizeChangedEventArgs e)
|
||||
{
|
||||
HideMoreInfo();
|
||||
}
|
||||
|
||||
private void ItemContainer_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
|
||||
{
|
||||
var panel = (sender as FrameworkElement).FindDescendant<DropShadowPanel>();
|
||||
if (panel != null)
|
||||
{
|
||||
var animation = new OpacityAnimation() { To = 0, Duration = TimeSpan.FromMilliseconds(1200) };
|
||||
animation.StartAnimation(panel);
|
||||
|
||||
var parentAnimation = new ScaleAnimation() { To = "1", Duration = TimeSpan.FromMilliseconds(1200) };
|
||||
parentAnimation.StartAnimation(panel.Parent as UIElement);
|
||||
}
|
||||
}
|
||||
|
||||
private void ItemContainer_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
|
||||
{
|
||||
if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
|
||||
{
|
||||
var panel = (sender as FrameworkElement).FindDescendant<DropShadowPanel>();
|
||||
if (panel != null)
|
||||
{
|
||||
panel.Visibility = Visibility.Visible;
|
||||
var animation = new OpacityAnimation() { To = 1, Duration = TimeSpan.FromMilliseconds(600) };
|
||||
animation.StartAnimation(panel);
|
||||
|
||||
var parentAnimation = new ScaleAnimation() { To = "1.1", Duration = TimeSpan.FromMilliseconds(600) };
|
||||
parentAnimation.StartAnimation(panel.Parent as UIElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void SamplePickerGridView_ItemClick(object sender, ItemClickEventArgs e)
|
||||
{
|
||||
HideSamplePicker();
|
||||
SamplePickerItemClick?.Invoke(this, e);
|
||||
|
||||
if (_hamburgerButton != null && _hamburgerButton.Visibility == Visibility.Visible)
|
||||
{
|
||||
HideItemsInNarrowView();
|
||||
}
|
||||
}
|
||||
|
||||
private void HamburgerButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
|
||||
{
|
||||
if (_buttonsListView != null)
|
||||
{
|
||||
if (_buttonsListView.Visibility == Visibility.Collapsed)
|
||||
{
|
||||
ExpandItemsInNarrowView();
|
||||
}
|
||||
else
|
||||
{
|
||||
HideItemsInNarrowView();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void ExpandItemsInNarrowView()
|
||||
{
|
||||
_buttonsListView.Visibility = Visibility.Visible;
|
||||
if (_optionsListView != null)
|
||||
{
|
||||
_optionsListView.Visibility = Visibility.Collapsed;
|
||||
}
|
||||
|
||||
if (_searchGrid != null)
|
||||
{
|
||||
_searchGrid.Visibility = Visibility.Collapsed;
|
||||
}
|
||||
|
||||
if (_titleTextBlock != null)
|
||||
{
|
||||
_titleTextBlock.Visibility = Visibility.Collapsed;
|
||||
}
|
||||
|
||||
ShowSamplePicker();
|
||||
|
||||
new RotationInDegreesAnimation() { To = 90, Duration = TimeSpan.FromMilliseconds(300) }.StartAnimation(_hamburgerButton.Content as UIElement);
|
||||
}
|
||||
|
||||
private void HideItemsInNarrowView()
|
||||
{
|
||||
_buttonsListView.Visibility = Visibility.Collapsed;
|
||||
if (_optionsListView != null)
|
||||
{
|
||||
_optionsListView.Visibility = Visibility.Visible;
|
||||
}
|
||||
|
||||
if (_searchGrid != null)
|
||||
{
|
||||
_searchGrid.Visibility = Visibility.Visible;
|
||||
}
|
||||
|
||||
if (_titleTextBlock != null)
|
||||
{
|
||||
_titleTextBlock.Visibility = Visibility.Visible;
|
||||
}
|
||||
|
||||
HideSamplePicker();
|
||||
new RotationInDegreesAnimation() { To = 0, Duration = TimeSpan.FromMilliseconds(300) }.StartAnimation(_hamburgerButton.Content as UIElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,375 +0,0 @@
|
|||
<ResourceDictionary
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="using:Microsoft.Toolkit.Uwp.SampleApp.Controls"
|
||||
xmlns:toolkitControls="using:Microsoft.Toolkit.Uwp.UI.Controls"
|
||||
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
|
||||
xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
|
||||
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
|
||||
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
|
||||
xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp">
|
||||
|
||||
<Style x:Key="HorizontalHamburgerMenu"
|
||||
TargetType="controls:ExtendedHamburgerMenu">
|
||||
<Setter Property="HamburgerMenuTemplate">
|
||||
<Setter.Value>
|
||||
<DataTemplate>
|
||||
<FontIcon Margin="16"
|
||||
FontFamily="Segoe MDL2 Assets"
|
||||
FontSize="16"
|
||||
Glyph="" />
|
||||
</DataTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
<Setter Property="IsTabStop" Value="False" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="controls:ExtendedHamburgerMenu">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="48" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid.Resources>
|
||||
<animations:AnimationCollection x:Key="FromRightShowAnimation">
|
||||
<animations:TranslationAnimation From="100, 0, 0" To="0" Duration="0:0:0.3"></animations:TranslationAnimation>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
</animations:AnimationCollection>
|
||||
<animations:AnimationCollection x:Key="FromRightHideAnimation">
|
||||
<animations:OpacityAnimation From="1" To="0" Duration="0:0:0.2"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation To="100, 0, 0" From="0" Duration="0:0:0.2"></animations:TranslationAnimation>
|
||||
</animations:AnimationCollection>
|
||||
</Grid.Resources>
|
||||
|
||||
<ContentPresenter x:Name="ContentPart"
|
||||
Grid.Row="1"
|
||||
AutomationProperties.Name="Content"
|
||||
Content="{TemplateBinding Content}" />
|
||||
|
||||
<Grid Grid.Row="1">
|
||||
|
||||
<Border x:Name="ContentShadow"
|
||||
Background="{ThemeResource BackingTint}"
|
||||
Visibility="{Binding Visibility, ElementName=SamplePickerGrid}">
|
||||
<interactivity:Interaction.Behaviors>
|
||||
<behaviors:Blur AutomaticallyStart="True"
|
||||
Delay="0"
|
||||
Value="2"
|
||||
Duration="0" />
|
||||
</interactivity:Interaction.Behaviors>
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation From="1" To="0" Duration="0:0:0.2"></animations:OpacityAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
</Border>
|
||||
|
||||
<Grid x:Name="SamplePickerGrid"
|
||||
x:DeferLoadStrategy="Lazy"
|
||||
Visibility="Collapsed"
|
||||
VerticalAlignment="Top">
|
||||
<toolkitControls:DropShadowPanel VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
ShadowOpacity="0.7"
|
||||
Color="Black"
|
||||
BlurRadius="10"
|
||||
VerticalAlignment="Bottom"
|
||||
Margin="0,0,0,-3">
|
||||
<Border Height="1"></Border>
|
||||
</toolkitControls:DropShadowPanel>
|
||||
|
||||
<Border x:Name="SamplePickerGridBackground"
|
||||
Background="{ThemeResource Menu-DropDown-Background}"></Border>
|
||||
<GridView x:Name="SamplePickerGridView"
|
||||
animations:ReorderGridAnimation.Duration="200"
|
||||
IsItemClickEnabled="True"
|
||||
ItemContainerStyle="{StaticResource SecondaryHamburgerMenuItemStyle}"
|
||||
ItemContainerTransitions="{x:Null}"
|
||||
ItemTemplate="{StaticResource SampleTemplate}"
|
||||
SelectionMode="Single"
|
||||
Transitions="{x:Null}">
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3" Delay="0:0:0.2" SetInitialValueBeforeDelay="True"></animations:OpacityAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
</GridView>
|
||||
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation From="0, -1000, 0" To="0" Duration="0:0:0.3"></animations:TranslationAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation From="1" To="0" Duration="0:0:0.5"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation To="0, -1000, 0" From="0" Duration="0:0:0.5"></animations:TranslationAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid Background="{TemplateBinding PaneBackground}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<ListView x:Name="ButtonsListView"
|
||||
AutomationProperties.Name="Menu items"
|
||||
IsItemClickEnabled="True"
|
||||
ItemContainerStyle="{StaticResource HamburgerMenuItemStyle}"
|
||||
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"
|
||||
Grid.Column="1">
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:TranslationAnimation From="-500, 0, 0" To="0" Duration="0:0:0.3"></animations:TranslationAnimation>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation From="1" To="0" Duration="0:0:0.2"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation To="-500, 0, 0" From="0" Duration="0:0:0.2"></animations:TranslationAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
<animations:Implicit.Animations>
|
||||
<animations:OffsetAnimation Duration="0:0:0.2"></animations:OffsetAnimation>
|
||||
</animations:Implicit.Animations>
|
||||
<ListView.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<ItemsStackPanel Orientation="Horizontal" />
|
||||
</ItemsPanelTemplate>
|
||||
</ListView.ItemsPanel>
|
||||
</ListView>
|
||||
|
||||
<TextBlock x:Name="TitleTextBlock"
|
||||
Grid.Column="1"
|
||||
Margin="2,0,0,0"
|
||||
VerticalAlignment="Center"
|
||||
animations:Implicit.HideAnimations="{StaticResource FromRightHideAnimation}"
|
||||
animations:Implicit.ShowAnimations="{StaticResource FromRightShowAnimation}"
|
||||
FontFamily="Segoe UI"
|
||||
FontSize="15px"
|
||||
FontWeight="Normal"
|
||||
Text="{TemplateBinding Title}" />
|
||||
|
||||
<Grid Grid.Column="2" x:Name="SearchGrid"
|
||||
animations:Implicit.ShowAnimations="{StaticResource FromRightShowAnimation}"
|
||||
animations:Implicit.HideAnimations="{StaticResource FromRightHideAnimation}">
|
||||
<Button Name="SearchButton"
|
||||
Padding="0"
|
||||
VerticalAlignment="Stretch"
|
||||
AutomationProperties.Name="Search button"
|
||||
Background="Transparent"
|
||||
HorizontalAlignment="Right"
|
||||
BorderThickness="0"
|
||||
Opacity="0.6">
|
||||
<FontIcon Margin="16,12"
|
||||
FontFamily="Segoe MDL2 Assets"
|
||||
FontSize="16"
|
||||
Glyph="" />
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="0.6" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
</Button>
|
||||
<AutoSuggestBox x:Name="SearchBox"
|
||||
MinWidth="300"
|
||||
Margin="5,0"
|
||||
VerticalAlignment="Center"
|
||||
extensions:VisualExtensions.NormalizedCenterPoint="0.95, 0.5, 0"
|
||||
IsTabStop="False"
|
||||
QueryIcon="Find"
|
||||
Visibility="Collapsed">
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:ScaleAnimation From="0,1,1" To="1" Duration="0:0:0.3"></animations:ScaleAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
</AutoSuggestBox>
|
||||
</Grid>
|
||||
|
||||
<ListView x:Name="OptionsListView"
|
||||
Grid.Column="3"
|
||||
AutomationProperties.Name="Option items"
|
||||
IsItemClickEnabled="True"
|
||||
ItemContainerStyle="{StaticResource HamburgerMenuItemStyle}"
|
||||
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>
|
||||
|
||||
<Button x:Name="HamburgerButton"
|
||||
Width="{TemplateBinding HamburgerWidth}"
|
||||
Height="{TemplateBinding HamburgerHeight}"
|
||||
Opacity="0.6"
|
||||
Padding="0"
|
||||
VerticalAlignment="Top"
|
||||
AutomationProperties.Name="Main button"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
TabIndex="0"
|
||||
Visibility="Collapsed">
|
||||
<ContentControl Margin="{TemplateBinding HamburgerMargin}"
|
||||
ContentTemplate="{TemplateBinding HamburgerMenuTemplate}"
|
||||
Foreground="{TemplateBinding PaneForeground}"
|
||||
Background="{ThemeResource Brush-Main}"
|
||||
extensions:VisualExtensions.NormalizedCenterPoint="0.5"
|
||||
IsTabStop="False">
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation Duration="0:0:0.3" To="0.6"></animations:OpacityAnimation>
|
||||
<animations:RotationInDegreesAnimation Duration="0:0:0.4" From="-180" To="0"></animations:RotationInDegreesAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation Duration="0:0:0.2" To="0"></animations:OpacityAnimation>
|
||||
<animations:RotationInDegreesAnimation Duration="0:0:0.2" To="-180" From="0"></animations:RotationInDegreesAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
</ContentControl>
|
||||
</Button>
|
||||
|
||||
<Border Background="{ThemeResource Border-NavigationBar}" Height="1" VerticalAlignment="Bottom" Grid.ColumnSpan="4"></Border>
|
||||
</Grid>
|
||||
|
||||
<Canvas Background="Transparent"
|
||||
x:Name="MoreInfoCanvas"
|
||||
Visibility="Collapsed"
|
||||
Grid.RowSpan="2">
|
||||
|
||||
<Grid x:Name="MoreInfoContent"
|
||||
Width="260"
|
||||
Height="320"
|
||||
extensions:VisualExtensions.NormalizedCenterPoint="0.5">
|
||||
<Grid VerticalAlignment="Top">
|
||||
|
||||
<toolkitControls:DropShadowPanel VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
ShadowOpacity="0.6"
|
||||
Color="Black"
|
||||
OffsetY="6"
|
||||
BlurRadius="60">
|
||||
<Border Background="{ThemeResource Menu-DropDown-Background}"
|
||||
Opacity="0.96">
|
||||
<interactivity:Interaction.Behaviors>
|
||||
<behaviors:Blur AutomaticallyStart="True"
|
||||
Delay="0"
|
||||
Value="3"
|
||||
Duration="0" />
|
||||
</interactivity:Interaction.Behaviors>
|
||||
</Border>
|
||||
</toolkitControls:DropShadowPanel>
|
||||
|
||||
<Grid Padding="10">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="160" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid
|
||||
Grid.Row="0"
|
||||
Background="{ThemeResource SampleIconBacking}">
|
||||
<Image Width="240"
|
||||
x:Name="MoreInfoImage"
|
||||
Height="160"
|
||||
Source="{Binding Icon}" />
|
||||
</Grid>
|
||||
|
||||
<StackPanel Grid.Row="1">
|
||||
<TextBlock Margin="0, 10"
|
||||
FontSize="14"
|
||||
FontWeight="SemiBold"
|
||||
Text="{Binding Name}"
|
||||
TextTrimming="CharacterEllipsis" />
|
||||
|
||||
<TextBlock FontSize="12"
|
||||
Text="{Binding About}"
|
||||
TextWrapping="Wrap" />
|
||||
|
||||
<Border Margin="0,10,0,0"
|
||||
Opacity="1"
|
||||
HorizontalAlignment="Left"
|
||||
Background="{StaticResource Brush-Blue-01}"
|
||||
Visibility="{Binding BadgeUpdateVersionRequired, Converter={StaticResource EmptyStringToObject}}">
|
||||
<TextBlock Margin="2"
|
||||
FontSize="10"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Bottom"
|
||||
Foreground="{ThemeResource Brush-Main}"
|
||||
Text="{Binding BadgeUpdateVersionRequired}" />
|
||||
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation To="0" Duration="0:0:0.01"></animations:OpacityAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.4" Delay="0:0:0.2" SetInitialValueBeforeDelay="True"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation From="0, 20, 0" To="0" Duration="0:0:0.3" Delay="0:0:0.2"></animations:TranslationAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
</Border>
|
||||
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.4" Delay="0:0:0.2" SetInitialValueBeforeDelay="True"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation From="0, 20, 0" To="0" Duration="0:0:0.3" Delay="0:0:0.2"></animations:TranslationAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
<animations:ScaleAnimation From="0.5" To="1" Duration="0:0:0.3"></animations:ScaleAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation To="0" From="1" Duration="0:0:0.2"></animations:OpacityAnimation>
|
||||
<animations:ScaleAnimation To="0.5" From="1" Duration="0:0:0.2"></animations:ScaleAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
</Grid>
|
||||
</Canvas>
|
||||
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="WindowStates">
|
||||
<VisualState x:Name="NarrowState">
|
||||
<VisualState.StateTriggers>
|
||||
<AdaptiveTrigger MinWindowWidth="0" />
|
||||
</VisualState.StateTriggers>
|
||||
<VisualState.Setters>
|
||||
<Setter Target="HamburgerButton.Visibility" Value="Visible" />
|
||||
<Setter Target="ButtonsListView.Visibility" Value="Collapsed" />
|
||||
<Setter Target="OptionsListView.Visibility" Value="Visible" />
|
||||
<Setter Target="SearchGrid.Visibility" Value="Visible" />
|
||||
<Setter Target="TitleTextBlock.Visibility" Value="Visible" />
|
||||
<Setter Target="SamplePickerGrid.Visibility" Value="Collapsed"></Setter>
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
<VisualState x:Name="WideState">
|
||||
<VisualState.StateTriggers>
|
||||
<AdaptiveTrigger MinWindowWidth="700" />
|
||||
</VisualState.StateTriggers>
|
||||
<VisualState.Setters>
|
||||
<Setter Target="HamburgerButton.Visibility" Value="Collapsed" />
|
||||
<Setter Target="ButtonsListView.Visibility" Value="Visible" />
|
||||
<Setter Target="OptionsListView.Visibility" Value="Visible" />
|
||||
<Setter Target="SearchGrid.Visibility" Value="Visible" />
|
||||
<Setter Target="TitleTextBlock.Visibility" Value="Collapsed" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
</ResourceDictionary>
|
||||
|
|
@ -122,6 +122,9 @@
|
|||
<PackageReference Include="Microsoft.Services.Store.Engagement">
|
||||
<Version>10.1711.28001</Version>
|
||||
</PackageReference>
|
||||
<PackageReference Include="Microsoft.UI.Xaml">
|
||||
<Version>2.0.180916002-prerelease</Version>
|
||||
</PackageReference>
|
||||
<PackageReference Include="Monaco.Editor">
|
||||
<Version>0.6.0-alpha</Version>
|
||||
</PackageReference>
|
||||
|
|
@ -529,6 +532,8 @@
|
|||
<Content Include="SamplePages\InfiniteCanvas\InfiniteCanvas.bind" />
|
||||
<Content Include="SamplePages\PlannerTaskList\PlannerTaskListXaml.bind" />
|
||||
<Content Include="SamplePages\DataGrid\DataGridCode.bind" />
|
||||
<Compile Include="Shell.Search.cs" />
|
||||
<Compile Include="Shell.SamplePicker.cs" />
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
<Compile Include="App.xaml.cs">
|
||||
|
|
@ -552,7 +557,6 @@
|
|||
<Compile Include="Controls\AadAuthControl.xaml.cs">
|
||||
<DependentUpon>AadAuthControl.xaml</DependentUpon>
|
||||
</Compile>
|
||||
<Compile Include="Controls\ExtendedHamburgerMenu.cs" />
|
||||
<Compile Include="Controls\SampleAppMarkdownRenderer.cs" />
|
||||
<Compile Include="Controls\XamlCodeEditor.xaml.cs">
|
||||
<DependentUpon>XamlCodeEditor.xaml</DependentUpon>
|
||||
|
|
@ -938,11 +942,6 @@
|
|||
<Generator>MSBuild:Compile</Generator>
|
||||
<SubType>Designer</SubType>
|
||||
</Page>
|
||||
<Page Include="Controls\ExtendedHamburgerMenu.xaml">
|
||||
<Generator>MSBuild:Compile</Generator>
|
||||
<SubType>Designer</SubType>
|
||||
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
|
||||
</Page>
|
||||
<Page Include="Controls\AadAuthControl.xaml">
|
||||
<SubType>Designer</SubType>
|
||||
<Generator>MSBuild:Compile</Generator>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ namespace Microsoft.Toolkit.Uwp.SampleApp.Pages
|
|||
{
|
||||
base.OnNavigatedTo(e);
|
||||
|
||||
Shell.Current.SetTitles("About");
|
||||
Shell.Current.SetAppTitle("About");
|
||||
|
||||
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ namespace Microsoft.Toolkit.Uwp.SampleApp.Pages
|
|||
var keyChar = (char)args.VirtualKey;
|
||||
if (char.IsLetterOrDigit(keyChar))
|
||||
{
|
||||
var t = Shell.Current.StartSearch(keyChar.ToString());
|
||||
Shell.Current.StartSearch(keyChar.ToString());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@ namespace Microsoft.Toolkit.Uwp.SampleApp
|
|||
SidePaneState = _onlyDocumentation ? PaneState.Full : PaneState.Normal;
|
||||
}
|
||||
|
||||
Shell.Current.SetTitles($"{CurrentSample.CategoryName} > {CurrentSample.Name}");
|
||||
Shell.Current.SetAppTitle($"{CurrentSample.CategoryName} > {CurrentSample.Name}");
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,296 @@
|
|||
// Licensed to the .NET Foundation under one or more agreements.
|
||||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Numerics;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.Toolkit.Uwp.SampleApp.Pages;
|
||||
using Microsoft.Toolkit.Uwp.UI.Animations;
|
||||
using Microsoft.Toolkit.Uwp.UI.Controls;
|
||||
using Microsoft.Toolkit.Uwp.UI.Extensions;
|
||||
using Windows.Foundation.Metadata;
|
||||
using Windows.UI.Xaml;
|
||||
using Windows.UI.Xaml.Controls;
|
||||
using Windows.UI.Xaml.Media.Animation;
|
||||
|
||||
namespace Microsoft.Toolkit.Uwp.SampleApp
|
||||
{
|
||||
public sealed partial class Shell
|
||||
{
|
||||
private Sample _currentSample;
|
||||
private SampleCategory _selectedCategory;
|
||||
|
||||
private Sample CurrentSample
|
||||
{
|
||||
get
|
||||
{
|
||||
return _currentSample;
|
||||
}
|
||||
|
||||
set
|
||||
{
|
||||
_currentSample = value;
|
||||
var nop = SetHamburgerMenuSelection();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task SetHamburgerMenuSelection()
|
||||
{
|
||||
if (_currentSample != null)
|
||||
{
|
||||
var category = await Samples.GetCategoryBySample(_currentSample);
|
||||
|
||||
if ((NavView.MenuItemsSource as IEnumerable<SampleCategory>).Contains(category))
|
||||
{
|
||||
NavView.SelectedItem = category;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
NavView.SelectedItem = null;
|
||||
}
|
||||
}
|
||||
|
||||
private void HideSamplePicker()
|
||||
{
|
||||
SamplePickerGrid.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
|
||||
_selectedCategory = null;
|
||||
|
||||
var noop = SetHamburgerMenuSelection();
|
||||
}
|
||||
|
||||
private async void ShowSamplePicker(Sample[] samples = null)
|
||||
{
|
||||
if (samples == null && _currentSample != null)
|
||||
{
|
||||
var category = await Samples.GetCategoryBySample(_currentSample);
|
||||
if (category != null)
|
||||
{
|
||||
samples = category.Samples;
|
||||
}
|
||||
}
|
||||
|
||||
if (samples == null)
|
||||
{
|
||||
samples = (await Samples.GetCategoriesAsync()).FirstOrDefault()?.Samples;
|
||||
}
|
||||
|
||||
if (samples == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (SamplePickerGrid.Visibility == Windows.UI.Xaml.Visibility.Visible &&
|
||||
SamplePickerGridView.ItemsSource is Sample[] currentSamples &&
|
||||
currentSamples.Count() == samples.Count() &&
|
||||
currentSamples.Except(samples).Count() == 0)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
SamplePickerGridView.ItemsSource = samples;
|
||||
|
||||
if (_currentSample != null && samples.Contains(_currentSample))
|
||||
{
|
||||
SamplePickerGridView.SelectedItem = _currentSample;
|
||||
}
|
||||
else
|
||||
{
|
||||
SamplePickerGridView.SelectedItem = null;
|
||||
}
|
||||
|
||||
SamplePickerGrid.Visibility = Windows.UI.Xaml.Visibility.Visible;
|
||||
}
|
||||
|
||||
private void NavView_ItemInvoked(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
|
||||
{
|
||||
if (args.InvokedItem is SampleCategory category)
|
||||
{
|
||||
if (SamplePickerGrid.Visibility != Visibility.Collapsed && _selectedCategory == category)
|
||||
{
|
||||
// The NavView fires this event twice when the current selected item is clicked
|
||||
// This makes sure the event get's processed correctly
|
||||
var nop = Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => HideSamplePicker());
|
||||
}
|
||||
else
|
||||
{
|
||||
_selectedCategory = category;
|
||||
ShowSamplePicker(category.Samples);
|
||||
}
|
||||
}
|
||||
else if (args.IsSettingsInvoked)
|
||||
{
|
||||
HideSamplePicker();
|
||||
if (NavigationFrame.CurrentSourcePageType != typeof(About))
|
||||
{
|
||||
NavigateToSample(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void ContentShadow_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
|
||||
{
|
||||
HideSamplePicker();
|
||||
}
|
||||
|
||||
private void MoreInfoCanvas_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
|
||||
{
|
||||
HideMoreInfo();
|
||||
}
|
||||
|
||||
private void SamplePickerGridView_ChoosingItemContainer(ListViewBase sender, ChoosingItemContainerEventArgs args)
|
||||
{
|
||||
if (args.ItemContainer != null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
GridViewItem container = (GridViewItem)args.ItemContainer ?? new GridViewItem();
|
||||
container.Loaded += ContainerItem_Loaded;
|
||||
container.PointerEntered += ItemContainer_PointerEntered;
|
||||
container.PointerExited += ItemContainer_PointerExited;
|
||||
|
||||
args.ItemContainer = container;
|
||||
}
|
||||
|
||||
private void ContainerItem_Loaded(object sender, RoutedEventArgs e)
|
||||
{
|
||||
var itemsPanel = (ItemsWrapGrid)SamplePickerGridView.ItemsPanelRoot;
|
||||
var itemContainer = (GridViewItem)sender;
|
||||
itemContainer.Loaded -= this.ContainerItem_Loaded;
|
||||
|
||||
var button = itemContainer.FindDescendant<Button>();
|
||||
if (button != null)
|
||||
{
|
||||
button.Click -= MoreInfoClicked;
|
||||
button.Click += MoreInfoClicked;
|
||||
}
|
||||
|
||||
var itemIndex = SamplePickerGridView.IndexFromContainer(itemContainer);
|
||||
|
||||
var referenceIndex = itemsPanel.FirstVisibleIndex;
|
||||
|
||||
if (SamplePickerGridView.SelectedIndex >= 0)
|
||||
{
|
||||
referenceIndex = SamplePickerGridView.SelectedIndex;
|
||||
}
|
||||
|
||||
var relativeIndex = Math.Abs(itemIndex - referenceIndex);
|
||||
|
||||
if (itemContainer.Content != CurrentSample && itemIndex >= 0 && itemIndex >= itemsPanel.FirstVisibleIndex && itemIndex <= itemsPanel.LastVisibleIndex)
|
||||
{
|
||||
var staggerDelay = TimeSpan.FromMilliseconds(relativeIndex * 30);
|
||||
|
||||
var animationCollection = new AnimationCollection()
|
||||
{
|
||||
new OpacityAnimation() { From = 0, To = 1, Duration = TimeSpan.FromMilliseconds(400), Delay = staggerDelay, SetInitialValueBeforeDelay = true },
|
||||
new ScaleAnimation() { From = "0.9", To = "1", Duration = TimeSpan.FromMilliseconds(400), Delay = staggerDelay }
|
||||
};
|
||||
|
||||
VisualExtensions.SetNormalizedCenterPoint(itemContainer, "0.5");
|
||||
|
||||
animationCollection.StartAnimation(itemContainer);
|
||||
}
|
||||
}
|
||||
|
||||
private void ItemContainer_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
|
||||
{
|
||||
var panel = (sender as FrameworkElement).FindDescendant<DropShadowPanel>();
|
||||
if (panel != null)
|
||||
{
|
||||
var animation = new OpacityAnimation() { To = 0, Duration = TimeSpan.FromMilliseconds(1200) };
|
||||
animation.StartAnimation(panel);
|
||||
|
||||
var parentAnimation = new ScaleAnimation() { To = "1", Duration = TimeSpan.FromMilliseconds(1200) };
|
||||
parentAnimation.StartAnimation(panel.Parent as UIElement);
|
||||
}
|
||||
}
|
||||
|
||||
private void ItemContainer_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
|
||||
{
|
||||
if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
|
||||
{
|
||||
var panel = (sender as FrameworkElement).FindDescendant<DropShadowPanel>();
|
||||
if (panel != null)
|
||||
{
|
||||
panel.Visibility = Visibility.Visible;
|
||||
var animation = new OpacityAnimation() { To = 1, Duration = TimeSpan.FromMilliseconds(600) };
|
||||
animation.StartAnimation(panel);
|
||||
|
||||
var parentAnimation = new ScaleAnimation() { To = "1.1", Duration = TimeSpan.FromMilliseconds(600) };
|
||||
parentAnimation.StartAnimation(panel.Parent as UIElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void MoreInfoClicked(object sender, RoutedEventArgs e)
|
||||
{
|
||||
if (MoreInfoContent == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var button = (Button)sender;
|
||||
var sample = button.DataContext as Sample;
|
||||
|
||||
var container = button.FindAscendant<GridViewItem>();
|
||||
if (container == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var point = container.TransformToVisual(this).TransformPoint(new Windows.Foundation.Point(0, 0));
|
||||
|
||||
var x = point.X - ((MoreInfoContent.Width - container.ActualWidth) / 2);
|
||||
var y = point.Y - ((MoreInfoContent.Height - container.ActualHeight) / 2);
|
||||
|
||||
x = Math.Max(x, 10);
|
||||
x = Math.Min(x, ActualWidth - MoreInfoContent.Width - 10);
|
||||
|
||||
y = Math.Max(y, 10);
|
||||
y = Math.Min(y, ActualHeight - MoreInfoContent.Height - 10);
|
||||
|
||||
Canvas.SetLeft(MoreInfoContent, x);
|
||||
Canvas.SetTop(MoreInfoContent, y);
|
||||
|
||||
var centerX = (point.X + (container.ActualWidth / 2)) - x;
|
||||
var centerY = (point.Y + (container.ActualHeight / 2)) - y;
|
||||
|
||||
VisualExtensions.SetCenterPoint(MoreInfoContent, new Vector3((float)centerX, (float)centerY, 0).ToString());
|
||||
|
||||
MoreInfoContent.DataContext = sample;
|
||||
MoreInfoCanvas.Visibility = Visibility.Visible;
|
||||
}
|
||||
|
||||
private void HideMoreInfo()
|
||||
{
|
||||
if (MoreInfoImage != null && MoreInfoContent.DataContext != null)
|
||||
{
|
||||
ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("sample_icon", MoreInfoImage);
|
||||
}
|
||||
|
||||
MoreInfoCanvas.Visibility = Visibility.Collapsed;
|
||||
|
||||
if (MoreInfoImage != null && MoreInfoContent.DataContext != null)
|
||||
{
|
||||
var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("sample_icon");
|
||||
if (ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.Animation.DirectConnectedAnimationConfiguration"))
|
||||
{
|
||||
animation.Configuration = new DirectConnectedAnimationConfiguration();
|
||||
}
|
||||
|
||||
var t = SamplePickerGridView.TryStartConnectedAnimationAsync(animation, MoreInfoContent.DataContext, "SampleIcon");
|
||||
}
|
||||
|
||||
MoreInfoContent.DataContext = null;
|
||||
}
|
||||
|
||||
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
|
||||
{
|
||||
HideMoreInfo();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
// Licensed to the .NET Foundation under one or more agreements.
|
||||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using System;
|
||||
using System.Linq;
|
||||
using Microsoft.Toolkit.Uwp.UI.Extensions;
|
||||
using Windows.UI.Xaml;
|
||||
using Windows.UI.Xaml.Controls;
|
||||
using Windows.UI.Xaml.Input;
|
||||
|
||||
namespace Microsoft.Toolkit.Uwp.SampleApp
|
||||
{
|
||||
public sealed partial class Shell
|
||||
{
|
||||
internal void StartSearch(string startingText = null)
|
||||
{
|
||||
if (FocusManager.GetFocusedElement() == SearchBox.FindDescendant<TextBox>())
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
SearchBox.Focus(FocusState.Keyboard);
|
||||
|
||||
var currentSearchText = SearchBox.Text;
|
||||
|
||||
SearchBox.Text = string.Empty;
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(startingText))
|
||||
{
|
||||
SearchBox.Text = startingText;
|
||||
}
|
||||
else
|
||||
{
|
||||
SearchBox.Text = currentSearchText;
|
||||
}
|
||||
}
|
||||
|
||||
private async void UpdateSearchSuggestions(bool focus = false)
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(SearchBox.Text))
|
||||
{
|
||||
HideSamplePicker();
|
||||
return;
|
||||
}
|
||||
|
||||
var samples = (await Samples.FindSamplesByName(SearchBox.Text)).OrderBy(s => s.Name).ToArray();
|
||||
if (samples.Count() > 0)
|
||||
{
|
||||
ShowSamplePicker(samples);
|
||||
if (focus)
|
||||
{
|
||||
SamplePickerGridView.Focus(FocusState.Keyboard);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
HideSamplePicker();
|
||||
}
|
||||
}
|
||||
|
||||
private void SearchBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
|
||||
{
|
||||
UpdateSearchSuggestions();
|
||||
}
|
||||
|
||||
private void SearchBox_KeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
|
||||
{
|
||||
if (e.Key == Windows.System.VirtualKey.Down)
|
||||
{
|
||||
UpdateSearchSuggestions(true);
|
||||
}
|
||||
}
|
||||
|
||||
private void SearchBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
|
||||
{
|
||||
UpdateSearchSuggestions();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +1,211 @@
|
|||
<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.Shell"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controlsLocal="using:Microsoft.Toolkit.Uwp.SampleApp.Controls"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
|
||||
xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:winui="using:Microsoft.UI.Xaml.Controls"
|
||||
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
|
||||
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
|
||||
xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
|
||||
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
|
||||
extensions:StatusBarExtensions.IsVisible="False"
|
||||
extensions:TitleBarExtensions.BackgroundColor="{StaticResource Brand-Color}"
|
||||
extensions:TitleBarExtensions.ButtonBackgroundColor="{StaticResource Brand-Color}"
|
||||
extensions:TitleBarExtensions.ButtonForegroundColor="{StaticResource Titlebar-Foreground}"
|
||||
extensions:TitleBarExtensions.ForegroundColor="{StaticResource Titlebar-Foreground}"
|
||||
SizeChanged="Page_SizeChanged"
|
||||
mc:Ignorable="d">
|
||||
<Page.Resources>
|
||||
|
||||
<DataTemplate x:Key="HorizontalItemTemplate"
|
||||
<DataTemplate x:Key="CategoryTemplate"
|
||||
x:DataType="local:SampleCategory">
|
||||
<Grid>
|
||||
<TextBlock Grid.Column="1"
|
||||
VerticalAlignment="Center"
|
||||
<TextBlock VerticalAlignment="Center"
|
||||
FontFamily="Segoe UI"
|
||||
FontSize="15px"
|
||||
FontWeight="Normal"
|
||||
Text="{x:Bind Name}" />
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
|
||||
<DataTemplate x:Key="HorizontalOptionTemplate"
|
||||
x:DataType="local:Option">
|
||||
<Grid>
|
||||
<FontIcon Grid.Column="0"
|
||||
FontFamily="Segoe MDL2 Assets"
|
||||
FontSize="16"
|
||||
Glyph="{x:Bind Glyph}" />
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</Page.Resources>
|
||||
<Grid>
|
||||
<winui:NavigationView x:Name="NavView"
|
||||
Style="{StaticResource ToolkitNavViewStyle}"
|
||||
PaneDisplayMode="Top"
|
||||
MenuItemTemplate="{StaticResource CategoryTemplate}"
|
||||
ItemInvoked="NavView_ItemInvoked"
|
||||
SelectionFollowsFocus="Disabled"
|
||||
IsSettingsVisible="True">
|
||||
<winui:NavigationView.PaneFooter>
|
||||
<AutoSuggestBox x:Name="SearchBox"
|
||||
VerticalAlignment="Center"
|
||||
MinWidth="150"
|
||||
QueryIcon="Find"
|
||||
TextChanged="SearchBox_TextChanged"
|
||||
KeyDown="SearchBox_KeyDown"
|
||||
QuerySubmitted="SearchBox_QuerySubmitted" />
|
||||
</winui:NavigationView.PaneFooter>
|
||||
<Grid>
|
||||
<winui:ParallaxView x:Name="Parallax"
|
||||
VerticalShift="50">
|
||||
<Image Stretch="UniformToFill"
|
||||
Source="Assets/Photos/Backgrounds/HERO.jpg"/>
|
||||
</winui:ParallaxView>
|
||||
<Frame x:Name="NavigationFrame" />
|
||||
<Grid>
|
||||
<Border x:Name="ContentShadow"
|
||||
Tapped="ContentShadow_Tapped"
|
||||
Background="{ThemeResource BackingTint}"
|
||||
Visibility="{Binding Visibility, ElementName=SamplePickerGrid}">
|
||||
<interactivity:Interaction.Behaviors>
|
||||
<behaviors:Blur AutomaticallyStart="True"
|
||||
Delay="0"
|
||||
Value="2"
|
||||
Duration="0" />
|
||||
</interactivity:Interaction.Behaviors>
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation From="1" To="0" Duration="0:0:0.2"></animations:OpacityAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
</Border>
|
||||
|
||||
<controlsLocal:ExtendedHamburgerMenu x:Name="HamburgerMenu"
|
||||
ItemTemplate="{StaticResource HorizontalItemTemplate}"
|
||||
SamplePickerItemClick="HamburgerMenu_SamplePickerItemClick"
|
||||
OptionsItemClick="HamburgerMenu_OnOptionsItemClick"
|
||||
OptionsItemTemplate="{StaticResource HorizontalOptionTemplate}"
|
||||
PaneBackground="{ThemeResource Background-NavigationBar}"
|
||||
PaneForeground="{ThemeResource SystemBaseHighColor}"
|
||||
Style="{StaticResource HorizontalHamburgerMenu}">
|
||||
<Grid x:Name="SamplePickerGrid"
|
||||
x:DeferLoadStrategy="Lazy"
|
||||
Visibility="Collapsed"
|
||||
VerticalAlignment="Top">
|
||||
<controls:DropShadowPanel VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
ShadowOpacity="0.7"
|
||||
Color="Black"
|
||||
BlurRadius="10"
|
||||
VerticalAlignment="Bottom"
|
||||
Margin="0,0,0,-3">
|
||||
<Border Height="1" />
|
||||
</controls:DropShadowPanel>
|
||||
|
||||
<Grid>
|
||||
<Border x:Name="BackgroundBorder" />
|
||||
<Frame x:Name="NavigationFrame" />
|
||||
</Grid>
|
||||
</controlsLocal:ExtendedHamburgerMenu>
|
||||
<Border Background="{ThemeResource Menu-DropDown-Background}" />
|
||||
|
||||
<GridView x:Name="SamplePickerGridView"
|
||||
animations:ReorderGridAnimation.Duration="200"
|
||||
IsItemClickEnabled="True"
|
||||
ItemContainerStyle="{StaticResource SecondaryHamburgerMenuItemStyle}"
|
||||
ItemContainerTransitions="{x:Null}"
|
||||
ItemTemplate="{StaticResource SampleTemplate}"
|
||||
SelectionMode="Single"
|
||||
ItemClick="SamplePickerGridView_ItemClick"
|
||||
ChoosingItemContainer="SamplePickerGridView_ChoosingItemContainer"
|
||||
Transitions="{x:Null}">
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3" Delay="0:0:0.2" SetInitialValueBeforeDelay="True"></animations:OpacityAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
</GridView>
|
||||
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation From="0, -1000, 0" To="0" Duration="0:0:0.3"></animations:TranslationAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation From="1" To="0" Duration="0:0:0.5"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation To="0, -1000, 0" From="0" Duration="0:0:0.5"></animations:TranslationAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</winui:NavigationView>
|
||||
<Canvas x:Name="MoreInfoCanvas"
|
||||
Background="Transparent"
|
||||
Tapped="MoreInfoCanvas_Tapped"
|
||||
Visibility="Collapsed"
|
||||
Grid.RowSpan="2">
|
||||
|
||||
<Grid x:Name="MoreInfoContent"
|
||||
Width="260"
|
||||
Height="320"
|
||||
extensions:VisualExtensions.NormalizedCenterPoint="0.5">
|
||||
<Grid VerticalAlignment="Top">
|
||||
<controls:DropShadowPanel VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
ShadowOpacity="0.6"
|
||||
Color="Black"
|
||||
OffsetY="6"
|
||||
BlurRadius="60">
|
||||
<Border Background="{ThemeResource Menu-DropDown-Background}"
|
||||
Opacity="0.96">
|
||||
<interactivity:Interaction.Behaviors>
|
||||
<behaviors:Blur AutomaticallyStart="True"
|
||||
Delay="0"
|
||||
Value="3"
|
||||
Duration="0" />
|
||||
</interactivity:Interaction.Behaviors>
|
||||
</Border>
|
||||
</controls:DropShadowPanel>
|
||||
|
||||
<Grid Padding="10">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="160" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid Grid.Row="0"
|
||||
Background="{ThemeResource SampleIconBacking}">
|
||||
<Image Width="240"
|
||||
x:Name="MoreInfoImage"
|
||||
Height="160"
|
||||
Source="{Binding Icon}" />
|
||||
</Grid>
|
||||
|
||||
<StackPanel Grid.Row="1">
|
||||
<TextBlock Margin="0, 10"
|
||||
FontSize="14"
|
||||
FontWeight="SemiBold"
|
||||
Text="{Binding Name}"
|
||||
TextTrimming="CharacterEllipsis" />
|
||||
|
||||
<TextBlock FontSize="12"
|
||||
Text="{Binding About}"
|
||||
TextWrapping="Wrap" />
|
||||
|
||||
<Border Margin="0,10,0,0"
|
||||
Opacity="1"
|
||||
HorizontalAlignment="Left"
|
||||
Background="{StaticResource Brush-Blue-01}"
|
||||
Visibility="{Binding BadgeUpdateVersionRequired, Converter={StaticResource EmptyStringToObject}}">
|
||||
<TextBlock Margin="2"
|
||||
FontSize="10"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Bottom"
|
||||
Foreground="{ThemeResource Brush-Main}"
|
||||
Text="{Binding BadgeUpdateVersionRequired}" />
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation To="0" Duration="0:0:0.01"></animations:OpacityAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.4" Delay="0:0:0.2" SetInitialValueBeforeDelay="True"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation From="0, 20, 0" To="0" Duration="0:0:0.3" Delay="0:0:0.2"></animations:TranslationAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
</Border>
|
||||
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.4" Delay="0:0:0.2" SetInitialValueBeforeDelay="True"></animations:OpacityAnimation>
|
||||
<animations:TranslationAnimation From="0, 20, 0" To="0" Duration="0:0:0.3" Delay="0:0:0.2"></animations:TranslationAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<animations:Implicit.ShowAnimations>
|
||||
<animations:OpacityAnimation From="0" To="1" Duration="0:0:0.3"></animations:OpacityAnimation>
|
||||
<animations:ScaleAnimation From="0.5" To="1" Duration="0:0:0.3"></animations:ScaleAnimation>
|
||||
</animations:Implicit.ShowAnimations>
|
||||
<animations:Implicit.HideAnimations>
|
||||
<animations:OpacityAnimation To="0" From="1" Duration="0:0:0.2"></animations:OpacityAnimation>
|
||||
<animations:ScaleAnimation To="0.5" From="1" Duration="0:0:0.2"></animations:ScaleAnimation>
|
||||
</animations:Implicit.HideAnimations>
|
||||
</Grid>
|
||||
</Canvas>
|
||||
</Grid>
|
||||
</Page>
|
||||
|
|
@ -2,18 +2,12 @@
|
|||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using System;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.Toolkit.Uwp.Helpers;
|
||||
using Microsoft.Toolkit.Uwp.SampleApp.Pages;
|
||||
using Microsoft.Toolkit.Uwp.UI.Controls;
|
||||
using Microsoft.Toolkit.Uwp.UI.Extensions;
|
||||
using Windows.Foundation.Metadata;
|
||||
using Windows.UI.Core;
|
||||
using Windows.UI.Xaml;
|
||||
using Windows.UI.Xaml.Controls;
|
||||
using Windows.UI.Xaml.Media.Imaging;
|
||||
using Windows.UI.Xaml.Media.Animation;
|
||||
using Windows.UI.Xaml.Navigation;
|
||||
|
||||
namespace Microsoft.Toolkit.Uwp.SampleApp
|
||||
|
|
@ -26,27 +20,6 @@ namespace Microsoft.Toolkit.Uwp.SampleApp
|
|||
{
|
||||
InitializeComponent();
|
||||
Current = this;
|
||||
|
||||
var background = new Image()
|
||||
{
|
||||
Source = new BitmapImage(new Uri("ms-appx:///Assets/Photos/Backgrounds/HERO.jpg")),
|
||||
Stretch = Windows.UI.Xaml.Media.Stretch.UniformToFill
|
||||
};
|
||||
|
||||
if (ApiInformation.IsTypePresent("Windows.UI.Xaml.Controls.ParallaxView"))
|
||||
{
|
||||
_parallaxView = new ParallaxView()
|
||||
{
|
||||
VerticalShift = 50,
|
||||
Child = background
|
||||
};
|
||||
|
||||
BackgroundBorder.Child = _parallaxView;
|
||||
}
|
||||
else
|
||||
{
|
||||
BackgroundBorder.Child = background;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
|
|
@ -64,50 +37,52 @@ namespace Microsoft.Toolkit.Uwp.SampleApp
|
|||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Navigates to a Sample
|
||||
/// </summary>
|
||||
/// <param name="sample">Sample to navigate to</param>
|
||||
public void NavigateToSample(Sample sample)
|
||||
{
|
||||
NavigationFrame.Navigate(typeof(SampleController), sample);
|
||||
if (sample == null)
|
||||
{
|
||||
NavigationFrame.Navigate(typeof(About), null, new SuppressNavigationTransitionInfo());
|
||||
}
|
||||
else
|
||||
{
|
||||
NavigationFrame.Navigate(typeof(SampleController), sample);
|
||||
}
|
||||
}
|
||||
|
||||
public Task StartSearch(string startingText = "")
|
||||
/// <summary>
|
||||
/// Set app title
|
||||
/// </summary>
|
||||
/// <param name="title">Title to set</param>
|
||||
public void SetAppTitle(string title)
|
||||
{
|
||||
return HamburgerMenu.StartSearch(startingText);
|
||||
}
|
||||
|
||||
public void SetTitles(string title)
|
||||
{
|
||||
HamburgerMenu.Title = title;
|
||||
ApplicationViewExtensions.SetTitle(this, title);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Attach a ScrollViewer to Parallax hosting the backround image
|
||||
/// </summary>
|
||||
/// <param name="viewer">The ScrollViewer</param>
|
||||
public void AttachScroll(ScrollViewer viewer)
|
||||
{
|
||||
if (_parallaxView is ParallaxView parallax)
|
||||
{
|
||||
parallax.Source = viewer;
|
||||
}
|
||||
Parallax.Source = viewer;
|
||||
}
|
||||
|
||||
protected override async void OnNavigatedTo(NavigationEventArgs e)
|
||||
{
|
||||
base.OnNavigatedTo(e);
|
||||
NavigationFrame.Navigating += NavigationFrame_Navigating;
|
||||
NavigationFrame.Navigated += NavigationFrameOnNavigated;
|
||||
SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;
|
||||
NavView.BackRequested += NavView_BackRequested;
|
||||
|
||||
// Get list of samples
|
||||
var sampleCategories = (await Samples.GetCategoriesAsync()).ToList();
|
||||
var sampleCategories = await Samples.GetCategoriesAsync();
|
||||
NavView.MenuItemsSource = sampleCategories;
|
||||
|
||||
HamburgerMenu.ItemsSource = sampleCategories;
|
||||
|
||||
// Options
|
||||
HamburgerMenu.OptionsItemsSource = new[]
|
||||
{
|
||||
new Option { Glyph = "\xE10F", Name = "About", PageType = typeof(About) }
|
||||
};
|
||||
|
||||
ClearTitle();
|
||||
NavigationFrame.Navigate(typeof(About));
|
||||
SetAppTitle(string.Empty);
|
||||
NavigateToSample(null);
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(e?.Parameter?.ToString()))
|
||||
{
|
||||
|
|
@ -118,6 +93,18 @@ namespace Microsoft.Toolkit.Uwp.SampleApp
|
|||
NavigateToSample(targetSample);
|
||||
}
|
||||
}
|
||||
|
||||
// NavView goes into a weird size on load unless the window size changes
|
||||
// Needs a gentle push to update layout
|
||||
NavView.Loaded += (s, args) => NavView.InvalidateMeasure();
|
||||
}
|
||||
|
||||
private void NavView_BackRequested(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewBackRequestedEventArgs args)
|
||||
{
|
||||
if (NavigationFrame.CanGoBack)
|
||||
{
|
||||
NavigationFrame.GoBack();
|
||||
}
|
||||
}
|
||||
|
||||
private void NavigationFrame_Navigating(object sender, NavigatingCancelEventArgs navigationEventArgs)
|
||||
|
|
@ -126,69 +113,17 @@ namespace Microsoft.Toolkit.Uwp.SampleApp
|
|||
TrackingManager.TrackPage(name);
|
||||
}
|
||||
|
||||
private void ClearTitle()
|
||||
{
|
||||
SetTitles(string.Empty);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Called when [back requested] event is fired.
|
||||
/// </summary>
|
||||
/// <param name="sender">The sender.</param>
|
||||
/// <param name="backRequestedEventArgs">The <see cref="BackRequestedEventArgs"/> instance containing the event data.</param>
|
||||
private void OnBackRequested(object sender, BackRequestedEventArgs backRequestedEventArgs)
|
||||
{
|
||||
if (backRequestedEventArgs.Handled)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (NavigationFrame.CanGoBack)
|
||||
{
|
||||
NavigationFrame.GoBack();
|
||||
backRequestedEventArgs.Handled = true;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// When the frame has navigated this method is called.
|
||||
/// </summary>
|
||||
/// <param name="sender">The sender.</param>
|
||||
/// <param name="navigationEventArgs">The <see cref="NavigationEventArgs"/> instance containing the event data.</param>
|
||||
private void NavigationFrameOnNavigated(object sender, NavigationEventArgs navigationEventArgs)
|
||||
{
|
||||
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = NavigationFrame.CanGoBack
|
||||
? AppViewBackButtonVisibility.Visible
|
||||
: AppViewBackButtonVisibility.Collapsed;
|
||||
NavView.IsBackEnabled = NavigationFrame.CanGoBack;
|
||||
|
||||
CurrentSample = navigationEventArgs.Parameter as Sample;
|
||||
}
|
||||
|
||||
private void HamburgerMenu_OnOptionsItemClick(object sender, ItemClickEventArgs e)
|
||||
{
|
||||
var option = e.ClickedItem as Option;
|
||||
if (option == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (NavigationFrame.CurrentSourcePageType != option.PageType)
|
||||
{
|
||||
NavigationFrame.Navigate(option.PageType);
|
||||
}
|
||||
|
||||
HamburgerMenu.IsPaneOpen = false;
|
||||
|
||||
var expanders = HamburgerMenu.FindDescendants<Expander>();
|
||||
foreach (var expander in expanders)
|
||||
{
|
||||
expander.IsExpanded = false;
|
||||
}
|
||||
}
|
||||
|
||||
private void HamburgerMenu_SamplePickerItemClick(object sender, ItemClickEventArgs e)
|
||||
private void SamplePickerGridView_ItemClick(object sender, ItemClickEventArgs e)
|
||||
{
|
||||
HideSamplePicker();
|
||||
NavigateToSample(e.ClickedItem as Sample);
|
||||
}
|
||||
|
||||
private UIElement _parallaxView;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,14 +3,11 @@
|
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="using:Microsoft.Toolkit.Uwp.SampleApp.Controls"
|
||||
xmlns:toolkitControls="using:Microsoft.Toolkit.Uwp.UI.Controls"
|
||||
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
|
||||
xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
|
||||
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
|
||||
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
|
||||
xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp">
|
||||
xmlns:winui="using:Microsoft.UI.Xaml.Controls">
|
||||
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceDictionary Source="ms-appx:///Controls/ExtendedHamburgerMenu.xaml" />
|
||||
<ResourceDictionary Source="ms-appx:///Controls/CodeRenderer.xaml" />
|
||||
<ResourceDictionary Source="ms-appx:///Styles/Custom/PivotHeaderItemUnderlineStyle.xaml" />
|
||||
<ResourceDictionary Source="ms-appx:///Styles/GithubIcon.xaml" />
|
||||
|
|
@ -995,4 +992,429 @@
|
|||
<Setter Property="FontSize" Value="20" />
|
||||
<Setter Property="FontWeight" Value="Bold" />
|
||||
</Style>
|
||||
|
||||
<Style x:Key="ToolkitNavViewStyle" TargetType="winui:NavigationView">
|
||||
<Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
|
||||
<Setter Property="IsTabStop" Value="False" />
|
||||
<Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="winui:NavigationView">
|
||||
<Grid x:Name="RootGrid">
|
||||
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="DisplayModeGroup">
|
||||
<VisualState x:Name="Compact" />
|
||||
|
||||
<VisualState x:Name="Expanded">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
<VisualState x:Name="Minimal">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="HeaderContent.Margin" Value="48,5,0,0" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
<VisualState x:Name="MinimalWithBackButton">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="HeaderContent.Margin" Value="104,5,0,0" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="TogglePaneGroup">
|
||||
<VisualState x:Name="TogglePaneButtonVisible" />
|
||||
<VisualState x:Name="TogglePaneButtonCollapsed">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="PaneContentGridToggleButtonRow.Height" Value="4" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="HeaderGroup">
|
||||
<VisualState x:Name="HeaderVisible" />
|
||||
<VisualState x:Name="HeaderCollapsed">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="HeaderContent.Visibility" Value="Collapsed" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="SettingsGroup">
|
||||
<VisualState x:Name="SettingsVisible" />
|
||||
<VisualState x:Name="SettingsCollapsed">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed" />
|
||||
<Setter Target="SettingsTopNavPaneItem.Visibility" Value="Collapsed" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="AutoSuggestGroup">
|
||||
<VisualState x:Name="AutoSuggestBoxVisible" />
|
||||
<VisualState x:Name="AutoSuggestBoxCollapsed">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="AutoSuggestArea.Visibility" Value="Collapsed" />
|
||||
<Setter Target="TopPaneAutoSuggestArea.Visibility" Value="Collapsed" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="PaneStateGroup">
|
||||
<VisualState x:Name="NotClosedCompact" />
|
||||
<VisualState x:Name="ClosedCompact">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed" />
|
||||
<Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="PaneStateListSizeGroup">
|
||||
<VisualState x:Name="ListSizeFull" />
|
||||
<VisualState x:Name="ListSizeCompact">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="MenuItemsHost.HorizontalAlignment" Value="Left" />
|
||||
<!-- This is essentially a TemplateBinding: -->
|
||||
<Setter Target="MenuItemsHost.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
|
||||
<Setter Target="SettingsNavPaneItem.HorizontalAlignment" Value="Left" />
|
||||
<Setter Target="SettingsNavPaneItem.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
|
||||
<Setter Target="PaneTitleTextBlock.Visibility" Value="Collapsed" />
|
||||
<Setter Target="PaneHeaderContentBorder.Visibility" Value="Collapsed" />
|
||||
<Setter Target="PaneCustomContentBorder.HorizontalAlignment" Value="Left" />
|
||||
<Setter Target="PaneCustomContentBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
|
||||
<Setter Target="FooterContentBorder.HorizontalAlignment" Value="Left" />
|
||||
<Setter Target="FooterContentBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="TitleBarVisibilityGroup">
|
||||
<VisualState x:Name="TitleBarVisible" />
|
||||
<VisualState x:Name="TitleBarCollapsed">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="PaneButtonGrid.Margin" Value="0,32,0,0" />
|
||||
<Setter Target="PaneContentGrid.Margin" Value="0,32,0,0" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="OverflowLabelGroup">
|
||||
<VisualState x:Name="OverflowButtonWithLabel" />
|
||||
<VisualState x:Name="OverflowButtonNoLabel">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="TopNavOverflowButton.Style" Value="{ThemeResource NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop}" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
<VisualStateGroup x:Name="BackButtonGroup">
|
||||
<VisualState x:Name="BackButtonVisible" />
|
||||
<VisualState x:Name="BackButtonCollapsed">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="BackButtonPlaceholderOnTopNav.Width" Value="0" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
|
||||
</VisualStateGroup>
|
||||
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
|
||||
<Grid
|
||||
x:Name="PaneToggleButtonGrid"
|
||||
Margin="0,0,0,8"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"
|
||||
Canvas.ZIndex="100">
|
||||
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid x:Name="ButtonHolderGrid" Grid.Row="1">
|
||||
<Button x:Name="NavigationViewBackButton"
|
||||
Height="48"
|
||||
Style="{StaticResource NavigationBackButtonNormalStyle}"
|
||||
VerticalAlignment="Center"
|
||||
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.BackButtonVisibility}"
|
||||
IsEnabled="{TemplateBinding IsBackEnabled}"/>
|
||||
|
||||
<Button
|
||||
x:Name="TogglePaneButton"
|
||||
Style="{TemplateBinding PaneToggleButtonStyle}"
|
||||
AutomationProperties.LandmarkType="Navigation"
|
||||
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonVisibility}"
|
||||
VerticalAlignment="Center"/>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<StackPanel
|
||||
x:Name="TopNavArea"
|
||||
Background="{ThemeResource Background-NavigationBar}"
|
||||
Grid.Row="0"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Top"
|
||||
Canvas.ZIndex="1">
|
||||
|
||||
<Grid x:Name="TopNavTopPadding"
|
||||
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"
|
||||
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}"/>
|
||||
|
||||
<Grid x:Name="TopNavGrid"
|
||||
Height="48"
|
||||
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" MinWidth="48" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Grid
|
||||
x:Name="TopNavLeftPadding"
|
||||
Grid.Column="1"
|
||||
Width="0"/>
|
||||
|
||||
<ContentControl
|
||||
x:Name="PaneHeaderOnTopPane"
|
||||
IsTabStop="False"
|
||||
VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Grid.Column="2"/>
|
||||
|
||||
<!-- Top nav list -->
|
||||
<winui:NavigationViewList AutomationProperties.LandmarkType="Navigation" x:Name="TopNavMenuItemsHost" Grid.Column="3" SelectionMode="Single" IsItemClickEnabled="True" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}">
|
||||
<ListView.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<ItemsStackPanel Orientation="Horizontal" />
|
||||
</ItemsPanelTemplate>
|
||||
</ListView.ItemsPanel>
|
||||
<ListView.ItemContainerTransitions>
|
||||
<TransitionCollection />
|
||||
</ListView.ItemContainerTransitions>
|
||||
</winui:NavigationViewList>
|
||||
|
||||
<Button
|
||||
x:Name="TopNavOverflowButton"
|
||||
Grid.Column="4"
|
||||
Content="More"
|
||||
FontFamily="Segoe UI"
|
||||
FontSize="15px"
|
||||
FontWeight="Normal"
|
||||
VerticalAlignment="Center"
|
||||
Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}"
|
||||
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OverflowButtonVisibility}">
|
||||
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="Bottom">
|
||||
<Flyout.FlyoutPresenterStyle>
|
||||
<Style TargetType="FlyoutPresenter">
|
||||
<Setter Property="Padding" Value="0,8" />
|
||||
<!-- Set negative top margin to make the flyout align exactly with the button -->
|
||||
<Setter Property="Margin" Value="0,-4,0,0" />
|
||||
</Style>
|
||||
</Flyout.FlyoutPresenterStyle>
|
||||
<winui:NavigationViewList x:Name="TopNavMenuItemsOverflowHost" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" SingleSelectionFollowsFocus="False" IsItemClickEnabled="True">
|
||||
<ListView.ItemContainerTransitions>
|
||||
<TransitionCollection />
|
||||
</ListView.ItemContainerTransitions>
|
||||
</winui:NavigationViewList>
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
</Button>
|
||||
|
||||
<ContentControl
|
||||
x:Name="PaneCustomContentOnTopPane"
|
||||
IsTabStop="False"
|
||||
VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Grid.Column="5"/>
|
||||
|
||||
<Grid
|
||||
x:Name="TopPaneAutoSuggestArea"
|
||||
Height="{ThemeResource NavigationViewTopPaneHeight}"
|
||||
Grid.Column="6">
|
||||
|
||||
<ContentControl
|
||||
x:Name="TopPaneAutoSuggestBoxPresenter"
|
||||
Margin="12,0,12,0"
|
||||
MinWidth="200"
|
||||
IsTabStop="False"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
VerticalContentAlignment="Center"/>
|
||||
</Grid>
|
||||
|
||||
<ContentControl
|
||||
x:Name="PaneFooterOnTopPane"
|
||||
IsTabStop="False"
|
||||
VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Grid.Column="7" />
|
||||
<winui:NavigationViewItem x:Name="SettingsTopNavPaneItem" Style="{ThemeResource NavigationViewSettingsItemStyleWhenOnTopPane}" Grid.Column="8" Icon="Home" />
|
||||
|
||||
</Grid>
|
||||
|
||||
<Border Background="{ThemeResource Border-NavigationBar}"
|
||||
Height="1" />
|
||||
|
||||
<Border
|
||||
x:Name="TopNavContentOverlayAreaGrid"
|
||||
Child="{TemplateBinding ContentOverlay}" />
|
||||
</StackPanel>
|
||||
|
||||
<SplitView
|
||||
x:Name="RootSplitView"
|
||||
Background="{TemplateBinding Background}"
|
||||
CompactPaneLength="{TemplateBinding CompactPaneLength}"
|
||||
DisplayMode="Inline"
|
||||
IsPaneOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
|
||||
IsTabStop="False"
|
||||
OpenPaneLength="{TemplateBinding OpenPaneLength}"
|
||||
PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}"
|
||||
|
||||
Grid.Row="1">
|
||||
|
||||
<SplitView.Pane>
|
||||
<Grid
|
||||
x:Name="PaneContentGrid"
|
||||
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="0" />
|
||||
<!-- above button margin + back button space -->
|
||||
<RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="8" />
|
||||
<!-- above list margin -->
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="8" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<Grid x:Name="ContentPaneTopPadding"
|
||||
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"/>
|
||||
|
||||
<Grid Grid.Row="2" Height="{StaticResource PaneToggleButtonHeight}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<TextBlock
|
||||
x:Name="PaneTitleTextBlock"
|
||||
Grid.Column="0"
|
||||
Text="{TemplateBinding PaneTitle}"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Center"
|
||||
Style="{StaticResource NavigationViewItemHeaderTextStyle}"/>
|
||||
|
||||
<ContentControl
|
||||
x:Name="PaneHeaderContentBorder"
|
||||
IsTabStop="False"
|
||||
VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Grid.Column="1" />
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
x:Name="AutoSuggestArea"
|
||||
Grid.Row="3"
|
||||
Height="{ThemeResource NavigationViewTopPaneHeight}"
|
||||
VerticalAlignment="Center">
|
||||
|
||||
<ContentControl
|
||||
x:Name="PaneAutoSuggestBoxPresenter"
|
||||
Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}"
|
||||
IsTabStop="False"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
VerticalContentAlignment="Center"/>
|
||||
|
||||
<Button
|
||||
x:Name="PaneAutoSuggestButton"
|
||||
Visibility="Collapsed"
|
||||
Style="{ThemeResource NavigationViewPaneSearchButtonStyle}"
|
||||
Width="{TemplateBinding CompactPaneLength}"/>
|
||||
</Grid>
|
||||
|
||||
<ContentControl
|
||||
x:Name="PaneCustomContentBorder"
|
||||
IsTabStop="False"
|
||||
VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Grid.Row="4" />
|
||||
|
||||
<!-- Left nav list -->
|
||||
<winui:NavigationViewList x:Name="MenuItemsHost" Grid.Row="6" SingleSelectionFollowsFocus="False" Margin="0,0,0,20" SelectionMode="Single" IsItemClickEnabled="True" HorizontalAlignment="Stretch" SelectedItem="{TemplateBinding SelectedItem}" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" />
|
||||
|
||||
<ContentControl
|
||||
x:Name="FooterContentBorder"
|
||||
IsTabStop="False"
|
||||
VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Grid.Row="7" />
|
||||
<winui:NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="8" Icon="Setting" />
|
||||
</Grid>
|
||||
</SplitView.Pane>
|
||||
|
||||
<SplitView.Content>
|
||||
<Grid x:Name="ContentGrid">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<ContentControl
|
||||
x:Name="HeaderContent"
|
||||
MinHeight="{StaticResource PaneToggleButtonHeight}"
|
||||
IsTabStop="False"
|
||||
Content="{TemplateBinding Header}"
|
||||
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
||||
VerticalContentAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Style="{StaticResource NavigationViewTitleHeaderContentControlTextStyle}"/>
|
||||
|
||||
<ContentPresenter
|
||||
AutomationProperties.LandmarkType="Main"
|
||||
Grid.Row="1"
|
||||
Content="{TemplateBinding Content}"/>
|
||||
</Grid>
|
||||
</SplitView.Content>
|
||||
</SplitView>
|
||||
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
</ResourceDictionary>
|
||||
Загрузка…
Ссылка в новой задаче