tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

add fluent style notification cards.

pull/4233/head
Dan Walmsley 6 years ago
parent
bf0c8ae01d
commit
a752a11493
3 changed files with 113 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
  2. 8
      src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
  3. 176
      src/Avalonia.Themes.Fluent/NotificationCard.xaml

17
src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
View File

@ -339,12 +339,12 @@
<!-- Resources for ProgressBar.xaml -->
<x:Double x:Key="ProgressBarIndicatorPauseOpacity">0.6</x:Double>
<x:Double x:Key="ProgressBarThemeMinHeight">4</x:Double>
<Thickness x:Key="ProgressBarBorderThemeThickness">0</Thickness>
<Thickness x:Key="ProgressBarBorderThemeThickness">0</Thickness>
<SolidColorBrush x:Key="ProgressBarBackgroundThemeBrush" Color="#59FFFFFF" />
<SolidColorBrush x:Key="ProgressBarBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ProgressBarForegroundThemeBrush" Color="#FF5B2EC5" />
<SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="#FF8A57FF" />
<!-- Resources for TextBox.xaml -->
<SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" />
@ -493,6 +493,15 @@
<StaticResource x:Key="CalendarViewCalendarItemRevealBorderBrush" ResourceKey="SystemControlTransparentRevealBorderBrush" />
<StaticResource x:Key="CalendarViewNavigationButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="CalendarViewNavigationButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<!--Resources for NotificationCard.xaml -->
<SolidColorBrush x:Key="NotificationCardBackgroundBrush" Color="#1F1F1F" />
<SolidColorBrush x:Key="NotificationCardProgressBackgroundBrush" Color="#9A9A9A" />
<SolidColorBrush x:Key="NotificationCardInformationBackgroundBrush" Color="#0078D4" />
<SolidColorBrush x:Key="NotificationCardSuccessBackgroundBrush" Color="#128B44" />
<SolidColorBrush x:Key="NotificationCardWarningBackgroundBrush" Color="#FFC316" />
<SolidColorBrush x:Key="NotificationCardErrorBackgroundBrush" Color="#F03916" />
<!-- Resources for RadioButton.xaml -->
<x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
<StaticResource x:Key="RadioButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
@ -700,7 +709,7 @@
<StaticResource x:Key="DateTimePickerFlyoutButtonBorderBrushPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="DateTimePickerFlyoutButtonForegroundPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="DateTimePickerFlyoutButtonForegroundPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<!-- Resources for TimePicker.xaml -->
<StaticResource x:Key="TimePickerSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
<StaticResource x:Key="TimePickerSpacerFillDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
@ -727,7 +736,7 @@
<StaticResource x:Key="TimePickerLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
<SolidColorBrush x:Key="TimePickerHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="TimePickerForegroundThemeBrush" Color="#FF000000" />
<!-- Resources for Pivot.xaml -->
<FontFamily x:Key="PivotHeaderItemFontFamily">XamlAutoFontFamily</FontFamily>
<FontFamily x:Key="PivotTitleFontFamily">XamlAutoFontFamily</FontFamily>

8
src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
View File

@ -490,6 +490,14 @@
<StaticResource x:Key="CalendarViewCalendarItemRevealBorderBrush" ResourceKey="SystemControlTransparentRevealBorderBrush" />
<StaticResource x:Key="CalendarViewNavigationButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="CalendarViewNavigationButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<!--Resources for NotificationCard.xaml -->
<SolidColorBrush x:Key="NotificationCardBackgroundBrush" Color="#444444" Opacity="0.75"/>
<SolidColorBrush x:Key="NotificationCardInformationBackgroundBrush" Color="#007ACC" Opacity="0.75"/>
<SolidColorBrush x:Key="NotificationCardSuccessBackgroundBrush" Color="#1F9E45" Opacity="0.75"/>
<SolidColorBrush x:Key="NotificationCardWarningBackgroundBrush" Color="#FDB328" Opacity="0.75"/>
<SolidColorBrush x:Key="NotificationCardErrorBackgroundBrush" Color="#BD202C" Opacity="0.75"/>
<!-- Resources for RadioButton.xaml -->
<x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
<StaticResource x:Key="RadioButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />

176
src/Avalonia.Themes.Fluent/NotificationCard.xaml
View File

