Skip to content

Commit 5932530

Browse files
shweaver-MSFTshweaver-MSFT
committed
Fixed the bug in InAppNotifications with datatemplate
1 parent d5d569c commit 5932530

File tree

3 files changed

+105
-95
lines changed

3 files changed

+105
-95
lines changed

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ public sealed partial class InAppNotificationPage : Page, IXamlRenderListener
1717
private InAppNotification _exampleInAppNotification;
1818
private InAppNotification _exampleCustomInAppNotification;
1919
private InAppNotification _exampleVSCodeInAppNotification;
20-
private DataTemplate _inAppNotificationWithButtonsTemplate;
2120
private ResourceDictionary _resources;
2221

2322
public bool IsRootGridActualWidthLargerThan700 { get; set; }
@@ -44,13 +43,6 @@ public void OnXamlRendered(FrameworkElement control)
4443
{
4544
notificationDurationTextBox.TextChanged += NotificationDurationTextBox_TextChanged;
4645
}
47-
48-
object inAppNotificationWithButtonsTemplateResource = null;
49-
bool? isTemplatePresent = _resources?.TryGetValue("InAppNotificationWithButtonsTemplate", out inAppNotificationWithButtonsTemplateResource);
50-
if (isTemplatePresent == true && inAppNotificationWithButtonsTemplateResource is DataTemplate inAppNotificationWithButtonsTemplate)
51-
{
52-
_inAppNotificationWithButtonsTemplate = inAppNotificationWithButtonsTemplate;
53-
}
5446
}
5547

5648
private void Load()
@@ -133,8 +125,12 @@ private void Load()
133125
_exampleVSCodeInAppNotification.Dismiss(true);
134126
_exampleInAppNotification.Dismiss(true);
135127

136-
var templateContent = _inAppNotificationWithButtonsTemplate.LoadContent();
137-
_exampleCustomInAppNotification.Show(templateContent, NotificationDuration);
128+
object inAppNotificationWithButtonsTemplateResource = null;
129+
bool? isTemplatePresent = _resources?.TryGetValue("InAppNotificationWithButtonsTemplate", out inAppNotificationWithButtonsTemplateResource);
130+
if (isTemplatePresent == true && inAppNotificationWithButtonsTemplateResource is DataTemplate inAppNotificationWithButtonsTemplate)
131+
{
132+
_exampleCustomInAppNotification.Show(inAppNotificationWithButtonsTemplate, NotificationDuration);
133+
}
138134
});
139135

140136
SampleController.Current.RegisterNewCommand("Show notification with Visual Studio Code template (info notification)", (sender, args) =>

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

Lines changed: 89 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -18,86 +18,92 @@
1818

1919
<local:DismissCommand x:Key="DismissCommand" />
2020

21-
<ControlTemplate x:Key="MSEdgeNotificationTemplate_NoDismissButton">
22-
<Grid>
23-
<VisualStateManager.VisualStateGroups>
24-
<VisualStateGroup x:Name="State">
25-
<VisualState x:Name="Collapsed">
26-
<Storyboard>
27-
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
28-
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
29-
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
30-
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}"
31-
Value="{Binding HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
32-
</DoubleAnimationUsingKeyFrames>
21+
<Style TargetType="controls:InAppNotification" x:Key="MSEdgeNotificationTemplate_NoDismissButton">
22+
<Setter Property="Template">
23+
<Setter.Value>
24+
<ControlTemplate>
25+
<Grid>
26+
<VisualStateManager.VisualStateGroups>
27+
<VisualStateGroup x:Name="State">
28+
<VisualState x:Name="Collapsed">
29+
<Storyboard>
30+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
31+
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
32+
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
33+
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}"
34+
Value="{Binding HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
35+
</DoubleAnimationUsingKeyFrames>
3336

34-
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
35-
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
36-
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
37-
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}"
38-
Value="{Binding VerticalOffset, RelativeSource={RelativeSource TemplatedParent}}"/>
39-
</DoubleAnimationUsingKeyFrames>
37+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
38+
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
39+
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
40+
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}"
41+
Value="{Binding VerticalOffset, RelativeSource={RelativeSource TemplatedParent}}"/>
42+
</DoubleAnimationUsingKeyFrames>
4043

