Skip to content

Commit

Permalink
chore: update appbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xiaoy312
Xiaoy312 committed Nov 9, 2023
1 parent bbc76a5 commit a39422c
Show file tree
Hide file tree
Showing 2 changed files with 348 additions and 5 deletions.
343 changes: 338 additions & 5 deletions Uno.Gallery/Uno.Gallery.Shared/Views/Shell.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,193 @@
xmlns:local="using:Uno.Gallery"
xmlns:not_wasm="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:utu="using:Uno.Toolkit.UI"
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:wasm="http://uno.ui/wasm"
xmlns:xamarin="http://uno.ui/xamarin"
mc:Ignorable="wasm xamarin">
xmlns:todo="what should be done"
mc:Ignorable="wasm xamarin todo">

<UserControl.Resources>
<Style x:Key="AppBarButtonStyle"
TargetType="Button">
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
<Setter Property="Margin" Value="27.2,11.2" />

<Setter Property="FontSize" Value="19" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="{ThemeResource BodyMediumFontFamily}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource UnoPurpleColorBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource UnoPurpleColorBrush}" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarDropdownButtonStyle"
TargetType="Button">
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
<Setter Property="Margin" Value="27.2,11.2" />

<Setter Property="FontSize" Value="19" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="{ThemeResource BodyMediumFontFamily}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal"
Spacing="8">
<ContentPresenter Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
<PathIcon todo:Data="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
Data="M 7.41 6.58 L 12 11.17 L 16.59 6.58 L 18 8 L 12 14 L 6 8 L 7.41 6.58 Z"
VerticalAlignment="Center" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarCtaButtonStyle"
TargetType="Button">
<Setter Property="Background" Value="{StaticResource UnoGreenColorBrush}" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="Padding" Value="32,8" />
<Setter Property="Margin" Value="16,0" />

