Skip to content

Commit

Permalink
Merged PR 168: update tutorials to use WinUI
Browse files Browse the repository at this point in the history 
update tutorials to use WinUI
  • Loading branch information
@jwmsft
jwmsft committed Aug 25, 2020
1 parent 432c6d4 commit eb9b9b3
Show file tree
Hide file tree
Showing 43 changed files with 2,680 additions and 2,229 deletions.
11 changes: 6 additions & 5 deletions PhotoLab/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,17 @@

<Application.Resources>
<ResourceDictionary>
<!-- window width adaptive snap points -->
<x:Double x:Key="MinWindowSnapPoint">0</x:Double>
<x:Double x:Key="MediumWindowSnapPoint">641</x:Double>
<x:Double x:Key="LargeWindowSnapPoint">1008</x:Double>
<SolidColorBrush x:Key="RatingControlSelectedForeground" Color="White"/>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<SolidColorBrush x:Key="RatingControlSelectedForeground" Color="White"/>

<!-- Window width adaptive breakpoints. -->
<x:Double x:Key="MinWindowBreakpoint">0</x:Double>
<x:Double x:Key="MediumWindowBreakpoint">641</x:Double>
<x:Double x:Key="LargeWindowBreakpoint">1008</x:Double>
</ResourceDictionary>
</Application.Resources>
</Application>
50 changes: 1 addition & 49 deletions PhotoLab/DetailPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -515,7 +515,7 @@
Style="{StaticResource ValueTextBlock}"
Text="{x:Bind item.Exposure.ToString('N', culture), Mode=OneWay}" />


<Slider Header="Temperature"
Grid.Row="3"
Foreground="Transparent"
Expand Down Expand Up @@ -620,53 +620,5 @@
</ScrollViewer>
</SplitView.Pane>
</SplitView>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowSnapPoint}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowSnapPoint}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<local:MobileScreenTrigger InteractionMode="Touch" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainCommandBar.(RelativePanel.AlignBottomWithPanel)"
Value="True" />
<Setter Target="MainCommandBar.(RelativePanel.AlignTopWithPanel)"
Value="False" />

<Setter Target="MainSplitView.(RelativePanel.Above)"
Value="MainCommandBar" />
<Setter Target="MainSplitView.(RelativePanel.Below)"
Value="TitlePanel" />
<Setter Target="MainSplitView.(RelativePanel.AlignBottomWithPanel)"
Value="False" />

<Setter Target="MainSplitView.OpenPaneLength"
Value="220" />
<Setter Target="EditControlsGrid.Margin"
Value="8" />

<Setter Target="TitleEditBox.Height"
Value="72" />
<Setter Target="TitleEditBox.Padding"
Value="8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</RelativePanel>
</Page>
16 changes: 0 additions & 16 deletions PhotoLab/DetailPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,22 +196,6 @@ private void ToggleEditState()

private async void ExportImage()
{
// We haven't enabled image export for phone.
var qualifiers = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues;
if (qualifiers.ContainsKey("DeviceFamily") && qualifiers["DeviceFamily"] == "Mobile")
{
ContentDialog notSupportedDialog = new ContentDialog
{
Title = "Export is not enabled",
Content = "Image export is not enabled on phones.",
CloseButtonText = "OK",
};

ContentDialogResult result = await notSupportedDialog.ShowAsync();
return;
}

// Not on phone, so export image.
CanvasDevice device = CanvasDevice.GetSharedDevice();
using (CanvasRenderTarget offscreen = new CanvasRenderTarget(
device, item.ImageProperties.Width, item.ImageProperties.Height, 96))
Expand Down
48 changes: 9 additions & 39 deletions PhotoLab/MainPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,8 @@
<Thickness x:Key="LargeItemMargin">8</Thickness>
<x:Int32 x:Key="SmallItemMarginValue">0</x:Int32>
<Thickness x:Key="SmallItemMargin">0</Thickness>
<x:Int32 x:Key="DesktopWindowSidePaddingValue">16</x:Int32>
<x:Int32 x:Key="MobileWindowSidePaddingValue">32</x:Int32>

<x:Int32 x:Key="DefaultWindowSidePaddingValue">16</x:Int32>

<Flyout x:Key="zoomFlyout">
<StackPanel>
<Slider x:Name="ZoomSlider"
Expand Down Expand Up @@ -109,7 +108,7 @@
Value="{StaticResource LargeItemMargin}" />
</Style>

<DataTemplate x:Key="ImageGridView_MobileItemTemplate"
<DataTemplate x:Key="ImageGridView_SmallItemTemplate"
x:DataType="local:ImageFileInfo">
<Grid Height="{Binding ItemSize, ElementName=page}"
Width="{Binding ItemSize, ElementName=page}">
Expand Down Expand Up @@ -140,7 +139,7 @@
</Grid>
</DataTemplate>

<Style x:Key="ImageGridView_MobileItemContainerStyle"
<Style x:Key="ImageGridView_SmallItemContainerStyle"
TargetType="GridViewItem" />

</Page.Resources>
Expand Down Expand Up @@ -181,52 +180,23 @@
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowSnapPoint}" />
<AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowBreakpoint}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowSnapPoint}" />
<AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowBreakpoint}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}" />
<AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowBreakpoint}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ImageGridView.ItemTemplate"
Value="{StaticResource ImageGridView_MobileItemTemplate}" />
Value="{StaticResource ImageGridView_SmallItemTemplate}" />
<Setter Target="ImageGridView.ItemContainerStyle"
Value="{StaticResource ImageGridView_MobileItemContainerStyle}" />