41-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
42-
Storyboard.TargetProperty="(UIElement.Visibility)">
43-
<DiscreteObjectKeyFrame KeyTime="0">
44-
<DiscreteObjectKeyFrame.Value>
45-
<Visibility>Visible</Visibility>
46-
</DiscreteObjectKeyFrame.Value>
47-
</DiscreteObjectKeyFrame>
48-
<DiscreteObjectKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}">
49-
<DiscreteObjectKeyFrame.Value>
50-
<Visibility>Collapsed</Visibility>
51-
</DiscreteObjectKeyFrame.Value>
52-
</DiscreteObjectKeyFrame>
53-
</ObjectAnimationUsingKeyFrames>
54-
</Storyboard>
55-
</VisualState>
44+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
45+
Storyboard.TargetProperty="(UIElement.Visibility)">
46+
<DiscreteObjectKeyFrame KeyTime="0">
47+
<DiscreteObjectKeyFrame.Value>
48+
<Visibility>Visible</Visibility>
49+
</DiscreteObjectKeyFrame.Value>
50+
</DiscreteObjectKeyFrame>
51+
<DiscreteObjectKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}">
52+
<DiscreteObjectKeyFrame.Value>
53+
<Visibility>Collapsed</Visibility>
54+
</DiscreteObjectKeyFrame.Value>
55+
</DiscreteObjectKeyFrame>
56+
</ObjectAnimationUsingKeyFrames>
57+
</Storyboard>
58+
</VisualState>
5659

57-
<VisualState x:Name="Visible">
58-
<Storyboard>
59-
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
60-
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
61-
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
62-
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}" Value="0" />
63-
</DoubleAnimationUsingKeyFrames>
60+
<VisualState x:Name="Visible">
61+
<Storyboard>
62+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
63+
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
64+
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
65+
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}" Value="0" />
66+
</DoubleAnimationUsingKeyFrames>
6467

65-
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
66-
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
67-
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding VerticalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
68-
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}" Value="0" />
69-
</DoubleAnimationUsingKeyFrames>
70-
</Storyboard>
71-
</VisualState>
72-
</VisualStateGroup>
73-
</VisualStateManager.VisualStateGroups>
74-
<Grid x:Name="RootGrid"
75-
RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}"
76-
Margin="{TemplateBinding Margin}"
77-
Padding="{TemplateBinding Padding}"
78-
MaxWidth="{TemplateBinding MaxWidth}"
79-
Visibility="{TemplateBinding Visibility}"
80-
Background="{TemplateBinding Background}"
81-
BorderBrush="{TemplateBinding BorderBrush}"
82-
BorderThickness="{TemplateBinding BorderThickness}">
83-
<Grid.RenderTransform>
84-
<CompositeTransform />
85-
</Grid.RenderTransform>
68+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
69+
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
70+
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding VerticalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
71+
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}" Value="0" />
72+
</DoubleAnimationUsingKeyFrames>
73+
</Storyboard>
74+
</VisualState>
75+
</VisualStateGroup>
76+
</VisualStateManager.VisualStateGroups>
77+
<Grid x:Name="RootGrid"
78+
RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}"
79+
Margin="{TemplateBinding Margin}"
80+
Padding="{TemplateBinding Padding}"
81+
MaxWidth="{TemplateBinding MaxWidth}"
82+
Visibility="{TemplateBinding Visibility}"
83+
Background="{TemplateBinding Background}"
84+
BorderBrush="{TemplateBinding BorderBrush}"
85+
BorderThickness="{TemplateBinding BorderThickness}">
86+
<Grid.RenderTransform>
87+
<CompositeTransform />
88+
</Grid.RenderTransform>
8689

