Fixed the bug in InAppNotifications with datatemplate

This commit is contained in:
Shane Weaver 2021-03-02 12:37:04 -08:00
Родитель d5d569c243
Коммит 5932530c5e
3 изменённых файлов: 105 добавлений и 95 удалений

Просмотреть файл

@ -17,7 +17,6 @@ namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
private InAppNotification _exampleInAppNotification;
private InAppNotification _exampleCustomInAppNotification;
private InAppNotification _exampleVSCodeInAppNotification;
private DataTemplate _inAppNotificationWithButtonsTemplate;
private ResourceDictionary _resources;
public bool IsRootGridActualWidthLargerThan700 { get; set; }
@ -44,13 +43,6 @@ namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
{
notificationDurationTextBox.TextChanged += NotificationDurationTextBox_TextChanged;
}
object inAppNotificationWithButtonsTemplateResource = null;
bool? isTemplatePresent = _resources?.TryGetValue("InAppNotificationWithButtonsTemplate", out inAppNotificationWithButtonsTemplateResource);
if (isTemplatePresent == true && inAppNotificationWithButtonsTemplateResource is DataTemplate inAppNotificationWithButtonsTemplate)
{
_inAppNotificationWithButtonsTemplate = inAppNotificationWithButtonsTemplate;
}
}
private void Load()
@ -133,8 +125,12 @@ namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
_exampleVSCodeInAppNotification.Dismiss(true);
_exampleInAppNotification.Dismiss(true);
var templateContent = _inAppNotificationWithButtonsTemplate.LoadContent();
_exampleCustomInAppNotification.Show(templateContent, NotificationDuration);
object inAppNotificationWithButtonsTemplateResource = null;
bool? isTemplatePresent = _resources?.TryGetValue("InAppNotificationWithButtonsTemplate", out inAppNotificationWithButtonsTemplateResource);
if (isTemplatePresent == true && inAppNotificationWithButtonsTemplateResource is DataTemplate inAppNotificationWithButtonsTemplate)
{
_exampleCustomInAppNotification.Show(inAppNotificationWithButtonsTemplate, NotificationDuration);
}
});
SampleController.Current.RegisterNewCommand("Show notification with Visual Studio Code template (info notification)", (sender, args) =>

Просмотреть файл

@ -18,86 +18,92 @@
<local:DismissCommand x:Key="DismissCommand" />
<ControlTemplate x:Key="MSEdgeNotificationTemplate_NoDismissButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="State">
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}"
Value="{Binding HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
<Style TargetType="controls:InAppNotification" x:Key="MSEdgeNotificationTemplate_NoDismissButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="State">
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}"
Value="{Binding HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}"
Value="{Binding VerticalOffset, RelativeSource={RelativeSource TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}"
Value="{Binding VerticalOffset, RelativeSource={RelativeSource TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Visible">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}" Value="0" />
</DoubleAnimationUsingKeyFrames>
<VisualState x:Name="Visible">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding VerticalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="RootGrid"
RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}"
MaxWidth="{TemplateBinding MaxWidth}"
Visibility="{TemplateBinding Visibility}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid.RenderTransform>
<CompositeTransform />
</Grid.RenderTransform>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding VerticalOffset, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame controls:InAppNotification.KeyFrameDuration="{Binding AnimationDuration, RelativeSource={RelativeSource TemplatedParent}}" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="RootGrid"
RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}"
MaxWidth="{TemplateBinding MaxWidth}"
Visibility="{TemplateBinding Visibility}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid.RenderTransform>
<CompositeTransform />
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="PART_Presenter"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
HorizontalContentAlignment="Stretch"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalContentAlignment="Center"
TextWrapping="WrapWholeWords" />
</Grid>
</Grid>
</ControlTemplate>
<ContentPresenter x:Name="PART_Presenter"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
HorizontalContentAlignment="Stretch"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalContentAlignment="Center"
TextWrapping="WrapWholeWords" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DismissTextBlockButtonStyle" TargetType="ButtonBase">
<Setter Property="Background" Value="{ThemeResource HyperlinkButtonBackground}" />
@ -162,7 +168,7 @@
<VisualState x:Name="NarrowState">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="0" />
<Setter Target="ButtonsStackPanel.(Grid.Row)" Value="1" />
<Setter Target="ButtonsStackPanel.(Grid.Column)" Value="0" />
<Setter Target="ButtonsStackPanel.(Grid.ColumnSpan)" Value="3" />
@ -229,7 +235,7 @@
Height="32"
Width="100"
Command="{StaticResource DismissCommand}"
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
CommandParameter="{Binding ElementName=ExampleCustomInAppNotification}"
AutomationProperties.Name="Ok" />
<Button x:Name="CancelButton"
@ -239,9 +245,8 @@
Height="32"
Width="100"
Command="{StaticResource DismissCommand}"
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
CommandParameter="{Binding ElementName=ExampleCustomInAppNotification}"
AutomationProperties.Name="Cancel"/>
</StackPanel>
<Button x:Name="DismissButton"
@ -255,7 +260,7 @@
FontFamily="Segoe MDL2 Assets"
AutomationProperties.Name="Dismiss"
Command="{StaticResource DismissCommand}"
CommandParameter="{Binding ElementName=ExampleInAppNotification}"
CommandParameter="{Binding ElementName=ExampleCustomInAppNotification}"
VerticalAlignment="Center"
Visibility="{Binding ShowDismissButton, ElementName=ExampleCustomInAppNotification}">
<Button.RenderTransform>
@ -301,11 +306,12 @@
<controls:InAppNotification x:Name="ExampleCustomInAppNotification"
Content="This is a test message."
Template="{StaticResource MSEdgeNotificationTemplate_NoDismissButton}"
Style="{StaticResource MSEdgeNotificationTemplate_NoDismissButton}"
ShowDismissButton="@[ShowDismissButton]"
AnimationDuration="@[AnimationDuration:TimeSpan:100:0-5000]"
VerticalOffset="@[VerticalOffset:DoubleSlider:100.0:-200.0-200.0]"
HorizontalOffset="@[HorizontalOffset:DoubleSlider:0.0:-200.0-200.0]" />
AnimationDuration="@[AnimationDuration]"
VerticalOffset="@[VerticalOffset]"
HorizontalOffset="@[HorizontalOffset]"
StackMode="@[StackMode]" />
<controls:InAppNotification x:Name="ExampleVSCodeInAppNotification"
Style="{StaticResource VSCodeNotificationStyle}"

Просмотреть файл

@ -248,8 +248,16 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
_contentProvider.Content = element;
break;
case DataTemplate dataTemplate:
_contentProvider.Content = null;
_contentProvider.ContentTemplate = dataTemplate;
// Without this check, the dataTemplate will fail to render.
// Why? Setting the ContentTemplate causes the control to re-evaluate it's Content value.
// When we set the ContentTemplate to the same instance of itself, we aren't actually changing the value.
// This means that the Content value won't be re-evaluated and stay null, causing the render to fail.
if (_contentProvider.ContentTemplate != dataTemplate)
{
_contentProvider.ContentTemplate = dataTemplate;
_contentProvider.Content = null;
}
break;
case object content:
_contentProvider.ContentTemplate = ContentTemplate;