<Setter Target="ZoomSlider.Minimum"
Value="80" />
<Setter Target="ZoomSlider.Maximum"
Value="180" />
<Setter Target="ZoomSlider.TickFrequency"
Value="20" />
<Setter Target="ZoomSlider.Value"
Value="100" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<local:MobileScreenTrigger InteractionMode="Touch" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ImageGridView.(RelativePanel.Above)"
Value="MainCommandBar" />
<Setter Target="ImageGridView.ItemTemplate"
Value="{StaticResource ImageGridView_MobileItemTemplate}" />
<Setter Target="ImageGridView.ItemContainerStyle"
Value="{StaticResource ImageGridView_MobileItemContainerStyle}" />

<Setter Target="MainCommandBar.(RelativePanel.AlignBottomWithPanel)"
Value="True" />
<Setter Target="MainCommandBar.(RelativePanel.AlignLeftWithPanel)"
Value="True" />
<Setter Target="MainCommandBar.(RelativePanel.AlignRightWithPanel)"
Value="True" />
Value="{StaticResource ImageGridView_SmallItemContainerStyle}" />

<Setter Target="ZoomSlider.Minimum"
Value="80" />
Expand Down
19 changes: 8 additions & 11 deletions PhotoLab/MainPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,13 @@ private async Task GetItemsAsync()
options.FileTypeFilter.Add(".png");
options.FileTypeFilter.Add(".gif");

// Get the Pictures library
Windows.Storage.StorageFolder picturesFolder = Windows.Storage.KnownFolders.PicturesLibrary;
// Get the Pictures library. (Requires 'Pictures Library' capability.)
//Windows.Storage.StorageFolder picturesFolder = Windows.Storage.KnownFolders.PicturesLibrary;
// OR
// Get the Sample pictures.
StorageFolder appInstalledFolder = Package.Current.InstalledLocation;
StorageFolder picturesFolder = await appInstalledFolder.GetFolderAsync("Assets\\Samples");

var result = picturesFolder.CreateFileQueryWithOptions(options);

IReadOnlyList<StorageFile> imageFiles = await result.GetFilesAsync();
Expand Down Expand Up @@ -176,15 +181,7 @@ private void DetermineItemSize()
// the ItemContainerStyle * (Right + Left). If those values change,
// this value needs to be updated to match.
int margins = (int)this.Resources["LargeItemMarginValue"] * 4;
double gridWidth = ImageGridView.ActualWidth - (int)this.Resources["DesktopWindowSidePaddingValue"];

if (AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile" &&
UIViewSettings.GetForCurrentView().UserInteractionMode == UserInteractionMode.Touch)
{
margins = (int)this.Resources["SmallItemMarginValue"] * 4;
gridWidth = ImageGridView.ActualWidth - (int)this.Resources["MobileWindowSidePaddingValue"];
}

double gridWidth = ImageGridView.ActualWidth - (int)this.Resources["DefaultWindowSidePaddingValue"];
double ItemWidth = ZoomSlider.Value + margins;
// We need at least 1 column.
int columns = (int)Math.Max(gridWidth / ItemWidth, 1);
Expand Down
71 changes: 0 additions & 71 deletions PhotoLab/MobileScreenTrigger.cs
View file

This file was deleted.

1 change: 0 additions & 1 deletion PhotoLab/PhotoLab.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@
<Compile Include="MainPage.xaml.cs">
<DependentUpon>MainPage.xaml</DependentUpon>
</Compile>
<Compile Include="MobileScreenTrigger.cs" />
<Compile Include="Properties\AssemblyInfo.cs" />
</ItemGroup>
<ItemGroup>
Expand Down
13 changes: 11 additions & 2 deletions xaml-basics-starting-points/adaptive-layout/PhotoLab/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,16 @@
<Application x:Class="PhotoLab.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- Add the window snap points here -->
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<SolidColorBrush x:Key="RatingControlSelectedForeground" Color="White"/>
<!-- Add the window breakpoints here. -->
</ResourceDictionary>
</Application.Resources>

</Application>
Loading

0 comments on commit eb9b9b3

Please sign in to comment.