87-
<Grid.ColumnDefinitions>
88-
<ColumnDefinition Width="*" />
89-
<ColumnDefinition Width="Auto" />
90-
</Grid.ColumnDefinitions>
90+
<Grid.ColumnDefinitions>
91+
<ColumnDefinition Width="*" />
92+
<ColumnDefinition Width="Auto" />
93+
</Grid.ColumnDefinitions>
9194

92-
<ContentPresenter x:Name="PART_Presenter"
93-
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
94-
HorizontalContentAlignment="Stretch"
95-
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
96-
VerticalContentAlignment="Center"
97-
TextWrapping="WrapWholeWords" />
98-
</Grid>
99-
</Grid>
100-
</ControlTemplate>
95+
<ContentPresenter x:Name="PART_Presenter"
96+
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
97+
HorizontalContentAlignment="Stretch"
98+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
99+
VerticalContentAlignment="Center"
100+
TextWrapping="WrapWholeWords" />
101+
</Grid>
102+
</Grid>
103+
</ControlTemplate>
104+
</Setter.Value>
105+
</Setter>
106+
</Style>
101107

102108
<Style x:Key="DismissTextBlockButtonStyle" TargetType="ButtonBase">
103109
<Setter Property="Background" Value="{ThemeResource HyperlinkButtonBackground}" />
@@ -162,7 +168,7 @@
162168
<VisualState x:Name="NarrowState">
163169
<VisualState.Setters>
164170
<Setter Target="TextBlock.Margin" Value="0" />
165-
171+
166172
<Setter Target="ButtonsStackPanel.(Grid.Row)" Value="1" />
167173
<Setter Target="ButtonsStackPanel.(Grid.Column)" Value="0" />
168174
<Setter Target="ButtonsStackPanel.(Grid.ColumnSpan)" Value="3" />
@@ -229,7 +235,7 @@
229235
Height="32"
230236
Width="100"
231237
Command="{StaticResource DismissCommand}"
232-
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
238+
CommandParameter="{Binding ElementName=ExampleCustomInAppNotification}"
233239
AutomationProperties.Name="Ok" />
234240

235241
<Button x:Name="CancelButton"
@@ -239,9 +245,8 @@
239245
Height="32"
240246
Width="100"
241247
Command="{StaticResource DismissCommand}"
242-
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
248+
CommandParameter="{Binding ElementName=ExampleCustomInAppNotification}"
243249
AutomationProperties.Name="Cancel"/>
244-
245250
</StackPanel>
246251

247252
<Button x:Name="DismissButton"
@@ -255,7 +260,7 @@
255260
FontFamily="Segoe MDL2 Assets"
256261
AutomationProperties.Name="Dismiss"
257262
Command="{StaticResource DismissCommand}"
258-
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
263+
CommandParameter="{Binding ElementName=ExampleCustomInAppNotification}"
259264
VerticalAlignment="Center"
260265
Visibility="{Binding ShowDismissButton, ElementName=ExampleCustomInAppNotification}">
261266
<Button.RenderTransform>
@@ -301,11 +306,12 @@
301306

302307
<controls:InAppNotification x:Name="ExampleCustomInAppNotification"
303308
Content="This is a test message."
304-
Template="{StaticResource MSEdgeNotificationTemplate_NoDismissButton}"
309+
Style="{StaticResource MSEdgeNotificationTemplate_NoDismissButton}"
305310
ShowDismissButton="@[ShowDismissButton]"
306-
AnimationDuration="@[AnimationDuration:TimeSpan:100:0-5000]"
307-
VerticalOffset="@[VerticalOffset:DoubleSlider:100.0:-200.0-200.0]"
308-
HorizontalOffset="@[HorizontalOffset:DoubleSlider:0.0:-200.0-200.0]" />
311+
AnimationDuration="@[AnimationDuration]"
312+
VerticalOffset="@[VerticalOffset]"
313+
HorizontalOffset="@[HorizontalOffset]"
314+
StackMode="@[StackMode]" />
309315

310316
<controls:InAppNotification x:Name="ExampleVSCodeInAppNotification"
311317
Style="{StaticResource VSCodeNotificationStyle}"

0 commit comments

Comments
 (0)