Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove platform specific, native commandBar styles #1421

Merged
merged 1 commit into from
Jun 18, 2024
Merged

chore: remove platform specific, native commandBar styles #1421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 7 additions & 107 deletions src/library/Uno.Material/Styles/Controls/v2/CommandBar.xaml
View file
Open in desktop
Kunal22shah marked this conversation as resolved.
Show resolved Hide resolved
Kunal22shah marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@
xmlns:uuc="using:Uno.UI.Controls"
mc:Ignorable="android ios">

<!-- Define Material properties for CommandBar -->
<x:Double x:Key="MaterialCommandBarElevation">4</x:Double>
<x:Double x:Key="MaterialCommandBarHeight">48</x:Double>

<!-- Define Material AppBarButton Style -->
<Style x:Key="MaterialAppBarButtonStyle"
TargetType="AppBarButton">
<Setter Property="Height" Value="{StaticResource MaterialCommandBarHeight}" />
Expand All @@ -25,7 +27,7 @@
<Setter.Value>
<ControlTemplate TargetType="AppBarButton">
<um:Ripple Feedback="{TemplateBinding Foreground}"
FeedbackOpacity="{StaticResource PressedOpacity}">
FeedbackOpacity="{StaticResource PressedOpacity}">
<Viewbox x:Name="ContentViewbox"
MaxHeight="{ThemeResource AppBarButtonContentHeight}"
MaxWidth="{ThemeResource AppBarButtonContentHeight}"
Expand All @@ -42,126 +44,24 @@
</Setter.Value>
</Setter>
</Style>

<ios:ControlTemplate x:Key="NativeM3CommandBarTemplate"
TargetType="CommandBar">
<!-- We use BorderBrush instead of Background to ensure that semi-transparent background of Grid and NativeCommandBarPresenter don't add up -->
<Border BorderBrush="{TemplateBinding Background}"
BorderThickness="{TemplateBinding Padding}"
Background="{TemplateBinding Background}">
<uuc:NativeCommandBarPresenter Height="44"/>
</Border>
</ios:ControlTemplate>
<android:ControlTemplate x:Key="NativeM3CommandBarTemplate"
TargetType="CommandBar">
<uuc:NativeCommandBarPresenter />
</android:ControlTemplate>

<ControlTemplate x:Key="MaterialXamlCommandBarTemplate"
TargetType="CommandBar">
<!-- Simplified CommandBar template that adds support for Uno.UI.CommandBarExtensions.NavigationCommand on Windows. -->
<Grid x:Name="LayoutRoot"
win:Height="48"
Background="{TemplateBinding Background}">

<Grid x:Name="ContentRoot"
Margin="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
Opacity="{TemplateBinding Opacity}">

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<!-- note: NavigationCommand is an AppBarButton, not ICommand -->
<ContentControl Content="{Binding (toolkit:CommandBarExtensions.NavigationCommand), RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{TemplateBinding Foreground}"
Height="{StaticResource MaterialCommandBarHeight}"
Width="{StaticResource MaterialCommandBarHeight}"
IsTabStop="False" />

<!--
Use a ContentControl rather than a ContentPresenter so that IsEnabled can be set to false
in the Minimal/HiddenClosed states to remove it from being a tab-stop candidate.
-->
<ContentControl x:Name="ContentControl"
Grid.Column="1"
Margin="16,0"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
IsTabStop="False" />

<ItemsControl x:Name="PrimaryItemsControl"
HorizontalAlignment="Right"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
IsTabStop="False"
Grid.Column="2">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Grid>
</ControlTemplate>

<!-- Define the base style for Material CommandBar -->
<Style x:Key="MaterialBaseCommandBarStyle"
TargetType="CommandBar">
<!-- Setting content to empty to avoid getting the datacontext -->
<Setter Property="Content" Value="" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}"
Style="{StaticResource MaterialTitleLarge}" />
</DataTemplate>
</Setter.Value>
</Setter>

<Setter Property="Background" Value="{ThemeResource SurfaceBrush}" />
<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />

<android:Setter Property="(toolkit:UIElementExtensions.Elevation)"
Value="{StaticResource MaterialCommandBarElevation}" />
<Setter Property="Height" Value="{StaticResource MaterialCommandBarHeight}" />

