-
Notifications
You must be signed in to change notification settings - Fork 631
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New tile carousel on home page + tiles for community & accessibility (#…
…1131) * Added toolkit tile * Created new folder for tile images improves organization * Fixed toolkit link on the datagrid page * Added a carousel like feature + new Accessibility tile * Fixed the name of the Accessibility tile too long otherwise * Adding tile gallery * Handling merge conflict --------- Co-authored-by: Niels Laute <niels.laute@live.nl>
- Loading branch information
1 parent
1b747f9
commit 0d4fc10
Showing
13 changed files
with
276 additions
and
25 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| <!-- Copyright (c) Microsoft Corporation and Contributors. --> | ||
| <!-- Licensed under the MIT License. --> | ||
|
|
||
| <UserControl | ||
| x:Class="AppUIBasics.Controls.TileGallery" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:local="using:AppUIBasics.Controls" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| mc:Ignorable="d"> | ||
| <UserControl.Resources> | ||
| <Style x:Key="ScrollButtonStyle" TargetType="Button"> | ||
| <Setter Property="Background" Value="{ThemeResource FlipViewNextPreviousButtonBackground}" /> | ||
| <Setter Property="BackgroundSizing" Value="InnerBorderEdge" /> | ||
| <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" /> | ||
| <Setter Property="BorderBrush" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrush}" /> | ||
| <Setter Property="BorderThickness" Value="{ThemeResource FlipViewButtonBorderThemeThickness}" /> | ||
| <Setter Property="Padding" Value="0" /> | ||
| <Setter Property="HorizontalAlignment" Value="Left" /> | ||
| <Setter Property="VerticalAlignment" Value="Center" /> | ||
| <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> | ||
| <Setter Property="FontWeight" Value="Normal" /> | ||
| <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> | ||
| <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" /> | ||
| <Setter Property="FocusVisualMargin" Value="-3" /> | ||
| <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" /> | ||
| <Setter Property="Template"> | ||
| <Setter.Value> | ||
| <ControlTemplate TargetType="Button"> | ||
| <ContentPresenter | ||
| x:Name="ContentPresenter" | ||
| Padding="{TemplateBinding Padding}" | ||
| HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" | ||
| VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" | ||
| AnimatedIcon.State="Normal" | ||
| AutomationProperties.AccessibilityView="Raw" | ||
| Background="{TemplateBinding Background}" | ||
| BackgroundSizing="{TemplateBinding BackgroundSizing}" | ||
| BorderBrush="{TemplateBinding BorderBrush}" | ||
| BorderThickness="{TemplateBinding BorderThickness}" | ||
| Content="{TemplateBinding Content}" | ||
| ContentTemplate="{TemplateBinding ContentTemplate}" | ||
| ContentTransitions="{TemplateBinding ContentTransitions}" | ||
| CornerRadius="{TemplateBinding CornerRadius}"> | ||
| <ContentPresenter.BackgroundTransition> | ||
| <BrushTransition Duration="0:0:0.083" /> | ||
| </ContentPresenter.BackgroundTransition> | ||
|
|
||
| <VisualStateManager.VisualStateGroups> | ||
| <VisualStateGroup x:Name="CommonStates"> | ||
| <VisualState x:Name="Normal" /> | ||
|
|
||
| <VisualState x:Name="PointerOver"> | ||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPointerOver}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPointerOver}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPointerOver}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| <VisualState.Setters> | ||
| <Setter Target="ContentPresenter.(AnimatedIcon.State)" Value="PointerOver" /> | ||
| </VisualState.Setters> | ||
| </VisualState> | ||
|
|
||
| <VisualState x:Name="Pressed"> | ||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBackgroundPressed}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousButtonBorderBrushPressed}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewNextPreviousArrowForegroundPressed}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| <VisualState.Setters> | ||
| <Setter Target="ContentPresenter.(AnimatedIcon.State)" Value="Pressed" /> | ||
| </VisualState.Setters> | ||
| </VisualState> | ||
|
|
||
| <VisualState x:Name="Disabled"> | ||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| <VisualState.Setters> | ||
| <!-- DisabledVisual Should be handled by the control, not the animated icon. --> | ||
| <Setter Target="ContentPresenter.(AnimatedIcon.State)" Value="Normal" /> | ||
| </VisualState.Setters> | ||
| </VisualState> | ||
| </VisualStateGroup> | ||
| </VisualStateManager.VisualStateGroups> | ||
| </ContentPresenter> | ||
| </ControlTemplate> | ||
| </Setter.Value> | ||
| </Setter> | ||
| </Style> | ||
| </UserControl.Resources> | ||
| <Grid> | ||
| <ScrollViewer | ||
| x:Name="scroller" | ||
| HorizontalScrollBarVisibility="Hidden" | ||
| HorizontalScrollMode="Enabled" | ||
| SizeChanged="scroller_SizeChanged" | ||
| VerticalScrollMode="Disabled" | ||
| ViewChanging="scroller_ViewChanging"> | ||
| <Grid> | ||
| <StackPanel Orientation="Horizontal" Spacing="12"> | ||
|
|
||
| <local:HeaderTile | ||
| Title="Getting Started" | ||
| Link="https://docs.microsoft.com/windows/apps/get-started/" | ||
| Source="/Assets/HomeHeaderTiles/gettingStarted.png" /> | ||
| <local:HeaderTile | ||
| Title="Windows Design" | ||
| Link="https://docs.microsoft.com/windows/apps/design/" | ||
| Source="/Assets/HomeHeaderTiles/style-1x.png" /> | ||
| <local:HeaderTile | ||
| Title="GitHub Repo" | ||
| Link="https://github.com/microsoft/microsoft-ui-xaml" | ||
| Source="/Assets/HomeHeaderTiles/githubTile.png" /> | ||
| <local:HeaderTile | ||
| Title="Template Studio" | ||
| Link="https://marketplace.visualstudio.com/items?itemName=TemplateStudio.TemplateStudioForWinUICs" | ||
| Source="/Assets/HomeHeaderTiles/template_studio.png" /> | ||
| <local:HeaderTile | ||
| Title="Community Toolkit" | ||
| Link="https://apps.microsoft.com/store/detail/windows-community-toolkit-sample-app/9NBLGGH4TLCQ" | ||
| Source="/Assets/HomeHeaderTiles/toolkit.png" /> | ||
| <local:HeaderTile | ||
| Title="Accessibility" | ||
| Link="https://learn.microsoft.com/windows/apps/design/accessibility/accessibility" | ||
| Source="/Assets/HomeHeaderTiles/accessibility_tile.png" /> | ||
| </StackPanel> | ||
| </Grid> | ||
| </ScrollViewer> | ||
| <Button | ||
| x:Name="ScrollBackBtn" | ||
| Width="16" | ||
| Height="38" | ||
| Margin="2,-48,0,0" | ||
| AutomationProperties.Name="Scroll left" | ||
| Click="ScrollBackBtn_Click" | ||
| Style="{StaticResource ScrollButtonStyle}" | ||
| ToolTipService.ToolTip="Scroll left" | ||
| Visibility="Collapsed"> | ||
| <FontIcon FontSize="{ThemeResource FlipViewButtonFontSize}" Glyph="" /> | ||
| </Button> | ||
| <Button | ||
| x:Name="ScrollForwardBtn" | ||
| Width="16" | ||
| Height="38" | ||
| Margin="0,-48,2,0" | ||
| HorizontalAlignment="Right" | ||
| AutomationProperties.Name="Scroll right" | ||
| Click="ScrollForwardBtn_Click" | ||
| Style="{StaticResource ScrollButtonStyle}" | ||
| ToolTipService.ToolTip="Scroll right"> | ||
| <FontIcon FontSize="{ThemeResource FlipViewButtonFontSize}" Glyph="" /> | ||
| </Button> | ||
| </Grid> | ||
| </UserControl> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| // Copyright (c) Microsoft Corporation and Contributors. | ||
| // Licensed under the MIT License. | ||
|
|
||
| using System; | ||
| using System.Collections.Generic; | ||
| using System.IO; | ||
| using System.Linq; | ||
| using System.Runtime.InteropServices.WindowsRuntime; | ||
| using Microsoft.UI.Xaml; | ||
| using Microsoft.UI.Xaml.Controls; | ||
| using Microsoft.UI.Xaml.Controls.Primitives; | ||
| using Microsoft.UI.Xaml.Data; | ||
| using Microsoft.UI.Xaml.Input; | ||
| using Microsoft.UI.Xaml.Media; | ||
| using Microsoft.UI.Xaml.Navigation; | ||
| using Windows.Foundation; | ||
| using Windows.Foundation.Collections; | ||
|
|
||
| namespace AppUIBasics.Controls | ||
| { | ||
| public sealed partial class TileGallery : UserControl | ||
| { | ||
| public TileGallery() | ||
| { | ||
| this.InitializeComponent(); | ||
| } | ||
|
|
||
| private void scroller_ViewChanging(object sender, ScrollViewerViewChangingEventArgs e) | ||
| { | ||
| if (e.FinalView.HorizontalOffset < 1) | ||
| { | ||
| ScrollBackBtn.Visibility = Visibility.Collapsed; | ||
| } | ||
| else if (e.FinalView.HorizontalOffset > 1) | ||
| { | ||
| ScrollBackBtn.Visibility = Visibility.Visible; | ||
| } | ||
|
|
||
| if (e.FinalView.HorizontalOffset > scroller.ScrollableWidth - 1) | ||
| { | ||
| ScrollForwardBtn.Visibility = Visibility.Collapsed; | ||
| } | ||
| else if (e.FinalView.HorizontalOffset < scroller.ScrollableWidth - 1) | ||
| { | ||
| ScrollForwardBtn.Visibility = Visibility.Visible; | ||
| } | ||
| } | ||
|
|
||
| private void ScrollBackBtn_Click(object sender, RoutedEventArgs e) | ||
| { | ||
| scroller.ChangeView(scroller.HorizontalOffset - scroller.ViewportWidth, null, null); | ||
| } | ||
|
|
||
| private void ScrollForwardBtn_Click(object sender, RoutedEventArgs e) | ||
| { | ||
| scroller.ChangeView(scroller.HorizontalOffset + scroller.ViewportWidth, null, null); | ||
| } | ||
|
|
||
| private void scroller_SizeChanged(object sender, SizeChangedEventArgs e) | ||
| { | ||
| UpdateScrollButtonsVisibility(); | ||
| } | ||
|
|
||
| private void UpdateScrollButtonsVisibility() | ||
| { | ||
| if (scroller.ScrollableWidth > 0) | ||
| { | ||
| ScrollForwardBtn.Visibility = Visibility.Visible; | ||
| } | ||
| else | ||
| { | ||
| ScrollForwardBtn.Visibility = Visibility.Collapsed; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -94,5 +94,4 @@ | |
| </Page> | ||
| </ItemGroup> | ||
| <Import Project="ContentIncludes.props" /> | ||
|
|
||
| </Project> | ||