Merged PR 2242120: Merge master to future
This commit is contained in:
Danielle Neuberger
Коммит
266e988ed1
17
README.md
17
README.md
|
|
@ -1,14 +1,14 @@
|
|||
# Windows UI Dev Labs
|
||||
# Windows Composition Samples
|
||||
|
||||
Welcome to the Windows UI Dev Labs repository! This is the place for the latest code samples, demos, and developer feedback around building beautiful and engaging Universal Windows Platform apps. This repo focuses on the platform building blocks that make up the [Fluent Design System](https://fluent.microsoft.com/). If you’re not quite ready for the code, check out the gallery app in the store [here](https://www.microsoft.com/en-us/store/p/windows-ui-dev-labs-sample-gallery/9pp1sb5wgnww).
|
||||
Welcome to the Windows Composition Samples repository! This is the place for the latest code samples, demos, and developer feedback around building beautiful and engaging Universal Windows Platform apps. This repo focuses on the platform building blocks that make up the [Fluent Design System](https://fluent.microsoft.com/), with emphasis on creating UI using APIs in both the [Windows.UI.Xaml](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.aspx) and [Windows.UI.Composition](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.composition.aspx) namespaces. The code samples and demos in this repo are targeted at developers who are interested in experimenting, building, and providing feedback on the latest flighting Windows UI APIs.
|
||||
|
||||
The code samples and demos in this repo are targeted at developers who are interested in experimenting, building, and providing feedback on the latest flighting Windows UI APIs. We are focused on creating UI using APIs in both the [Windows.UI.Xaml](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.aspx) and [Windows.UI.Composition](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.composition.aspx) namespaces. If you’re looking to get started with more simple UI concepts, check out the [XamlUIBasics](https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/XamlUIBasics).
|
||||
If you’re not quite ready for the code, [check out the app in the Store](https://www.microsoft.com/store/productId/9N1H8CZHBPXB).
|
||||
|
||||
Inside this repo, you’ll find the following additional info:
|
||||
|
||||
* [Getting started building and deploying readme](STARTUP.md)
|
||||
* [Info on Questions and Contributing](CONTRIBUTING.md)
|
||||
* [Additional Resources & FAQ wiki](https://github.com/Microsoft/WindowsUIDevLabs/wiki)
|
||||
* [Additional Resources & FAQ wiki](https://github.com/Microsoft/WindowsCompositionSamples/wiki)
|
||||
|
||||
If you are a developer getting familiar with the Windows UI platform, want to build beautiful and innovative UI experiences, and don't mind a few bugs here and there, then this is the place for you!
|
||||
|
||||
|
|
@ -44,6 +44,13 @@ We encourage and welcome community involvement and contribution in this project.
|
|||
|
||||
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
|
||||
|
||||
## Related Projects
|
||||
|
||||
If instead you’re looking to get started with higher-level UI concepts, check out related projects:
|
||||
|
||||
* [XamlUIBasics](https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/XamlUIBasics) for XAML controls-based UI
|
||||
* [Windows UI Library (WinUI)](https://docs.microsoft.com/en-us/uwp/toolkits/winui/) NuGet packages for XAML controls
|
||||
|
||||
## Privacy
|
||||
|
||||
We collect basic usage data so we can continually work to improve the samples in this repo. To opt out, comment out or remove the following line of code from SampleGallery\Shared\AppTelemetryClient.cs :
|
||||
|
|
@ -53,4 +60,4 @@ A detailed privacy agreement can be found [here](https://go.microsoft.com/fwlink
|
|||
|
||||
## Images
|
||||
|
||||
The images used in this application are sourced from a variety of Microsoft employees, but we'd like to specially thank Conroy for his contribution. [See more of his content here.]("https://www.instagram.com/conroy.williamson/">).
|
||||
The images used in this application are sourced from a variety of Microsoft employees, but we'd like to specially thank Conroy for his contribution. [See more of his content here.](https://www.instagram.com/conroy.williamson/)
|
||||
|
|
|
|||
|
|
@ -10,76 +10,68 @@
|
|||
Loaded="SamplePage_Loaded"
|
||||
SizeChanged="Page_SizeChanged">
|
||||
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
|
||||
<Grid>
|
||||
<ScrollViewer x:Name="MyScrollviewer">
|
||||
<Grid>
|
||||
<GridView x:Name="gridView" Margin="0,300,0,0">
|
||||
<GridView.ItemTemplate>
|
||||
<DataTemplate x:DataType="data:Thumbnail">
|
||||
<Image Source="{x:Bind ImageUrl}"
|
||||
Width="200"
|
||||
Height="200"
|
||||
Margin="4"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Stretch="UniformToFill"/>
|
||||
</DataTemplate>
|
||||
</GridView.ItemTemplate>
|
||||
</GridView>
|
||||
<Grid x:Name="Header" Height="300" VerticalAlignment="Top">
|
||||
<ScrollViewer>
|
||||
<Grid>
|
||||
<Rectangle x:Name="BackgroundRectangle" Height="300" Width="1050" HorizontalAlignment="Left" VerticalAlignment="Top" >
|
||||
<Rectangle.Fill>
|
||||
<ImageBrush x:Name="BackgroundImage" ImageSource="ms-appx:///Assets/Abstract/Abstract-4.jpg" Stretch="UniformToFill" Opacity="0.6"/>
|
||||
</Rectangle.Fill>
|
||||
</Rectangle>
|
||||
<Rectangle x:Name="OverlayRectangle" Fill="#BFCFB5C0" Width="1050" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top"/>
|
||||
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="TextContainer">
|
||||
<Ellipse x:Name="ProfileImage" Height="150" Width="150" Margin="20,70,20,20">
|
||||
<Ellipse.Fill>
|
||||
<ImageBrush ImageSource="ms-appx:///Assets/Abstract/Abstract-2.jpg" Stretch="UniformToFill"/>
|
||||
</Ellipse.Fill>
|
||||
</Ellipse>
|
||||
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,70,0,0">
|
||||
<TextBlock x:Name="TitleBlock" Text="Lorem Ipsum" Foreground="White" FontSize="20"/>
|
||||
<TextBlock x:Name="SubtitleBlock" Text="dolor sit amet" Foreground="White" FontSize="10" Margin="0,10,0,0"/>
|
||||
<TextBlock x:Name="Blurb" Foreground="White" FontSize="12" Width="400" TextWrapping="Wrap" Margin="0,20,0,0">
|
||||
<Run>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</Run>
|
||||
</TextBlock>
|
||||
<TextBlock x:Name="MoreText" Text="More" Foreground="White" Margin="0,10,0,0"/>
|
||||
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,10,0,0">
|
||||
<StackPanel Orientation="Horizontal" x:Name="ButtonPanel">
|
||||
<Button Padding="0" Foreground="White" Style="{ThemeResource TextBlockButtonStyle}">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<SymbolIcon Symbol="Play"/>
|
||||
<TextBlock Text="Play" Margin="10,0,0,0"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<Button Padding="0" Foreground="White" Style="{ThemeResource TextBlockButtonStyle}">
|
||||
<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
|
||||
<SymbolIcon Symbol="Add"/>
|
||||
<TextBlock Text="Add" Margin="10,0,0,0"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<Button Padding="0" Foreground="White" Style="{ThemeResource TextBlockButtonStyle}">
|
||||
<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
|
||||
<SymbolIcon Symbol="More"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
<GridView x:Name="gridView">
|
||||
<GridView.Header>
|
||||
<Grid x:Name="Header" Height="300" VerticalAlignment="Top">
|
||||
<Rectangle x:Name="BackgroundRectangle" Height="300" Width="1050" HorizontalAlignment="Left" VerticalAlignment="Top" >
|
||||
<Rectangle.Fill>
|
||||
<ImageBrush x:Name="BackgroundImage" ImageSource="ms-appx:///Assets/Abstract/Abstract-4.jpg" Stretch="UniformToFill" Opacity="0.6"/>
|
||||
</Rectangle.Fill>
|
||||
</Rectangle>
|
||||
<Rectangle x:Name="OverlayRectangle" Fill="#BFCFB5C0" Width="1050" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top"/>
|
||||
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="TextContainer">
|
||||
<Ellipse x:Name="ProfileImage" Height="150" Width="150" Margin="20,70,20,20">
|
||||
<Ellipse.Fill>
|
||||
<ImageBrush ImageSource="ms-appx:///Assets/Abstract/Abstract-2.jpg" Stretch="UniformToFill"/>
|
||||
</Ellipse.Fill>
|
||||
</Ellipse>
|
||||
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,70,0,0">
|
||||
<TextBlock x:Name="TitleBlock" Text="Lorem Ipsum" Foreground="White" FontSize="20"/>
|
||||
<TextBlock x:Name="SubtitleBlock" Text="dolor sit amet" Foreground="White" FontSize="10" Margin="0,10,0,0"/>
|
||||
<TextBlock x:Name="Blurb" Foreground="White" FontSize="12" Width="400" TextWrapping="Wrap" Margin="0,20,0,0">
|
||||
<Run>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</Run>
|
||||
</TextBlock>
|
||||
<TextBlock x:Name="MoreText" Text="More" Foreground="White" Margin="0,10,0,0"/>
|
||||
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,10,0,0">
|
||||
<StackPanel Orientation="Horizontal" x:Name="ButtonPanel">
|
||||
<Button Padding="0" Foreground="White" Style="{ThemeResource TextBlockButtonStyle}">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<SymbolIcon Symbol="Play"/>
|
||||
<TextBlock Text="Play" Margin="10,0,0,0"/>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<Button Padding="0" Foreground="White" Style="{ThemeResource TextBlockButtonStyle}">
|
||||
<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
|
||||
<SymbolIcon Symbol="Add"/>
|
||||
<TextBlock Text="Add" Margin="10,0,0,0"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<Button Padding="0" Foreground="White" Style="{ThemeResource TextBlockButtonStyle}">
|
||||
<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
|
||||
<SymbolIcon Symbol="More"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</GridView.Header>
|
||||
<GridView.ItemTemplate>
|
||||
<DataTemplate x:DataType="data:Thumbnail">
|
||||
<Image Source="{x:Bind ImageUrl}"
|
||||
Width="200"
|
||||
Height="200"
|
||||
Margin="4"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Stretch="UniformToFill"/>
|
||||
</DataTemplate>
|
||||
</GridView.ItemTemplate>
|
||||
</GridView>
|
||||
</Grid>
|
||||
</local:SamplePage>
|
||||
|
|
|
|||
|
|
@ -17,11 +17,13 @@ using Microsoft.Graphics.Canvas.Effects;
|
|||
using System.Numerics;
|
||||
using Windows.UI.Xaml;
|
||||
using Windows.UI.Composition;
|
||||
using Windows.UI.Xaml.Controls;
|
||||
using Windows.UI.Xaml.Hosting;
|
||||
|
||||
using Windows.UI.Xaml.Media;
|
||||
using EF = ExpressionBuilder.ExpressionFunctions;
|
||||
using CompositionSampleGallery.Shared;
|
||||
using System.Collections.ObjectModel;
|
||||
using SamplesCommon;
|
||||
|
||||
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
|
||||
namespace CompositionSampleGallery
|
||||
|
|
@ -52,8 +54,16 @@ namespace CompositionSampleGallery
|
|||
|
||||
private void SamplePage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
|
||||
{
|
||||
// Get the PropertySet that contains the scroll values from MyScrollViewer
|
||||
_scrollerPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MyScrollviewer);
|
||||
// Retrieve the ScrollViewer that the GridView is using internally
|
||||
var scrollViewer = gridView.GetFirstDescendantOfType<ScrollViewer>();
|
||||
|
||||
// Update the ZIndex of the header container so that the header is above the items when scrolling
|
||||
var headerPresenter = (UIElement)VisualTreeHelper.GetParent((UIElement)gridView.Header);
|
||||
var headerContainer = (UIElement)VisualTreeHelper.GetParent(headerPresenter);
|
||||
Canvas.SetZIndex((UIElement)headerContainer, 1);
|
||||
|
||||
// Get the PropertySet that contains the scroll values from the ScrollViewer
|
||||
_scrollerPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollViewer);
|
||||
_compositor = _scrollerPropertySet.Compositor;
|
||||
Model = new LocalDataSource();
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче