Skip to content

Commit

Permalink
fix(commandbarrenderer): Fix CommandBarRenderer Height for iOS
Browse files Browse the repository at this point in the history
  • Loading branch information
@carldebilly
carldebilly committed Oct 14, 2020
1 parent 0033663 commit 28cc1b6
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 136 deletions.
274 changes: 147 additions & 127 deletions src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/CommandBar/CommandBar_Dynamic.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,162 +1,182 @@
<UserControl x:Class="Uno.UI.Samples.Content.UITests.CommandBar.CommandBar_Dynamic"
<Page x:Class="Uno.UI.Samples.Content.UITests.CommandBar.CommandBar_Dynamic"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Uno.UI.Samples.Content.UITests.CommandBar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="using:Uno.UI.Toolkit"
mc:Ignorable="d"
xmlns:button="clr-namespace:UITests.Shared.Windows_UI_Xaml_Controls.Button"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<UserControl.Resources>
<UserControl.Resources>

<DataTemplate x:Key="ColorDataTemplate">
<Border Height="20">
<Border.Background>
<SolidColorBrush Color="{Binding}" />
</Border.Background>
</Border>
</DataTemplate>
<DataTemplate x:Key="ColorDataTemplate">
<Border Height="20">
<Border.Background>
<SolidColorBrush Color="{Binding}" />
</Border.Background>
</Border>
</DataTemplate>

</UserControl.Resources>
<Style TargetType="Slider">
<Setter Property="Maximum" Value="1" />
<Setter Property="StepFrequency" Value="0.05" />
</Style>

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CommandBar Content="{Binding Text, ElementName=Content2}"
<button:FromNullableBoolToCustomValueConverter
x:Key="nativeTemplateConverter"
TrueValue="{StaticResource NativeDefaultCommandBar}"
NullOrFalseValue="{StaticResource XamlDefaultCommandBar}"/>

</UserControl.Resources>

<Grid toolkit:VisibleBoundsPadding.PaddingMask="All">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CommandBar Content="{Binding Text, ElementName=Content2}"
Visibility="{Binding Text, ElementName=cbVisibility}"
Opacity="{Binding Value, ElementName=sliderOpacity}">
<CommandBar.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
Opacity="{Binding Value, ElementName=sliderOpacity}"
Style="{Binding IsChecked, ElementName=native, Converter={StaticResource nativeTemplateConverter}}">
<CommandBar.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
Opacity="{Binding Value, ElementName=ForegroundOpacity}" />
</CommandBar.Foreground>
<CommandBar.Background>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=BackgroundColor}"
</CommandBar.Foreground>
<CommandBar.Background>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=BackgroundColor}"
Opacity="{Binding Value, ElementName=BackgroundOpacity}" />
</CommandBar.Background>
<toolkit:CommandBarExtensions.NavigationCommand>
<AppBarButton Label="{Binding Text, ElementName=CommandLabel}"
</CommandBar.Background>
<toolkit:CommandBarExtensions.NavigationCommand>
<AppBarButton Label="{Binding Text, ElementName=CommandLabel}"
Visibility="{Binding SelectedItem, ElementName=CommandVisibility}"
IsEnabled="{Binding SelectedItem, ElementName=CommandIsEnabled}"
Opacity="{Binding Value, ElementName=CommandOpacity}">
<AppBarButton.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
<AppBarButton.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
Opacity="{Binding Value, ElementName=ForegroundOpacity}" />
</AppBarButton.Foreground>
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/Icons/menu.png" />
</AppBarButton.Icon>
</AppBarButton>
</toolkit:CommandBarExtensions.NavigationCommand>
<CommandBar.PrimaryCommands>
<AppBarButton Content="{Binding Text, ElementName=Content2}"
</AppBarButton.Foreground>
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/Icons/menu.png" />
</AppBarButton.Icon>
</AppBarButton>
</toolkit:CommandBarExtensions.NavigationCommand>
<CommandBar.PrimaryCommands>
<AppBarButton Content="{Binding Text, ElementName=Content2}"
Label="{Binding Text, ElementName=CommandLabel}"
Visibility="{Binding SelectedItem, ElementName=CommandVisibility}"
IsEnabled="{Binding SelectedItem, ElementName=CommandIsEnabled}"
Opacity="{Binding Value, ElementName=CommandOpacity}">
<AppBarButton.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
<AppBarButton.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
Opacity="{Binding Value, ElementName=ForegroundOpacity}" />
</AppBarButton.Foreground>
</AppBarButton>
<AppBarButton Content="{Binding Text, ElementName=Content2}"
</AppBarButton.Foreground>
</AppBarButton>
<AppBarButton Content="{Binding Text, ElementName=Content2}"
Label="{Binding Text, ElementName=CommandLabel}"
Visibility="{Binding SelectedItem, ElementName=CommandVisibility}"
IsEnabled="{Binding SelectedItem, ElementName=CommandIsEnabled}"
Opacity="{Binding Value, ElementName=CommandOpacity}">
<AppBarButton.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
<AppBarButton.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
Opacity="{Binding Value, ElementName=ForegroundOpacity}" />
</AppBarButton.Foreground>
<AppBarButton.Icon>
<BitmapIcon UriSource="{Binding Text, ElementName=CommandIcon}" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton Content="{Binding Text, ElementName=Content2}"
</AppBarButton.Foreground>
<AppBarButton.Icon>
<BitmapIcon UriSource="{Binding Text, ElementName=CommandIcon}" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton Content="{Binding Text, ElementName=Content2}"
Label="{Binding Text, ElementName=CommandLabel}"
Visibility="{Binding SelectedItem, ElementName=CommandVisibility}"
IsEnabled="{Binding SelectedItem, ElementName=CommandIsEnabled}"
Opacity="{Binding Value, ElementName=sliderOpacity}">
<AppBarButton.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
<AppBarButton.Foreground>
<SolidColorBrush Color="{Binding SelectedItem, ElementName=ForegroundColor}"
Opacity="{Binding Value, ElementName=ForegroundOpacity}" />
</AppBarButton.Foreground>
<AppBarButton.Icon>
<BitmapIcon UriSource="{Binding Text, ElementName=CommandIcon}" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
<ScrollViewer Grid.Row="1">
<StackPanel>
<ComboBox x:Name="cbVisibility"
Header="Visibility"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}" />
<Slider Style="{StaticResource XamlDefaultSlider}"
x:Name="sliderOpacity"
Header="Opacity"
Value="1"
Minimum="0"
Maximum="1" />
<TextBox Style="{StaticResource XamlDefaultTextBox}"
HorizontalAlignment="Stretch"
x:Name="Content2"
Header="Content"
Text="Content" />
<ComboBox x:Name="BackgroundColor"
Header="BackgroundColor"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}"
ItemTemplate="{StaticResource ColorDataTemplate}" />
<Slider Style="{StaticResource XamlDefaultSlider}"
x:Name="BackgroundOpacity"
Header="BackgroundOpacity"
Value="1"
Minimum="0"
Maximum="1"/>
<ComboBox x:Name="ForegroundColor"
Header="ForegroundColor"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}"
ItemTemplate="{StaticResource ColorDataTemplate}" />
<Slider Style="{StaticResource XamlDefaultSlider}"
x:Name="ForegroundOpacity"
Header="ForegroundOpacity"
Value="1"
Minimum="0"
Maximum="1" />
<ComboBox x:Name="CommandVisibility"
Header="CommandVisibility"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}" />
<Slider Style="{StaticResource XamlDefaultSlider}"
x:Name="CommandOpacity"
Header="CommandOpacity"
Value="1"
Minimum="0"
Maximum="1" />
<ComboBox x:Name="CommandIsEnabled"
Header="CommandIsEnabled"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}" />
<TextBox Style="{StaticResource XamlDefaultTextBox}"
x:Name="CommandIcon"
Header="CommandIcon"
HorizontalAlignment="Stretch"
Text="ms-appx:///Assets/Icons/search.png" />
<TextBox Style="{StaticResource XamlDefaultTextBox}"
x:Name="CommandLabel"
Header="CommandLabel"
HorizontalAlignment="Stretch"
Text="Label" />
</StackPanel>
</ScrollViewer>
</Grid>
</AppBarButton.Foreground>
<AppBarButton.Icon>
<BitmapIcon UriSource="{Binding Text, ElementName=CommandIcon}" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
<ScrollViewer Grid.Row="1">
<StackPanel Spacing="8" Margin="30,0">
<CheckBox x:Name="native" Content="NativeCommandBar" IsChecked="True" />
<ComboBox x:Name="cbVisibility"
Header="Visibility"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}" />
<Slider
x:Name="sliderOpacity"
Header="Opacity"
Value="1" />
<TextBox Style="{StaticResource XamlDefaultTextBox}"
HorizontalAlignment="Stretch"
x:Name="Content2"
Header="Content"
Text="Content" />
<ComboBox x:Name="BackgroundColor"
Header="BackgroundColor"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}"
ItemTemplate="{StaticResource ColorDataTemplate}" />
<Slider
x:Name="BackgroundOpacity"
Header="BackgroundOpacity"
Value="1"/>
<ComboBox x:Name="ForegroundColor"
Header="ForegroundColor"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}"
ItemTemplate="{StaticResource ColorDataTemplate}" />
<Slider
x:Name="ForegroundOpacity"
Header="ForegroundOpacity"
Value="1"/>
<ComboBox x:Name="CommandVisibility"
Header="CommandVisibility"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}" />
<Slider
x:Name="CommandOpacity"
Header="CommandOpacity"
Value="1" />
<ComboBox
x:Name="CommandIsEnabled"
Header="CommandIsEnabled"
HorizontalAlignment="Stretch"
Style="{StaticResource XamlDefaultComboBox}" />
<TextBox Style="{StaticResource XamlDefaultTextBox}"
x:Name="CommandIcon"
Header="CommandIcon"
HorizontalAlignment="Stretch"
Text="ms-appx:///Assets/Icons/search.png" />
<TextBox Style="{StaticResource XamlDefaultTextBox}"
x:Name="CommandLabel"
Header="CommandLabel"
HorizontalAlignment="Stretch"
Text="Label" />
</StackPanel>
</ScrollViewer>
<StackPanel Grid.RowSpan="2" IsHitTestVisible="False" Orientation="Horizontal" Width="200">
<Border Background="#80ff8000" Height="30" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top">
<TextBlock Text="30 px" FontWeight="Bold" />
</Border>
<Border Background="#80ffff00" Height="40" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top">
<TextBlock Text="40 px" FontWeight="Bold" />
</Border>
<Border Background="#80ff8000" Height="50" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top">
<TextBlock Text="50 px" FontWeight="Bold" />
</Border>
<Border Background="#80ffff00" Height="60" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top">
<TextBlock Text="60 px" FontWeight="Bold" />
</Border>
</StackPanel>
</Grid>

</UserControl>
</Page>
2 changes: 1 addition & 1 deletion src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/CommandBar/CommandBar_Dynamic.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
namespace Uno.UI.Samples.Content.UITests.CommandBar
{
[SampleControlInfo("CommandBar", "Dynamic", ignoreInSnapshotTests: true)]
public sealed partial class CommandBar_Dynamic : UserControl
public sealed partial class CommandBar_Dynamic : Page
{
public CommandBar_Dynamic()
{
Expand Down
11 changes: 3 additions & 8 deletions src/Uno.UI/Controls/CommandBarRenderer.iOS.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,21 +78,21 @@ protected override void Render()
var backgroundColor = Brush.GetColorWithOpacity(Element.Background);
switch (backgroundColor)
{
case Color opaqueColor when opaqueColor.A == byte.MaxValue:
case { } opaqueColor when opaqueColor.A == byte.MaxValue:
// Prefer BarTintColor because it supports smooth transitions
Native.BarTintColor = opaqueColor;
Native.Translucent = false; //Make fully opaque for consistency with SetBackgroundImage
Native.SetBackgroundImage(null, UIBarMetrics.Default);
Native.ShadowImage = null;
break;
case Color semiTransparentColor when semiTransparentColor.A > 0:
case { } semiTransparentColor when semiTransparentColor.A > 0:
Native.BarTintColor = null;
// Use SetBackgroundImage as hack to support semi-transparent background
Native.SetBackgroundImage(((UIColor)semiTransparentColor).ToUIImage(), UIBarMetrics.Default);
Native.Translucent = true;
Native.ShadowImage = null;
break;
case Color transparent when transparent.A == 0:
case { } transparent when transparent.A == 0:
Native.BarTintColor = null;
Native.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
// We make sure a transparent bar doesn't cast a shadow.
Expand All @@ -117,11 +117,6 @@ protected override void Render()
: null;
Native.BackIndicatorImage = backButtonIcon;
Native.BackIndicatorTransitionMaskImage = backButtonIcon;

if (Element.Presenter != null)
{
Element.Presenter.Height = Native.Hidden ? 0 : Native.Frame.Size.Height;
}
}

private void ApplyVisibility()
Expand Down

0 comments on commit 28cc1b6

Please sign in to comment.