Skip to content

Commit a9a055a

Browse files
JesseColJesseCol
committed
Calc: Step 4: Use AppWindow's CompactOverlay mode to make a compact view of the Calc app
1 parent f0c6ea5 commit a9a055a

File tree

2 files changed

+160
-105
lines changed

2 files changed

+160
-105
lines changed

‎Samples/Islands/DrawingIsland/CalculatorDemo/MainWindow.cs

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
// // Copyright (c) Microsoft. All rights reserved.
22
// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
33

4+
using Microsoft.UI;
5+
using Microsoft.UI.Windowing;
46
using System;
57
using System.Globalization;
68
using System.Windows;
79
using System.Windows.Controls;
810
using System.Windows.Input;
11+
using System.Windows.Interop;
12+
using Windows.ApplicationModel.Contacts;
913

1014
namespace CalculatorDemo
1115
{
@@ -18,6 +22,7 @@ public sealed partial class MainWindow : Window
1822
private Operation _lastOper;
1923
private string _lastVal;
2024
private string _memVal;
25+
private AppWindow _appWindow;
2126

2227
public MainWindow()
2328
{
@@ -444,5 +449,45 @@ public void Clear()
444449
_args = string.Empty;
445450
}
446451
}
452+
453+
private void CompactView_Click(object sender, RoutedEventArgs e)
454+
{
455+
SetCompactView(true);
456+
}
457+
458+
private void ExitCompactViewButton_Click(object sender, RoutedEventArgs e)
459+
{
460+
SetCompactView(false);
461+
}
462+
463+
void SetCompactView(bool useCompactView)
464+
{
465+
// Ensure we have an AppWindow for this WPF Window.
466+
if (_appWindow == null)
467+
{
468+
_appWindow = AppWindow.GetFromWindowId(
469+
new WindowId((ulong)new WindowInteropHelper(this).Handle));
470+
}
471+
472+
if (useCompactView)
473+
{
474+
// For compact view, hide the main panel and show the compact panel.
475+
MyPanel.Visibility = Visibility.Collapsed;
476+
CompactPanel.Visibility = Visibility.Visible;
477+
478+
CompactViewText.Text = DisplayBox.Text;
479+
480+
// The AppWindow's CompactOverlay mode will make it always-on-top.
481+
_appWindow.SetPresenter(AppWindowPresenterKind.CompactOverlay);
482+
_appWindow.ResizeClient(new Windows.Graphics.SizeInt32(300, 80));
483+
}
484+
else
485+
{
486+
MyPanel.Visibility = Visibility.Visible;
487+
CompactPanel.Visibility = Visibility.Collapsed;
488+
489+
_appWindow.SetPresenter(AppWindowPresenterKind.Default);
490+
}
491+
}
447492
}
448493
}

‎Samples/Islands/DrawingIsland/CalculatorDemo/MainWindow.xaml

Lines changed: 115 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -31,111 +31,121 @@
3131
</Style>
3232
</Window.Resources>
3333

