dan/NotificationFlyout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved EntranceThemeTransition and ThemeShadow to the Presenter style, this allows the margin to be set around the content of the shadow thus allowing you to offset the flyout via the margin property

Browse Source
This commit is contained in:
Daniel Clark
2021-02-15 15:19:57 +00:00
parent 68107307b0
commit b96155be73
5 changed files with 71 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/NotificationFlyoutSample/Shell.xaml
+1
View File
@@ -8,6 +8,7 @@
<controls:NotificationFlyout.FlyoutPresenterStyle>
<Style TargetType="controls:NotificationFlyoutPresenter">
<Setter Property="CornerRadius" Value="8" />
<Setter Property="Margin" Value="8" />
</Style>
</controls:NotificationFlyout.FlyoutPresenterStyle>
<controls:NotificationFlyout.ContextMenu>
src/TheXamlGuy.NotificationFlyout.Uwp.UI.Controls/NotificationFlyoutHost/NotificationFlyoutHost.cs
+6 -27
View File
@@ -20,11 +20,8 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
new PropertyMetadata(null));
private Flyout _flyout;
private bool _isColorPrevalence;
private bool _isLoaded;
private NotificationFlyout _notificationFlyout;
private NotificationFlyoutPresenter _notificationFlyoutPresenter;
private string _placement;
private Grid _root;
public NotificationFlyoutHost() => DefaultStyleKey = typeof(NotificationFlyoutHost);
@@ -49,8 +46,8 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
public void SetFlyoutPlacement(string placement)
{
_placement = placement;
UpdateFlyoutVisualState();
if (_notificationFlyoutPresenter == null) return;
_notificationFlyoutPresenter.UpdatePlacementVisualState(placement);
}
public void SetOwningFlyout(NotificationFlyout flyout)
@@ -96,7 +93,6 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
public void UpdateTheme(bool isColorPrevalence)
{
_isColorPrevalence = isColorPrevalence;
if (_notificationFlyoutPresenter == null) return;
_notificationFlyoutPresenter.UpdateThemeVisualState(isColorPrevalence);
}
@@ -104,9 +100,11 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
protected override void OnApplyTemplate()
{
_notificationFlyoutPresenter = GetTemplateChild("NotificationFlyoutPresenter") as NotificationFlyoutPresenter;
_notificationFlyoutPresenter.ApplyTemplate();
_notificationFlyoutPresenter.UpdateThemeVisualState(_isColorPrevalence);
if (_notificationFlyoutPresenter != null)
{
_notificationFlyoutPresenter.ApplyTemplate();
}
_flyout = GetTemplateChild("Flyout") as Flyout;
if (_flyout != null)
@@ -123,17 +121,6 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
}
_root = GetTemplateChild("Root") as Grid;
if (GetTemplateChild("ContentRoot") is Grid contentRoot)
{
contentRoot.Shadow = new ThemeShadow();
var currentTranslation = contentRoot.Translation;
var translation = new Vector3(currentTranslation.X, currentTranslation.Y, 16.0f);
contentRoot.Translation = translation;
}
_isLoaded = true;
UpdateFlyoutVisualState();
}
private void OnFlyoutClosed(object sender, object args) => _notificationFlyout?.InvokeClosedEvent(args);
@@ -143,13 +130,5 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
private void OnFlyoutOpened(object sender, object args) => _notificationFlyout?.InvokeOpenedEvent(args);
private void OnFlyoutOpening(object sender, object args) => _notificationFlyout?.InvokeOpeningEvent(args);
private void UpdateFlyoutVisualState()
{
if (!_isLoaded) return;
if (string.IsNullOrEmpty(_placement)) return;
VisualStateManager.GoToState(this, _placement, true);
}
}
}
src/TheXamlGuy.NotificationFlyout.Uwp.UI.Controls/NotificationFlyoutHost/NotificationFlyoutHost.xaml
+12 -22
View File
@@ -54,20 +54,10 @@
AreOpenCloseAnimationsEnabled="False"
FlyoutPresenterStyle="{StaticResource BottomFlyoutPresenterStyle}"
ShouldConstrainToRootBounds="False">
<Grid x:Name="ContentRoot">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition
x:Name="EntranceThemeTransition"
FromHorizontalOffset="0"
FromVerticalOffset="0" />
</TransitionCollection>
</Grid.Transitions>
<controls:NotificationFlyoutPresenter
x:Name="NotificationFlyoutPresenter"
Content="{TemplateBinding Content}"
Style="{TemplateBinding FlyoutPresenterStyle}" />
</Grid>
<controls:NotificationFlyoutPresenter
x:Name="NotificationFlyoutPresenter"
Content="{TemplateBinding Content}"
Style="{TemplateBinding FlyoutPresenterStyle}" />
</Flyout>
</FlyoutBase.AttachedFlyout>
<VisualStateManager.VisualStateGroups>
@@ -75,29 +65,29 @@
<VisualState x:Name="Bottom">
<VisualState.Setters>
<Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource BottomFlyoutPresenterStyle}" />
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="80" />
<!--<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="80" />-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Top">
<VisualState.Setters>
<Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource TopFlyoutPresenterStyle}" />
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="-80" />
<!--<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="-80" />-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Left">
<VisualState.Setters>
<Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource LeftFlyoutPresenterStyle}" />
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="-80" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" />
<!--<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="-80" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" />-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Right">
<VisualState.Setters>
<Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource RightFlyoutPresenterStyle}" />
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="80" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" />
<!--<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="80" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" />-->
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
src/TheXamlGuy.NotificationFlyout.Uwp.UI.Controls/NotificationFlyoutPresenter/NotificationFlyoutPresenter.cs
+16 -3
View File
@@ -1,15 +1,28 @@
using Windows.UI.Xaml;
using System.Numerics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
{
public class NotificationFlyoutPresenter : ContentControl
{
public NotificationFlyoutPresenter()
public NotificationFlyoutPresenter() => DefaultStyleKey = typeof(NotificationFlyoutPresenter);
protected override void OnApplyTemplate()
{
DefaultStyleKey = typeof(NotificationFlyoutPresenter);
if (GetTemplateChild("Root") is Grid contentRoot)
{
contentRoot.Shadow = new ThemeShadow();
var currentTranslation = contentRoot.Translation;
var translation = new Vector3(currentTranslation.X, currentTranslation.Y, 16.0f);
contentRoot.Translation = translation;
}
}
internal void UpdatePlacementVisualState(string placement) => VisualStateManager.GoToState(this, placement, true);
internal void UpdateThemeVisualState(bool isColorPrevalence) => VisualStateManager.GoToState(this, isColorPrevalence ? "ColorPrevalenceTheme" : "DefaultTheme", true);
}
}
src/TheXamlGuy.NotificationFlyout.Uwp.UI.Controls/NotificationFlyoutPresenter/NotificationFlyoutPresenter.xaml
+36 -2
View File
@@ -35,7 +35,7 @@
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:NotificationFlyoutPresenter">
<Border
<Grid
x:Name="Root"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
@@ -43,6 +43,14 @@
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition
x:Name="EntranceThemeTransition"
FromHorizontalOffset="0"
FromVerticalOffset="0" />
</TransitionCollection>
</Grid.Transitions>
<ScrollViewer
x:Name="ScrollViewer"
AutomationProperties.AccessibilityView="Raw"
@@ -61,6 +69,32 @@
ContentTransitions="{TemplateBinding ContentTransitions}" />
</ScrollViewer>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PlacementStates">
<VisualState x:Name="Bottom">
<VisualState.Setters>
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="80" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Top">
<VisualState.Setters>
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="-80" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Left">
<VisualState.Setters>
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="-80" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Right">
<VisualState.Setters>
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="80" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ThemeStates">
<VisualState x:Name="DefaultTheme" />
<VisualState x:Name="ColorPrevalenceTheme">
@@ -70,7 +104,7 @@
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>