Skip to content

Commit ed6b5b6

Browse files
michael-hawkermichael-hawker
authored
Merge pull request #3778 (#3771) from michael-hawker/ismaelestalayo-inappnot-restyle
Update InAppNotification style to match WinUI InfoBar
2 parents efaaf1b + 0240266 commit ed6b5b6

File tree

5 files changed

+53
-56
lines changed

5 files changed

+53
-56
lines changed

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotificationCode.bind

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919

2020
<StackPanel x:Name="ButtonsStackPanel" Grid.RowSpan="2" Grid.Column="1"
2121
Orientation="Horizontal" VerticalAlignment="Center">
22-
<Button x:Name="YesButton" Content="Yes" Width="150" Height="30" Click="YesButton_Click" />
23-
<Button x:Name="NoButton" Content="No" Width="150" Height="30" Margin="10 0 0 0" Click="NoButton_Click" />
22+
<Button x:Name="YesButton" Content="Yes" Width="100" Height="32" Click="YesButton_Click" />
23+
<Button x:Name="NoButton" Content="No" Width="100" Height="32" Margin="10 0 0 0" Click="NoButton_Click" />
2424
</StackPanel>
2525
</Grid>
2626
</Grid>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotificationPage.xaml.cs

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ private void Load()
7474

7575
var grid = new Grid()
7676
{
77-
Margin = new Thickness(0, 0, -38, 0)
77+
Margin = new Thickness(0, 0, -18, 0)
7878
};
7979

8080
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
@@ -86,7 +86,7 @@ private void Load()
8686
Text = "Do you like it?",
8787
VerticalAlignment = VerticalAlignment.Center,
8888
Margin = new Thickness(0, 0, 24, 0),
89-
FontSize = 16
89+
FontSize = 14
9090
};
9191
grid.Children.Add(textBlock);
9292

@@ -100,19 +100,19 @@ private void Load()
100100
var yesButton = new Button
101101
{
102102
Content = "Yes",
103-
Width = 120,
104-
Height = 40,
105-
FontSize = 16
103+
Width = 100,
104+
Height = 32,
105+
FontSize = 14
106106
};
107107
yesButton.Click += YesButton_Click;
108108
stackPanel.Children.Add(yesButton);
109109

110110
var noButton = new Button
111111
{
112112
Content = "No",
113-
Width = 120,
114-
Height = 40,
115-
FontSize = 16,
113+
Width = 100,
114+
Height = 32,
115+
FontSize = 14,
116116
Margin = new Thickness(4, 0, 0, 0)
117117
};
118118
noButton.Click += NoButton_Click;

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotificationXaml.bind

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,13 @@
4040
<VisualState x:Name="Normal" />
4141
<VisualState x:Name="PointerOver">
4242
<Storyboard>
43-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
44-
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlMSEdgeNotificationPointerOverForegroundBrush}" />
45-
</ObjectAnimationUsingKeyFrames>
4643
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
47-
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlMSEdgeNotificationPointerOverChromeBrush}" />
44+
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
4845
</ObjectAnimationUsingKeyFrames>
4946
</Storyboard>
5047
</VisualState>
5148
<VisualState x:Name="Pressed">
5249
<Storyboard>
53-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
54-
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlMSEdgeNotificationPointerOverForegroundBrush}" />
55-
</ObjectAnimationUsingKeyFrames>
5650
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
5751
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlMSEdgeNotificationPointerOverChromeBrush}" />
5852
</ObjectAnimationUsingKeyFrames>
@@ -236,39 +230,42 @@
236230

237231
<Button x:Name="OkButton"
238232
Margin="0"
239-
FontSize="16"
233+
FontSize="14"
240234
Content="Ok"
241-
Height="40"
242-
Width="120"
235+
Height="32"
236+
Width="100"
243237
Command="{StaticResource DismissCommand}"
244238
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
245239
AutomationProperties.Name="Ok" />
246240

247241
<Button x:Name="CancelButton"
248242
Margin="4,0,0,0"
249-
FontSize="16"
243+
FontSize="14"
250244
Content="Cancel"
251-
Height="40"
252-
Width="120"
245+
Height="32"
246+
Width="100"
253247
Command="{StaticResource DismissCommand}"
254248
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
255249
AutomationProperties.Name="Cancel"/>
256250