34-
<DockPanel Name="MyPanel">
35-
<!--
36-
calc_update_tweaks: Remove the hardcoded hight to make the Menu taller so that the menu items can be fully visible.
37-
-->
38-
<Menu DockPanel.Dock="Top">
39-
<MenuItem Header="File">
40-
<MenuItem Click="OnMenuExit" Header="Exit" />
41-
</MenuItem>
42-
<MenuItem Header="View">
43-
<MenuItem Name="StandardMenu" Click="OnMenuStandard" IsCheckable="true" IsChecked="True"
44-
Header="Standard" />
45-
</MenuItem>
46-
<MenuItem Header="Help">
47-
<MenuItem Click="OnMenuAbout" Header="About" />
48-
</MenuItem>
49-
</Menu>
50-
<Grid Name="MyGrid" ShowGridLines="False">
51-
<Grid.ColumnDefinitions>
52-
<ColumnDefinition />
53-
<ColumnDefinition />
54-
<ColumnDefinition />
55-
<ColumnDefinition />
56-
<ColumnDefinition />
57-
<ColumnDefinition />
58-
<ColumnDefinition />
59-
<ColumnDefinition />
60-
<ColumnDefinition />
61-
</Grid.ColumnDefinitions>
62-
<Grid.RowDefinitions>
63-
<RowDefinition />
64-
<RowDefinition />
65-
<RowDefinition />
66-
<RowDefinition />
67-
<RowDefinition />
68-
<RowDefinition />
69-
</Grid.RowDefinitions>
70-
<Button Name="B7" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="2">7</Button>
71-
<Button Name="B8" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="2">8</Button>
72-
<Button Name="B9" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="2">9</Button>
73-
<Button Name="B4" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="3">4</Button>
74-
<Button Name="B5" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="3">5</Button>
75-
<Button Name="B6" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="3">6</Button>
76-
<Button Name="B1" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="4">1</Button>
77-
<Button Name="B2" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="4">2</Button>
78-
<Button Name="B3" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="4">3</Button>
79-
<Button Name="B0" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="5">0</Button>
80-
<Button Name="BPeriod" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="5">.</Button>
81-
<!--
82-
calc_update_tweaks: We add Style="{StaticResource GrayButton}" here to the Buttons we want to be gray to
83-
use the new Style we defined above.
84-
-->
85-
<Button Name="BPM" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="6" Grid.Row="5">+/-</Button>
86-
<Button Name="BDevide" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="2">/</Button>
87-
<Button Name="BMultiply" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="3">*</Button>
88-
<Button Name="BMinus" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="4">-</Button>
89-
<Button Name="BPlus" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="5">+</Button>
90-
<Button Name="BSqrt" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="8" Grid.Row="2"
91-
ToolTip="Usage: 'A Sqrt'">
92-
Sqrt
93-
</Button>
94-
<Button Name="BPercent" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="8" Grid.Row="3"
95-
ToolTip="Usage: 'A % B ='">
96-
%
97-
</Button>
98-
<Button Name="BOneOver" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="8" Grid.Row="4"
99-
ToolTip="Usage: 'A 1/X'">
100-
1/X
101-
</Button>
34+
<Grid x:Name="MainGrid">
35+
<DockPanel Name="MyPanel">
10236
<!--
103-
calc_update_tweaks: Let's make the "=" Button an Accent button, so it's easy to find.
37+
calc_update_tweaks: Remove the hardcoded hight to make the Menu taller so that the menu items can be fully visible.
10438
-->
105-
<Button Name="BEqual" Click="OperBtn_Click" Grid.Column="8" Grid.Row="5"
106-
Foreground="{DynamicResource AccentButtonForeground}" Background="{DynamicResource AccentButtonBackground}">=</Button>
107-
<Button Name="BC" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="8" Grid.Row="1"
108-
ToolTip="Clear All">
109-
C
110-
</Button>
111-
<Button Name="BCE" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="1"
112-
ToolTip="Clear Current Entry">
113-
CE
114-
</Button>
115-
<Button Name="BMemClear" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="3" Grid.Row="2"
116-
ToolTip="Clear Memory">
117-
MC
118-
</Button>
119-
<Button Name="BMemRecall" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="3" Grid.Row="3"
120-
ToolTip="Recall Memory">
121-
MR
122-
</Button>
123-
<Button Name="BMemSave" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="3" Grid.Row="4"
124-
ToolTip="Store in Memory">
125-
MS
126-
</Button>
127-
<Button Name="BMemPlus" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="3" Grid.Row="5"
128-
ToolTip="Add To Memory">
129-
M+
130-
</Button>
131-
<TextBlock Name="BMemBox" Grid.Column="3" Grid.Row="1" Margin="10,17,10,17" Grid.ColumnSpan="2">Memory: [empty]</TextBlock>
39+
<Menu Name="MainMenu" DockPanel.Dock="Top">
40+
<MenuItem Header="File">
41+
<MenuItem Click="OnMenuExit" Header="Exit" />
42+
</MenuItem>
43+
<MenuItem Header="View">
44+
<MenuItem Name="StandardMenu" Click="OnMenuStandard" IsCheckable="true" IsChecked="True"
45+
Header="Standard" />
46+
<MenuItem Name="CompactView" Click="CompactView_Click" Header="Enter Compact View" />
47+
</MenuItem>
48+
<MenuItem Header="Help">
49+
<MenuItem Click="OnMenuAbout" Header="About" />
50+
</MenuItem>
51+
</Menu>
52+
<Grid Name="MyGrid" ShowGridLines="False">
53+
<Grid.ColumnDefinitions>
54+
<ColumnDefinition />
55+
<ColumnDefinition />
56+
<ColumnDefinition />
57+
<ColumnDefinition />
58+
<ColumnDefinition />
59+
<ColumnDefinition />
60+
<ColumnDefinition />
61+
<ColumnDefinition />
62+
<ColumnDefinition />
63+
</Grid.ColumnDefinitions>
64+
<Grid.RowDefinitions>
65+
<RowDefinition />
66+
<RowDefinition />
67+
<RowDefinition />
68+
<RowDefinition />
69+
<RowDefinition />
70+
<RowDefinition />
71+
</Grid.RowDefinitions>
72+
<Button Name="B7" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="2">7</Button>
73+
<Button Name="B8" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="2">8</Button>
74+
<Button Name="B9" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="2">9</Button>
75+
<Button Name="B4" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="3">4</Button>
76+
<Button Name="B5" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="3">5</Button>
77+
<Button Name="B6" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="3">6</Button>
78+
<Button Name="B1" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="4">1</Button>
79+
<Button Name="B2" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="4">2</Button>
80+
<Button Name="B3" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="4">3</Button>
81+
<Button Name="B0" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="5">0</Button>
82+
<Button Name="BPeriod" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="5">.</Button>
83+
<!--
84+
calc_update_tweaks: We add Style="{StaticResource GrayButton}" here to the Buttons we want to be gray to
85+
use the new Style we defined above.
86+
-->
87+
<Button Name="BPM" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="6" Grid.Row="5">+/-</Button>
88+
<Button Name="BDevide" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="2">/</Button>
89+
<Button Name="BMultiply" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="3">*</Button>
90+
<Button Name="BMinus" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="4">-</Button>
91+
<Button Name="BPlus" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="5">+</Button>
92+
<Button Name="BSqrt" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="8" Grid.Row="2"
93+
ToolTip="Usage: 'A Sqrt'">
94+
Sqrt
95+
</Button>
96+
<Button Name="BPercent" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="8" Grid.Row="3"
97+
ToolTip="Usage: 'A % B ='">
98+
%
99+
</Button>
100+
<Button Name="BOneOver" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="8" Grid.Row="4"
101+
ToolTip="Usage: 'A 1/X'">
102+
1/X
103+
</Button>
104+
<!--
105+
calc_update_tweaks: Let's make the "=" Button an Accent button, so it's easy to find.
106+
-->
107+
<Button Name="BEqual" Click="OperBtn_Click" Grid.Column="8" Grid.Row="5"
108+
Foreground="{DynamicResource AccentButtonForeground}" Background="{DynamicResource AccentButtonBackground}">=</Button>
109+
<Button Name="BC" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="8" Grid.Row="1"
110+
ToolTip="Clear All">
111+
C
112+
</Button>
113+
<Button Name="BCE" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="7" Grid.Row="1"
114+
ToolTip="Clear Current Entry">
115+
CE
116+
</Button>
117+
<Button Name="BMemClear" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="3" Grid.Row="2"
118+
ToolTip="Clear Memory">
119+
MC
120+
</Button>
121+
<Button Name="BMemRecall" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="3" Grid.Row="3"
122+
ToolTip="Recall Memory">
123+
MR
124+
</Button>
125+
<Button Name="BMemSave" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="3" Grid.Row="4"
126+
ToolTip="Store in Memory">
127+
MS
128+
</Button>
129+
<Button Name="BMemPlus" Click="OperBtn_Click" Style="{StaticResource GrayButton}" Grid.Column="3" Grid.Row="5"
130+
ToolTip="Add To Memory">
131+
M+
132+
</Button>
133+
<TextBlock Name="BMemBox" Grid.Column="3" Grid.Row="1" Margin="10,17,10,17" Grid.ColumnSpan="2">Memory: [empty]</TextBlock>
132134

