Skip to content

Commit

Permalink
Merge pull request #1290 from microsoft/user/karkarl/UpdateMicaSample
Browse files Browse the repository at this point in the history
Mica Sample Update
  • Loading branch information
karkarl authored May 26, 2023
2 parents 2722266 + 008d5f6 commit 0a300bf
Show file tree
Hide file tree
Showing 13 changed files with 274 additions and 47 deletions.
2 changes: 2 additions & 0 deletions WinUIGallery/ContentIncludes.props
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,8 @@
<Content Include="ControlPagesSampleCode\System\FilePickerSample5_xaml.txt" />
<Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample1.txt" />
<Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample2.txt" />
<Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample3.txt" />
<Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsSample4.txt" />
<Content Include="ControlPagesSampleCode\SystemBackdrops\SystemBackdropsEnsureSystemDQC.txt" />
<Content Include="ControlPagesSampleCode\TabView\TabViewBasicSample_cs.txt" />
<Content Include="ControlPagesSampleCode\TabView\TabViewKeyboardAcceleratorSample_cs.txt" />
Expand Down
31 changes: 26 additions & 5 deletions WinUIGallery/ControlPages/SystemBackdropsPage.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,35 @@
mc:Ignorable="d">

<StackPanel>
<local:ControlExample HeaderText="Create a window with a Mica system backdrop."
<local:ControlExample HeaderText="Create a window with a built-in Mica system backdrop."
CSharpSource="SystemBackdrops\SystemBackdropsSample3.txt">
<local:ControlExample.Xaml>
<x:String xml:space="preserve">
// Option 1 - implement Mica with Xaml.
&lt;Window.SystemBackdrop&gt;
&lt;MicaBackdrop /&gt;
&lt;/Window.SystemBackdrop&gt;
</x:String>
</local:ControlExample.Xaml>
<Button Click="createBuiltInMicaWindow_Click">Create Window with built-in Mica</Button>
</local:ControlExample>

<local:ControlExample HeaderText="Create a window with a customizable Mica system backdrop."
CSharpSource="SystemBackdrops\SystemBackdropsSample1.txt">
<Button Click="createMicaWindow_Click">Create Window with Mica</Button>
<Button Click="createCustomMicaWindow_Click">Create Window with customizable Mica</Button>
</local:ControlExample>

<local:ControlExample HeaderText="Create a window with a Desktop Acrylic system backdrop."
CSharpSource="SystemBackdrops\SystemBackdropsSample2.txt">
<Button Click="createAcrylicWindow_Click">Create Window with Acrylic</Button>
<local:ControlExample HeaderText="Create a window with a built-in Desktop Acrylic system backdrop."
CSharpSource="SystemBackdrops\SystemBackdropsSample4.txt">
<local:ControlExample.Xaml>
<x:String xml:space="preserve">
// Option 1 - implement Acrylic with Xaml.
&lt;Window.SystemBackdrop&gt;
&lt;DesktopAcrylicBackdrop /&gt;
&lt;/Window.SystemBackdrop&gt;
</x:String>
</local:ControlExample.Xaml>
<Button Click="createBuiltInAcrylicWindow_Click">Create Window with built-in Acrylic</Button>
</local:ControlExample>

<local:ControlExample HeaderText="Helper class to ensure a Windows.System.DispatcherQueue exists."
Expand Down
13 changes: 10 additions & 3 deletions WinUIGallery/ControlPages/SystemBackdropsPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
//*********************************************************
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
Expand All @@ -24,13 +24,20 @@ public SystemBackdropsPage()
this.InitializeComponent();
}

private void createMicaWindow_Click(object sender, RoutedEventArgs e)
private void createBuiltInMicaWindow_Click(object sender, RoutedEventArgs e)
{
var newWindow = new AppUIBasics.SamplePages.SampleBuiltInSystemBackdropsWindow();
newWindow.Activate();
}

private void createCustomMicaWindow_Click(object sender, RoutedEventArgs e)
{
var newWindow = new AppUIBasics.SamplePages.SampleSystemBackdropsWindow();
newWindow.SetBackdrop(AppUIBasics.SamplePages.SampleSystemBackdropsWindow.BackdropType.Mica);
newWindow.Activate();
}

private void createAcrylicWindow_Click(object sender, RoutedEventArgs e)
private void createBuiltInAcrylicWindow_Click(object sender, RoutedEventArgs e)
{
var newWindow = new AppUIBasics.SamplePages.SampleSystemBackdropsWindow();
newWindow.SetBackdrop(AppUIBasics.SamplePages.SampleSystemBackdropsWindow.BackdropType.DesktopAcrylic);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ bool TrySetMicaBackdrop()
// Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
m_micaController.AddSystemBackdropTarget(this.As<Microsoft.UI.Composition.ICompositionSupportsSystemBackdrop>());
m_micaController.SetSystemBackdropConfiguration(m_configurationSource);
return true; // succeeded
return true; // Succeeded.
}