257251
</StackPanel>
258252

259253
<Button x:Name="DismissButton"
254+
CornerRadius="2"
260255
Grid.Column="2"
261-
Margin="4,0,0,0"
262-
FontSize="16"
256+
Margin="0 0 2 0"
257+
FontSize="12"
258+
Height="43" Width="48"
263259
Style="{StaticResource DismissTextBlockButtonStyle}"
264260
Content="&#xE894;"
265261
FontFamily="Segoe MDL2 Assets"
266262
AutomationProperties.Name="Dismiss"
267263
Command="{StaticResource DismissCommand}"
268264
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
265+
VerticalAlignment="Center"
269266
Visibility="{Binding ShowDismissButton, ElementName=ExampleCustomInAppNotification}">
270267
<Button.RenderTransform>
271-
<TranslateTransform x:Name="DismissButtonTransform" X="18" />
268+
<TranslateTransform x:Name="DismissButtonTransform" X="25" Y="-5"/>
272269
</Button.RenderTransform>
273270
</Button>
274271
</Grid>
@@ -342,13 +339,19 @@
342339
TextWrapping="WrapWholeWords" />
343340

344341
<Button x:Name="PART_DismissButton"
345-
Grid.Column="1"
342+
CornerRadius="20" Height="43" Width="48"
343+
Grid.Column="1"
344+
VerticalAlignment="Top"
346345
Visibility="{Binding ShowDismissButton, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}"
347-
FontSize="16"
346+
FontSize="12"
348347
Style="{StaticResource DismissTextBlockButtonStyle}"
349-
Content="&#xE894;"
350-
FontFamily="Segoe MDL2 Assets"
351-
AutomationProperties.Name="Dismiss" />
348+
Content="&#xE894;"
349+
FontFamily="Segoe MDL2 Assets"
350+
AutomationProperties.Name="Dismiss">
351+
<Button.RenderTransform>
352+
<TranslateTransform x:Name="DismissButtonTransform" X="25" Y="-7"/>
353+
</Button.RenderTransform>
354+
</Button>
352355
</Grid>
353356
</controls:DropShadowPanel>
354357
</Grid>

‎Microsoft.Toolkit.Uwp.UI.Controls.Core/InAppNotification/InAppNotification.xaml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99

1010
<Style x:Key="BaseInAppNotificationsStyle"
1111
TargetType="local:InAppNotification">
12-
<Setter Property="Background" Value="{ThemeResource SystemControlChromeMediumLowAcrylicElementMediumBrush}" />
12+
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
1313
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
14-
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseLowBrush}" />
14+
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlTransparentBrush}" />
1515
<Setter Property="Visibility" Value="Collapsed" />
16-
<Setter Property="BorderThickness" Value="2" />
16+
<Setter Property="BorderThickness" Value="0" />
1717
<Setter Property="HorizontalAlignment" Value="Stretch" />
1818
<Setter Property="VerticalAlignment" Value="Bottom" />
1919
<Setter Property="MinHeight" Value="55" />
20-
<Setter Property="FontSize" Value="16" />
20+
<Setter Property="FontSize" Value="14" />
2121
<Setter Property="RenderTransformOrigin" Value="0.5,1" />
2222
<Setter Property="Margin" Value="24,12" />
2323
<Setter Property="Padding" Value="24,12" />

‎Microsoft.Toolkit.Uwp.UI.Controls.Core/InAppNotification/Styles/MSEdgeNotificationStyle.xaml

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@
3131
</ResourceDictionary>
3232
</ResourceDictionary.ThemeDictionaries>
3333

34-
<x:Double x:Key="SystemControlMSEdgeNotificationDismissButtonSize">40</x:Double>
3534
<Thickness x:Key="SystemControlMSEdgeNotificationDismissButtonMargin">24,0,0,0</Thickness>
35+
<x:Double x:Key="SystemControlMSEdgeNotificationDismissButtonSize">32</x:Double>
3636
<x:Double x:Key="SystemControlMSEdgeNotificationDismissButtonTranslate">18</x:Double>
37-
<VerticalAlignment x:Key="SystemControlMSEdgeNotificationDismissButtonVerticalAlignment">Center</VerticalAlignment>
37+
<VerticalAlignment x:Key="SystemControlMSEdgeNotificationDismissButtonVerticalAlignment">Top</VerticalAlignment>
3838
<Thickness x:Key="SystemControlMSEdgeNotificationButtonBorderThickness">2</Thickness>
3939