<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="OverflowButtonVisibility" Value="Collapsed" />
<Setter Property="IsDynamicOverflowEnabled" Value="False" />

<!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
<Setter Property="toolkit:CommandBarExtensions.NavigationCommand" Value="{x:Null}" />

<Setter Property="Template" Value="{StaticResource MaterialXamlCommandBarTemplate}" />
</Style>
<!-- Define the main Material CommandBar Style -->
<Style x:Key="MaterialCommandBarStyle"
TargetType="CommandBar"
BasedOn="{StaticResource MaterialBaseCommandBarStyle}">

<ios:Setter Property="Height" Value="NaN" />
<ios:Setter Property="Template"
Value="{StaticResource NativeM3CommandBarTemplate}" />
<android:Setter Property="Template"
Value="{StaticResource NativeM3CommandBarTemplate}" />
</Style>

BasedOn="{StaticResource MaterialBaseCommandBarStyle}" />
<!-- Define default styles for AppBarButton and CommandBar -->
<Style x:Key="MaterialDefaultAppBarButtonStyle"
TargetType="AppBarButton"
BasedOn="{StaticResource MaterialAppBarButtonStyle}" />

<Style x:Key="MaterialDefaultCommandBarStyle"
TargetType="CommandBar"
BasedOn="{StaticResource MaterialCommandBarStyle}" />
Expand Down
44 changes: 18 additions & 26 deletions src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/CommandBarSamplePage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,44 +6,36 @@
xmlns:sample="using:Uno.Themes.Samples"
xmlns:android="http:/uno.ui/android"
xmlns:ios="http:/uno.ui/ios"
xmlns:smtx="using:ShowMeTheXAML"
mc:Ignorable="d android ios"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<sample:SamplePageLayout>
<sample:SamplePageLayout.MaterialTemplate>
<DataTemplate>
<StackPanel>
<Grid BorderBrush="{StaticResource MaterialOnSurfaceBrush}"
BorderThickness="1"
android:Margin="12"
ios:Margin="12"
Padding="12">

<Button Content="Show Sample"
Click="ShowSampleInNestedFrame" />

</Grid>
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.MaterialTemplate>
<sample:SamplePageLayout.M3MaterialTemplate>
<DataTemplate>
<StackPanel>
<Grid BorderBrush="{StaticResource OnSurfaceBrush}"
BorderThickness="1"
android:Margin="12"
ios:Margin="12"
Padding="12">

<Button Content="Show Sample"
Click="ShowM3SampleInNestedFrame" />

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<smtx:XamlDisplay Margin="16"
UniqueKey="CommandBarSamplePage">
<CommandBar Content="Command Bar Sample"
Style="{StaticResource MaterialCommandBarStyle}">
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Add"
Label="Add" />
<AppBarButton Icon="Edit"
Label="Edit" />
<AppBarButton Icon="Delete"
Label="Delete" />
</CommandBar.PrimaryCommands>
</CommandBar>
</smtx:XamlDisplay>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.M3MaterialTemplate>
</sample:SamplePageLayout>
</Grid>
</Page>

11 changes: 1 addition & 10 deletions src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/CommandBarSamplePage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
using Uno.Themes.Samples.Content.NestedSamples;
using Uno.Themes.Samples.Content.NestedSamples;

namespace Uno.Themes.Samples.Content.Controls;

Expand All @@ -10,13 +10,4 @@ public CommandBarSamplePage()
{
this.InitializeComponent();
}
private void ShowSampleInNestedFrame(object sender, RoutedEventArgs e)
{
Shell.GetForCurrentView()?.ShowNestedSample<CommandBarSample_NestedPage1>(clearStack: true);
}

private void ShowM3SampleInNestedFrame(object sender, RoutedEventArgs e)
{
Shell.GetForCurrentView()?.ShowNestedSample<M3MaterialCommandBarSample_NestedPage1>(clearStack: true);
}
}
71 changes: 0 additions & 71 deletions ...les/UWP/Uno.Themes.Samples.Shared/Content/NestedSamples/CommandBarSample_NestedPage1.xaml
View file
Open in desktop

This file was deleted.

59 changes: 0 additions & 59 deletions .../UWP/Uno.Themes.Samples.Shared/Content/NestedSamples/CommandBarSample_NestedPage1.xaml.cs
View file
Open in desktop

This file was deleted.

Loading
Loading