@ -1,92 +1,100 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style Selector="NotificationCard">
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="Width" Value="350"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="RenderTransformOrigin" Value="50%,75%"/>
<Setter Property="Template">
<ControlTemplate>
<LayoutTransformControl Name="PART_LayoutTransformControl" UseRenderTransform="True">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="8,8,0,0">
<ContentControl Name="PART_Content" Content="{TemplateBinding Content}" />
</Border>
</LayoutTransformControl>
</ControlTemplate>
</Setter>
<Design.PreviewWith>
<Border Padding="20" Background="#2a2a2a">
<NotificationCard Content="Test" />
</Border>
</Design.PreviewWith>
<Style Selector="NotificationCard">
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="Width" Value="350"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="RenderTransformOrigin" Value="50%,75%"/>
<Setter Property="BorderThickness" Value="0 4 0 0" />
<Setter Property="Background" Value="{DynamicResource NotificationCardBackgroundBrush}" />
<Setter Property="BorderBrush" Value="#F03916" />
<Setter Property="Template">
<ControlTemplate>
<LayoutTransformControl Name="PART_LayoutTransformControl" UseRenderTransform="True">
<Border CornerRadius="{DynamicResource ControlCornerRadius}" BoxShadow="0 5 10 4 #2F000000" Margin="10 0 20 30">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{DynamicResource ControlCornerRadius}"
ClipToBounds="True">
<ContentControl Name="PART_Content" Content="{TemplateBinding Content}" />
</Border>
</Border>
</LayoutTransformControl>
</ControlTemplate>
</Setter>
<Style.Animations>
<Animation Duration="0:0:0.45" Easing="QuadraticEaseIn" FillMode="Forward">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="0"/>
<Setter Property="TranslateTransform.Y" Value="20"/>
<Setter Property="ScaleTransform.ScaleX" Value="0.85"/>
<Setter Property="ScaleTransform.ScaleY" Value="0.85"/>
</KeyFrame>
<KeyFrame Cue="30%">
<Setter Property="TranslateTransform.Y" Value="-20"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1"/>
<Setter Property="TranslateTransform.Y" Value="0"/>
<Setter Property="ScaleTransform.ScaleX" Value="1"/>
<Setter Property="ScaleTransform.ScaleY" Value="1"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style.Animations>
<Animation Duration="0:0:0.45" Easing="QuadraticEaseIn" FillMode="Forward">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="0"/>
<Setter Property="TranslateTransform.Y" Value="20"/>
<Setter Property="ScaleTransform.ScaleX" Value="0.85"/>
<Setter Property="ScaleTransform.ScaleY" Value="0.85"/>
</KeyFrame>
<KeyFrame Cue="30%">
<Setter Property="TranslateTransform.Y" Value="-20"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1"/>
<Setter Property="TranslateTransform.Y" Value="0"/>
<Setter Property="ScaleTransform.ScaleX" Value="1"/>
<Setter Property="ScaleTransform.ScaleY" Value="1"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="NotificationCard/template/ ContentControl#PART_Content">
<Setter Property="MinHeight" Value="150" />
</Style>
<Style Selector="NotificationCard/template/ ContentControl#PART_Content">
<Setter Property="MinHeight" Value="64" />
</Style>
<Style Selector="NotificationCard[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Setter Property="RenderTransformOrigin" Value="50%,0%"/>
<Style.Animations>
<Animation Duration="0:0:0.75" Easing="QuadraticEaseOut" FillMode="Forward">
<KeyFrame Cue="0%">
<Setter Property="TranslateTransform.X" Value="0"/>
<Setter Property="ScaleTransform.ScaleY" Value="1"/>
</KeyFrame>
<KeyFrame Cue="70%">
<Setter Property="TranslateTransform.X" Value="800"/>
<Setter Property="ScaleTransform.ScaleY" Value="1"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="ScaleTransform.ScaleY" Value="0"/>
<Setter Property="TranslateTransform.X" Value="800"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="NotificationCard[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Setter Property="RenderTransformOrigin" Value="50%,0%"/>
<Style.Animations>
<Animation Duration="0:0:0.75" Easing="QuadraticEaseOut" FillMode="Forward">
<KeyFrame Cue="0%">
<Setter Property="TranslateTransform.X" Value="0"/>
<Setter Property="ScaleTransform.ScaleY" Value="1"/>
</KeyFrame>
<KeyFrame Cue="70%">
<Setter Property="TranslateTransform.X" Value="800"/>
<Setter Property="ScaleTransform.ScaleY" Value="1"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="ScaleTransform.ScaleY" Value="0"/>
<Setter Property="TranslateTransform.X" Value="800"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="NotificationCard[IsClosing=true]">
<Style.Animations>
<Animation Duration="0:0:1.25" Easing="QuadraticEaseOut" FillMode="Forward">
<KeyFrame Cue="100%">
<Setter Property="IsClosed" Value="True"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="NotificationCard[IsClosing=true]">
<Style.Animations>
<Animation Duration="0:0:1.25" Easing="QuadraticEaseOut" FillMode="Forward">
<KeyFrame Cue="100%">
<Setter Property="IsClosed" Value="True"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="NotificationCard">
<Setter Property="Background" Value="{DynamicResource NotificationCardBackgroundBrush}"/>
</Style>
<Style Selector="NotificationCard:information">
<Setter Property="Background" Value="{DynamicResource NotificationCardInformationBackgroundBrush}"/>
</Style>
<Style Selector="NotificationCard:success">
<Setter Property="Background" Value="{DynamicResource NotificationCardSuccessBackgroundBrush}"/>
</Style>
<Style Selector="NotificationCard:warning">
<Setter Property="Background" Value="{DynamicResource NotificationCardWarningBackgroundBrush}"/>
</Style>
<Style Selector="NotificationCard:error">
<Setter Property="Background" Value="{DynamicResource NotificationCardErrorBackgroundBrush}"/>
</Style>
<Style Selector="NotificationCard:information">
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardInformationBackgroundBrush}"/>
</Style>
<Style Selector="NotificationCard:success">
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardSuccessBackgroundBrush}"/>
</Style>
<Style Selector="NotificationCard:warning">
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardWarningBackgroundBrush}"/>
</Style>
<Style Selector="NotificationCard:error">
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardErrorBackgroundBrush}"/>
</Style>
</Styles>

Write Preview
Loading…
Cancel
Save