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> <controls:NotificationFlyout.FlyoutPresenterStyle>
<Style TargetType="controls:NotificationFlyoutPresenter"> <Style TargetType="controls:NotificationFlyoutPresenter">
<Setter Property="CornerRadius" Value="8" /> <Setter Property="CornerRadius" Value="8" />
<Setter Property="Margin" Value="8" />
</Style> </Style>
</controls:NotificationFlyout.FlyoutPresenterStyle> </controls:NotificationFlyout.FlyoutPresenterStyle>
<controls:NotificationFlyout.ContextMenu> <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)); new PropertyMetadata(null));
private Flyout _flyout; private Flyout _flyout;
private bool _isColorPrevalence;
private bool _isLoaded;
private NotificationFlyout _notificationFlyout; private NotificationFlyout _notificationFlyout;
private NotificationFlyoutPresenter _notificationFlyoutPresenter; private NotificationFlyoutPresenter _notificationFlyoutPresenter;
private string _placement;
private Grid _root; private Grid _root;
public NotificationFlyoutHost() => DefaultStyleKey = typeof(NotificationFlyoutHost); public NotificationFlyoutHost() => DefaultStyleKey = typeof(NotificationFlyoutHost);
@@ -49,8 +46,8 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
public void SetFlyoutPlacement(string placement) public void SetFlyoutPlacement(string placement)
{ {
_placement = placement; if (_notificationFlyoutPresenter == null) return;
UpdateFlyoutVisualState(); _notificationFlyoutPresenter.UpdatePlacementVisualState(placement);
} }
public void SetOwningFlyout(NotificationFlyout flyout) public void SetOwningFlyout(NotificationFlyout flyout)
@@ -96,7 +93,6 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
public void UpdateTheme(bool isColorPrevalence) public void UpdateTheme(bool isColorPrevalence)
{ {
_isColorPrevalence = isColorPrevalence;
if (_notificationFlyoutPresenter == null) return; if (_notificationFlyoutPresenter == null) return;
_notificationFlyoutPresenter.UpdateThemeVisualState(isColorPrevalence); _notificationFlyoutPresenter.UpdateThemeVisualState(isColorPrevalence);
} }
@@ -104,9 +100,11 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
protected override void OnApplyTemplate() protected override void OnApplyTemplate()
{ {
_notificationFlyoutPresenter = GetTemplateChild("NotificationFlyoutPresenter") as NotificationFlyoutPresenter; _notificationFlyoutPresenter = GetTemplateChild("NotificationFlyoutPresenter") as NotificationFlyoutPresenter;
_notificationFlyoutPresenter.ApplyTemplate();
_notificationFlyoutPresenter.UpdateThemeVisualState(_isColorPrevalence); if (_notificationFlyoutPresenter != null)
{
_notificationFlyoutPresenter.ApplyTemplate();
}
_flyout = GetTemplateChild("Flyout") as Flyout; _flyout = GetTemplateChild("Flyout") as Flyout;
if (_flyout != null) if (_flyout != null)
@@ -123,17 +121,6 @@ namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
} }
_root = GetTemplateChild("Root") as Grid; _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); 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 OnFlyoutOpened(object sender, object args) => _notificationFlyout?.InvokeOpenedEvent(args);
private void OnFlyoutOpening(object sender, object args) => _notificationFlyout?.InvokeOpeningEvent(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" AreOpenCloseAnimationsEnabled="False"
FlyoutPresenterStyle="{StaticResource BottomFlyoutPresenterStyle}" FlyoutPresenterStyle="{StaticResource BottomFlyoutPresenterStyle}"
ShouldConstrainToRootBounds="False"> ShouldConstrainToRootBounds="False">
<Grid x:Name="ContentRoot"> <controls:NotificationFlyoutPresenter
<Grid.Transitions> x:Name="NotificationFlyoutPresenter"
<TransitionCollection> Content="{TemplateBinding Content}"
<EntranceThemeTransition Style="{TemplateBinding FlyoutPresenterStyle}" />
x:Name="EntranceThemeTransition"
FromHorizontalOffset="0"
FromVerticalOffset="0" />
</TransitionCollection>
</Grid.Transitions>
<controls:NotificationFlyoutPresenter
x:Name="NotificationFlyoutPresenter"
Content="{TemplateBinding Content}"
Style="{TemplateBinding FlyoutPresenterStyle}" />
</Grid>
</Flyout> </Flyout>
</FlyoutBase.AttachedFlyout> </FlyoutBase.AttachedFlyout>
<VisualStateManager.VisualStateGroups> <VisualStateManager.VisualStateGroups>
@@ -75,29 +65,29 @@
<VisualState x:Name="Bottom"> <VisualState x:Name="Bottom">
<VisualState.Setters> <VisualState.Setters>
<Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource BottomFlyoutPresenterStyle}" /> <Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource BottomFlyoutPresenterStyle}" />
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" /> <!--<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="80" /> <Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="80" />-->
</VisualState.Setters> </VisualState.Setters>
</VisualState> </VisualState>
<VisualState x:Name="Top"> <VisualState x:Name="Top">
<VisualState.Setters> <VisualState.Setters>
<Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource TopFlyoutPresenterStyle}" /> <Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource TopFlyoutPresenterStyle}" />
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" /> <!--<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="0" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="-80" /> <Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="-80" />-->
</VisualState.Setters> </VisualState.Setters>
</VisualState> </VisualState>
<VisualState x:Name="Left"> <VisualState x:Name="Left">
<VisualState.Setters> <VisualState.Setters>
<Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource LeftFlyoutPresenterStyle}" /> <Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource LeftFlyoutPresenterStyle}" />
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="-80" /> <!--<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="-80" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" /> <Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" />-->
</VisualState.Setters> </VisualState.Setters>
</VisualState> </VisualState>
<VisualState x:Name="Right"> <VisualState x:Name="Right">
<VisualState.Setters> <VisualState.Setters>
<Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource RightFlyoutPresenterStyle}" /> <Setter Target="Flyout.FlyoutPresenterStyle" Value="{StaticResource RightFlyoutPresenterStyle}" />
<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="80" /> <!--<Setter Target="EntranceThemeTransition.FromHorizontalOffset" Value="80" />
<Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" /> <Setter Target="EntranceThemeTransition.FromVerticalOffset" Value="0" />-->
</VisualState.Setters> </VisualState.Setters>
</VisualState> </VisualState>
</VisualStateGroup> </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.Controls;
using Windows.UI.Xaml.Media;
namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls namespace TheXamlGuy.NotificationFlyout.Uwp.UI.Controls
{ {
public class NotificationFlyoutPresenter : ContentControl 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); 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 Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="controls:NotificationFlyoutPresenter"> <ControlTemplate TargetType="controls:NotificationFlyoutPresenter">
<Border <Grid
x:Name="Root" x:Name="Root"
Padding="{TemplateBinding Padding}" Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
@@ -43,6 +43,14 @@
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition
x:Name="EntranceThemeTransition"
FromHorizontalOffset="0"
FromVerticalOffset="0" />
</TransitionCollection>
</Grid.Transitions>
<ScrollViewer <ScrollViewer
x:Name="ScrollViewer" x:Name="ScrollViewer"
AutomationProperties.AccessibilityView="Raw" AutomationProperties.AccessibilityView="Raw"
@@ -61,6 +69,32 @@
ContentTransitions="{TemplateBinding ContentTransitions}" /> ContentTransitions="{TemplateBinding ContentTransitions}" />
</ScrollViewer> </ScrollViewer>
<VisualStateManager.VisualStateGroups> <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"> <VisualStateGroup x:Name="ThemeStates">
<VisualState x:Name="DefaultTheme" /> <VisualState x:Name="DefaultTheme" />
<VisualState x:Name="ColorPrevalenceTheme"> <VisualState x:Name="ColorPrevalenceTheme">
@@ -70,7 +104,7 @@
</VisualState> </VisualState>
</VisualStateGroup> </VisualStateGroup>
</VisualStateManager.VisualStateGroups> </VisualStateManager.VisualStateGroups>
</Border> </Grid>
</ControlTemplate> </ControlTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>