<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontFamily" Value="{ThemeResource BodyMediumFontFamily}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<!-- todo: add gradient animation -->
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="{StaticResource UnoBlueColorBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="{StaticResource UnoPurpleColorBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarMenuFlyoutPresenterStyle"
TargetType="MenuFlyoutPresenter">
<Setter Property="Background" Value="{ThemeResource SurfaceBrush}" />
<Setter Property="Padding" Value="20" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<utu:ShadowContainer Background="{TemplateBinding Background}">
<utu:ShadowContainer.Shadows>
<utu:ShadowCollection x:Name="Shadows">
<utu:Shadow OffsetX="0" OffsetY="0" BlurRadius="20" Spread="2" Color="{ThemeResource OutlineColor}" Opacity="0.2" />
</utu:ShadowCollection>
</utu:ShadowContainer.Shadows>

<ItemsPresenter Padding="{TemplateBinding Padding}" />
</utu:ShadowContainer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarMenuFlyoutItemStyle"
TargetType="MenuFlyoutItem">
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="10" />

<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="{ThemeResource BodyMediumFontFamily}" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutItem">
<Grid x:Name="RootGrid"
Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="TextBlock.Foreground" Value="{StaticResource UnoPurpleColorBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="TextBlock.Foreground" Value="{StaticResource UnoPurpleColorBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<TextBlock x:Name="TextBlock"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding Text}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
FontFamily="{TemplateBinding FontFamily}"
MaxLines="1"
TextTrimming="CharacterEllipsis"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppBarHeaderMenuFlyoutItemStyle"
BasedOn="{StaticResource AppBarMenuFlyoutItemStyle}"
TargetType="MenuFlyoutItem">
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
</UserControl.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

Expand All @@ -20,9 +203,159 @@
</Grid.RowDefinitions>

<!-- Banner similar to the Uno website (WASM only) -->
<wasm:Border Grid.Row="1">
<local:Banner />
</wasm:Border>
<wasm:Grid Grid.Row="1"
Padding="32,16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>

<Image Grid.Column="0"
Width="120"
Height="35"
IsTabStop="False"
wasm:Source="https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2021/03/24151905/uno-logo-tm.svg" />

<StackPanel Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right"
VerticalAlignment="Center">

<Button Content="PLATFORMS"
Style="{StaticResource AppBarDropdownButtonStyle}">
<Button.Flyout>
<MenuBarItemFlyout Placement="Bottom"
MenuFlyoutPresenterStyle="{StaticResource AppBarMenuFlyoutPresenterStyle}">
<MenuFlyoutItem Text="Overview"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/platforms/"
Style="{StaticResource AppBarHeaderMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="iOS and Android"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/ios-and-android/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Web (WebAssembly)"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-platform-for-web-webassembly/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Windows 10-11"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/windows-10-11/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Windows 7"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/windows7/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Linux"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-platform-for-linux/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="MacOS"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-platform-for-macos/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
</MenuBarItemFlyout>
</Button.Flyout>
</Button>
<Button Content="IDE &amp; TOOLS"
Style="{StaticResource AppBarDropdownButtonStyle}">
<Button.Flyout>
<MenuBarItemFlyout Placement="Bottom"
MenuFlyoutPresenterStyle="{StaticResource AppBarMenuFlyoutPresenterStyle}">
<MenuFlyoutItem Text="Visual Studio"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/visual-studio/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="VS Code"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/vs-code/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Rider"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/docs/articles/get-started-rider.html"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Reative/MVUX"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/reactive/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="MAUI Embedding"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/net-maui-embedding/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="C# Markup"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/c-markup/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Extensions"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-extensions/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Themes"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-themes/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Toolkit"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/uno-toolkit/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Figma"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/unofigma/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
</MenuBarItemFlyout>
</Button.Flyout>
</Button>
<Button Content="BLOG"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/blog/"
Style="{StaticResource AppBarButtonStyle}" />
<Button Content="DOCS"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/docs/articles/intro.html"
Style="{StaticResource AppBarButtonStyle}" />
<Button Content="RESOURCES"
Style="{StaticResource AppBarDropdownButtonStyle}">
<Button.Flyout>
<MenuBarItemFlyout Placement="Bottom"
MenuFlyoutPresenterStyle="{StaticResource AppBarMenuFlyoutPresenterStyle}">
<MenuFlyoutItem Text="Workshop - Simple Calc"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/simple-calc/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Workshop - Tube player"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/tube-player/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Code Samples"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/code-samples/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Uno Gallery"
Click="OnAppBarButtonClick"
Tag="https://gallery.platform.uno/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Uno Playgroud"
Click="OnAppBarButtonClick"
Tag="https://playground.platform.uno/#wasm-start"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Support"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/support/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
<MenuFlyoutItem Text="Contact Us"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/contact/"
Style="{StaticResource AppBarMenuFlyoutItemStyle}" />
</MenuBarItemFlyout>
</Button.Flyout>
</Button>
<Button Content="Get Started"
Click="OnAppBarButtonClick"
Tag="https://platform.uno/docs/articles/getting-started-tutorial-1.html"
Style="{StaticResource AppBarCtaButtonStyle}" />
</StackPanel>
</wasm:Grid>

<!-- We set CompactModeThresholdWidth to a very high value so that it never happens. We don't want to use the compact mode. -->
<muxc:NavigationView Grid.Row="2"
Expand Down Expand Up @@ -51,7 +384,7 @@
HorizontalAlignment="Left" />

<!-- Dark/Light Toggle -->
<ToggleButton x:Name="DarkLightModeToggle"
<ToggleButton x:Name="DarkLightModeToggle"
Content="Light and Dark"
Style="{StaticResource DarkLightToggleTheme}"
Click="ToggleButton_Click"
Expand Down
10 changes: 10 additions & 0 deletions Uno.Gallery/Uno.Gallery.Shared/Views/Shell.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using MUXC = Microsoft.UI.Xaml.Controls;
using System.Threading.Tasks;
using Windows.System;

namespace Uno.Gallery
{
Expand Down Expand Up @@ -245,5 +247,13 @@ private void CtrlF_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvoke
{
SamplesSearchBox.Focus(FocusState.Programmatic);
}

private async void OnAppBarButtonClick(object sender, RoutedEventArgs e)
{
if (sender is FrameworkElement { Tag: string { Length: >0 } url })
{
await Launcher.LaunchUriAsync(new Uri(url));
}
}
}
}

0 comments on commit a39422c

Please sign in to comment.