4040
<Style x:Key="DismissTextBlockButtonStyle"
@@ -48,9 +48,10 @@
4848
<Setter Property="Template">
4949
<Setter.Value>
5050
<ControlTemplate TargetType="ButtonBase">
51-
<Grid x:Name="RootGrid"
52-
Margin="{TemplateBinding Padding}"
53-
Background="{TemplateBinding Background}">
51+
<Grid x:Name="RootGrid" CornerRadius="2"
52+
Margin="{TemplateBinding Margin}"
53+
Height="{StaticResource SystemControlMSEdgeNotificationDismissButtonSize}"
54+
Width="{StaticResource SystemControlMSEdgeNotificationDismissButtonSize}">
5455
<Border x:Name="TextBorder"
5556
BorderThickness="{StaticResource SystemControlMSEdgeNotificationButtonBorderThickness}"
5657
BorderBrush="{ThemeResource SystemControlMSEdgeNotificationButtonBorderBrush}">
@@ -65,25 +66,15 @@
6566
<VisualState x:Name="Normal" />
6667
<VisualState x:Name="PointerOver">
6768
<Storyboard>
68-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text"
69-
Storyboard.TargetProperty="Foreground">
70-
<DiscreteObjectKeyFrame KeyTime="0"
71-
Value="{ThemeResource SystemControlMSEdgeNotificationPointerOverForegroundBrush}" />
72-
</ObjectAnimationUsingKeyFrames>
7369
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
7470
Storyboard.TargetProperty="Background">
7571
<DiscreteObjectKeyFrame KeyTime="0"
76-
Value="{ThemeResource SystemControlMSEdgeNotificationPointerOverChromeBrush}" />
72+
Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
7773
</ObjectAnimationUsingKeyFrames>
7874
</Storyboard>
7975
</VisualState>
8076
<VisualState x:Name="Pressed">
8177
<Storyboard>
82-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text"
83-
Storyboard.TargetProperty="Foreground">
84-
<DiscreteObjectKeyFrame KeyTime="0"
85-
Value="{ThemeResource SystemControlMSEdgeNotificationPointerPressedForegroundBrush}" />
86-
</ObjectAnimationUsingKeyFrames>
8778
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
8879
Storyboard.TargetProperty="Background">
8980
<DiscreteObjectKeyFrame KeyTime="0"
@@ -137,28 +128,31 @@
137128

138129
<Grid.ColumnDefinitions>
139130
<ColumnDefinition Width="*" />
140-
<ColumnDefinition Width="Auto" />
131+
<ColumnDefinition Width="40" />
141132
</Grid.ColumnDefinitions>
142133

143134
<ContentPresenter x:Name="PART_Presenter"
135+
Grid.Column="0"
144136
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
145137
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
146138
HorizontalContentAlignment="Stretch"
147139
VerticalContentAlignment="Center"
140+
FontWeight="SemiBold"
148141
ContentTransitions="{TemplateBinding ContentTransitions}"
149142
TextWrapping="WrapWholeWords" />
150143

151144
<Button x:Name="PART_DismissButton"
145+
CornerRadius="2"
152146
Grid.Column="1"
153-
Margin="{StaticResource SystemControlMSEdgeNotificationDismissButtonMargin}"
147+
Margin="0"
154148
AutomationProperties.Name="Dismiss"
155149
Content="&#xE894;"
156150
FontFamily="Segoe MDL2 Assets"
157-
FontSize="16"
158-
VerticalAlignment="{StaticResource SystemControlMSEdgeNotificationDismissButtonVerticalAlignment}"
151+
FontSize="12"
152+
VerticalAlignment="Top"
159153
Style="{StaticResource DismissTextBlockButtonStyle}">
160154
<Button.RenderTransform>
161-
<TranslateTransform x:Name="DismissButtonTransform" X="18" />
155+
<TranslateTransform x:Name="DismissButtonTransform" X="25" Y="-5"/>
162156
</Button.RenderTransform>
163157
</Button>
164158
</Grid>

0 commit comments

Comments
 (0)