return false; // Mica is not supported on this system
return false; // Mica is not supported on this system.
}

private void Window_Activated(object sender, WindowActivatedEventArgs args)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ bool TrySetAcrylicBackdrop()
// Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
m_acrylicController.AddSystemBackdropTarget(this.As<Microsoft.UI.Composition.ICompositionSupportsSystemBackdrop>());
m_acrylicController.SetSystemBackdropConfiguration(m_configurationSource);
return true; // succeeded
return true; // Succeeded.
}

return false; // Acrylic is not supported on this system
return false; // Acrylic is not supported on this system.
}

private void Window_Activated(object sender, WindowActivatedEventArgs args)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Option 2 - Implement Mica with codebehind.
// Allows for toggling backdrops as shown in sample.
bool TrySetMicaBackdrop(bool useMicaAlt)
{
if (Microsoft.UI.Composition.SystemBackdrops.MicaController.IsSupported())
{
Microsoft.UI.Xaml.Media.MicaBackdrop micaBackdrop = new Microsoft.UI.Xaml.Media.MicaBackdrop();
micaBackdrop.Kind = useMicaAlt ? Microsoft.UI.Composition.SystemBackdrops.MicaKind.BaseAlt : Microsoft.UI.Composition.SystemBackdrops.MicaKind.Base;
this.SystemBackdrop = micaBackdrop;

return true; // Succeeded.
}

return false; // Mica is not supported on this system.
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// Option 2 - Implement Acrylic with codebehind.
// Allows for toggling backdrops as shown in sample.
bool TrySetDesktopAcrylicBackdrop()
{
if (Microsoft.UI.Composition.SystemBackdrops.DesktopAcrylicController.IsSupported())
{
Microsoft.UI.Xaml.Media.DesktopAcrylicBackdrop DesktopAcrylicBackdrop = new Microsoft.UI.Xaml.Media.DesktopAcrylicBackdrop();
this.SystemBackdrop = DesktopAcrylicBackdrop;

return true; // Succeeded.
}

return false; // DesktopAcrylic is not supported on this system.
}
2 changes: 1 addition & 1 deletion WinUIGallery/DataModel/ControlInfoData.json
Original file line number Diff line number Diff line change
Expand Up @@ -2275,7 +2275,7 @@
"Subtitle": "System backdrops, like Mica and Acrylic, for the window.",
"ImagePath": "ms-appx:///Assets/ControlImages/Acrylic.png",
"ImageIconPath": "ms-appx:///Assets/ControlIcons/SystemBackdropsIcon.png",
"Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. Applying a backdrop currently requires a bunch of app code, but this will be easier in a future release.",
"Description": "System backdrops are used to provide a different background for a Window other than the default white or black (depending on Light or Dark theme). Mica and Desktop Acrylic are the current supported backdrops. There are two options for applying a backdrop: first, to use built-in Mica/Acrylic types, which have no customization and are simple to apply. The second is to create a customizable backdrop, which requires more code.",
"Content": "<p>Look at the <i>SampleSystemBackdropsWindow.xaml.cs</i> file in Visual Studio to see the full code for applying a backdrop.</p>",
"IsNew": true,
"Docs": [
Expand Down
32 changes: 32 additions & 0 deletions WinUIGallery/SamplePages/SampleBuiltInSystemBackdropsWindow.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<Window
x:Class="AppUIBasics.SamplePages.SampleBuiltInSystemBackdropsWindow"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="titleBar" Background="Transparent" />
<StackPanel
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Spacing="12">
<TextBlock HorizontalAlignment="Center">
<Run Text="Current backdrop: " />
<Run x:Name="tbCurrentBackdrop" FontWeight="SemiBold" />
</TextBlock>
<Button
x:Name="btnChangeBackdrop"
HorizontalAlignment="Center"
Click="ChangeBackdropButton_Click"
Content="Change Backdrop" />
<TextBlock x:Name="tbChangeStatus" HorizontalAlignment="Center" />
</StackPanel>
</Grid>
</Window>
129 changes: 129 additions & 0 deletions WinUIGallery/SamplePages/SampleBuiltInSystemBackdropsWindow.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
using AppUIBasics.Helper;
using Microsoft.UI.Xaml;

namespace AppUIBasics.SamplePages
{
public sealed partial class SampleBuiltInSystemBackdropsWindow : Window
{
BackdropType m_currentBackdrop;

public SampleBuiltInSystemBackdropsWindow()
{
this.InitializeComponent();
((FrameworkElement)this.Content).RequestedTheme = AppUIBasics.Helper.ThemeHelper.RootTheme;
ExtendsContentIntoTitleBar = true;
SetTitleBar(titleBar);
SetBackdrop(BackdropType.Mica);
}


public enum BackdropType
{
Mica,
MicaAlt,
DesktopAcrylic,
DefaultColor,
}

public void SetBackdrop(BackdropType type)
{
// Reset to default color. If the requested type is supported, we'll update to that.
// Note: This sample completely removes any previous controller to reset to the default
// state. This is done so this sample can show what is expected to be the most
// common pattern of an app simply choosing one controller type which it sets at
// startup. If an app wants to toggle between Mica and Acrylic it could simply
// call RemoveSystemBackdropTarget() on the old controller and then setup the new
// controller, reusing any existing m_configurationSource and Activated/Closed
// event handlers.
m_currentBackdrop = BackdropType.DefaultColor;
tbCurrentBackdrop.Text = "None (default theme color)";
tbChangeStatus.Text = "";
this.SystemBackdrop = null;

if (type == BackdropType.Mica)
{
if (TrySetMicaBackdrop(false))
{
tbCurrentBackdrop.Text = "Built-in Mica";
m_currentBackdrop = type;
}
else
{
// Mica isn't supported. Try Acrylic.
type = BackdropType.DesktopAcrylic;
tbChangeStatus.Text += " Mica isn't supported. Trying Acrylic.";
}
}
if (type == BackdropType.MicaAlt)
{
if (TrySetMicaBackdrop(true))
{
tbCurrentBackdrop.Text = "Built-in MicaAlt";
m_currentBackdrop = type;
}
else
{
// MicaAlt isn't supported. Try Acrylic.
type = BackdropType.DesktopAcrylic;
tbChangeStatus.Text += " MicaAlt isn't supported. Trying Acrylic.";
}
}
if (type == BackdropType.DesktopAcrylic)
{
if (TrySetAcrylicBackdrop())
{
tbCurrentBackdrop.Text = "Built-in Acrylic";
m_currentBackdrop = type;
}
else
{
// Acrylic isn't supported, so take the next option, which is DefaultColor, which is already set.
tbChangeStatus.Text += " Acrylic isn't supported. Switching to default color.";
}
}

// Announce visual change to automation.
UIHelper.AnnounceActionForAccessibility(btnChangeBackdrop, $"Background changed to {tbCurrentBackdrop.Text}", "BackgroundChangedNotificationActivityId");
}

bool TrySetMicaBackdrop(bool useMicaAlt)
{
if (Microsoft.UI.Composition.SystemBackdrops.MicaController.IsSupported())
{
Microsoft.UI.Xaml.Media.MicaBackdrop micaBackdrop = new Microsoft.UI.Xaml.Media.MicaBackdrop();
micaBackdrop.Kind = useMicaAlt ? Microsoft.UI.Composition.SystemBackdrops.MicaKind.BaseAlt : Microsoft.UI.Composition.SystemBackdrops.MicaKind.Base;
this.SystemBackdrop = micaBackdrop;
return true;
}

return false; // Mica is not supported on this system
}

bool TrySetAcrylicBackdrop()
{
if (Microsoft.UI.Composition.SystemBackdrops.DesktopAcrylicController.IsSupported())
{
this.SystemBackdrop = new Microsoft.UI.Xaml.Media.DesktopAcrylicBackdrop();
return true;
}

return false; // Acrylic is not supported on this system
}

void ChangeBackdropButton_Click(object sender, RoutedEventArgs e)
{
BackdropType newType;

switch (m_currentBackdrop)
{
case BackdropType.Mica: newType = BackdropType.MicaAlt; break;
case BackdropType.MicaAlt: newType = BackdropType.DesktopAcrylic; break;
case BackdropType.DesktopAcrylic: newType = BackdropType.DefaultColor; break;
default:
case BackdropType.DefaultColor: newType = BackdropType.Mica; break;
}

SetBackdrop(newType);
}
}
}
31 changes: 22 additions & 9 deletions WinUIGallery/SamplePages/SampleSystemBackdropsWindow.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,27 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<StackPanel>
<StackPanel Margin="20" Spacing="10">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Current backdrop: " />
<TextBlock x:Name="tbCurrentBackdrop" />
</StackPanel>
<Button x:Name="btnChangeBackdrop" Content="Change Backdrop" Click="ChangeBackdropButton_Click" />
<TextBlock x:Name="tbChangeStatus" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="titleBar" Background="Transparent" />
<StackPanel
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Spacing="12">
<TextBlock HorizontalAlignment="Center">
<Run Text="Current backdrop: " />
<Run x:Name="tbCurrentBackdrop" FontWeight="SemiBold" />
</TextBlock>
<Button
x:Name="btnChangeBackdrop"
HorizontalAlignment="Center"
Click="ChangeBackdropButton_Click"
Content="Change Backdrop" />
<TextBlock x:Name="tbChangeStatus" HorizontalAlignment="Center" />
</StackPanel>
</StackPanel>
</Grid>
</Window>
Loading

0 comments on commit 0a300bf

Please sign in to comment.