133-
<!--
134-
calc_update_tweaks: Make the calculator text a little larger to be more visible.
135-
Also, make the TextBox borders a little less harsh.
136-
-->
137-
<local:MyTextBox Grid.ColumnSpan="9" x:Name="DisplayBox" Height="30" Margin="5" FontSize="20" BorderBrush="LightGray"/>
138-
<local:MyTextBox Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="5" Margin="5" x:Name="PaperBox" BorderBrush="LightGray"/>
139-
</Grid>
140-
</DockPanel>
141-
</Window>
135+
<!--
136+
calc_update_tweaks: Make the calculator text a little larger to be more visible.
137+
Also, make the TextBox borders a little less harsh.
138+
-->
139+
<local:MyTextBox Grid.ColumnSpan="9" x:Name="DisplayBox" Height="30" Margin="5" FontSize="20" BorderBrush="LightGray"/>
140+
<local:MyTextBox Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="5" Margin="5" x:Name="PaperBox" BorderBrush="LightGray"/>
141+
</Grid>
142+
143+
</DockPanel>
144+
145+
<!-- This is what's shown when we enter the compat view mode-->
146+
<DockPanel Name="CompactPanel" Visibility="Collapsed">
147+
<Button Name="ExitCompactViewButton" Click="ExitCompactViewButton_Click" DockPanel.Dock="Top">Exit Compact View</Button>
148+
<TextBlock Margin="3" Name="CompactViewText" FontSize="22" />
149+
</DockPanel>
150+
</Grid>
151+
</Window>

0 commit comments

Comments
 (0)