Skip to content

Commit

Permalink
Merge pull request #843 from unoplatform/dev/sb/text-align
Browse files Browse the repository at this point in the history 
fix(Textbox): Fix content and icon alignment for M3 Textboxes
  • Loading branch information
@agneszitte
agneszitte committed Sep 8, 2022
2 parents a2977ea + 57f03fd commit 7b3c937
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 78 deletions.
44 changes: 30 additions & 14 deletions src/library/Uno.Material/Generated/mergedpages.v2.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5432,17 +5432,25 @@
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="IconPresenter" Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" Margin="0,0,8,0" MaxHeight="34" MaxWidth="34" MinWidth="25" not_macos:VerticalAlignment="Top" macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
<ScrollViewer x:Name="ContentElement" Grid.Column="1" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}" not_macos:VerticalAlignment="Top" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw">
<!-- Border in place to properly vertically center the icon inside when it's a one-line TextBox -->
<!-- but keep it in the same place and at the top when it's a multiline TextBox -->
<Border Height="26" VerticalAlignment="Top" Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
<ContentPresenter x:Name="IconPresenter" Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" Margin="0,0,8,0" MaxHeight="34" MaxWidth="34" MinWidth="25" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ScrollViewer x:Name="ContentElement" Grid.Column="1" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw">
<ScrollViewer.RenderTransform>
<CompositeTransform x:Name="ContentElement_CompositeTransform" />
</ScrollViewer.RenderTransform>
</ScrollViewer>
<TextBlock x:Name="PlaceholderElement" Grid.Column="1" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" RenderTransformOrigin="0,0.5" Text="{TemplateBinding PlaceholderText}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" not_macos:VerticalAlignment="Top" macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="PlaceholderElement_CompositeTransform" />
</TextBlock.RenderTransform>
</TextBlock>
<!-- Border in place to properly vertically center the placeholder inside when it's a one-line TextBox -->
<!-- but keep it in the same place and at the top when it's a multiline TextBox -->
<Border Grid.Column="1" Height="26" VerticalAlignment="Top">
<TextBlock x:Name="PlaceholderElement" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" RenderTransformOrigin="0,0.5" Text="{TemplateBinding PlaceholderText}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="PlaceholderElement_CompositeTransform" />
</TextBlock.RenderTransform>
</TextBlock>
</Border>
<Button x:Name="DeleteButton" Grid.Column="2" Margin="8,0,0,0" Foreground="{StaticResource OnSurfaceVariantBrush}" IsTabStop="False" Style="{StaticResource MaterialDeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed" AutomationProperties.AccessibilityView="Raw" />
</Grid>
<Rectangle x:Name="NormalBorder" Fill="{TemplateBinding BorderBrush}" Height="{StaticResource TextBoxOutlinedStrokeHeight}" VerticalAlignment="Bottom" />
Expand Down Expand Up @@ -5541,17 +5549,25 @@
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="IconPresenter" Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" Width="20" Margin="1,0,18,0" not_macos:VerticalAlignment="Top" macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
<ScrollViewer x:Name="ContentElement" Grid.Column="1" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}" not_macos:VerticalAlignment="Top" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw">
<!-- Border in place to properly vertically center the icon inside when it's a one-line TextBox -->
<!-- but keep it in the same place and at the top when it's a multiline TextBox -->
<Border Height="20" VerticalAlignment="Top">
<ContentPresenter x:Name="IconPresenter" Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" Width="20" Margin="1,0,18,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
</Border>
<ScrollViewer x:Name="ContentElement" Grid.Column="1" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw">
<ScrollViewer.RenderTransform>
<CompositeTransform x:Name="ContentElement_CompositeTransform" />
</ScrollViewer.RenderTransform>
</ScrollViewer>
<TextBlock x:Name="PlaceholderElement" Grid.Column="1" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" RenderTransformOrigin="0,0.5" Text="{TemplateBinding PlaceholderText}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" not_macos:VerticalAlignment="Top" macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="PlaceholderElement_CompositeTransform" />
</TextBlock.RenderTransform>
</TextBlock>
<!-- Border in place to properly vertically center the placeholder inside when it's a one-line TextBox -->
<!-- but keep it in the same place and at the top when it's a multiline TextBox -->
<Border Grid.Column="1" Height="20" VerticalAlignment="Top">
<TextBlock x:Name="PlaceholderElement" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" RenderTransformOrigin="0,0.5" Text="{TemplateBinding PlaceholderText}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="PlaceholderElement_CompositeTransform" />
</TextBlock.RenderTransform>
</TextBlock>
</Border>
<Button x:Name="DeleteButton" Grid.Column="2" Margin="8,0,0,0" IsTabStop="False" Style="{StaticResource MaterialDeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed" AutomationProperties.AccessibilityView="Raw" />
</Grid>
</Border>
Expand Down
131 changes: 72 additions & 59 deletions src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,17 +219,20 @@
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<ContentPresenter x:Name="IconPresenter"
Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Center"
Margin="0,0,8,0"
MaxHeight="34"
MaxWidth="34"
MinWidth="25"
not_macos:VerticalAlignment="Top"
macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />

<!-- Border in place to properly vertically center the icon inside when it's a one-line TextBox -->
<!-- but keep it in the same place and at the top when it's a multiline TextBox -->
<Border Height="26"
VerticalAlignment="Top"
Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}">
<ContentPresenter x:Name="IconPresenter"
Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Center"
Margin="0,0,8,0"
MaxHeight="34"
MaxWidth="34"
MinWidth="25"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>

<ScrollViewer x:Name="ContentElement"
Grid.Column="1"
Expand All @@ -239,8 +242,7 @@
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsTabStop="False"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
not_macos:VerticalAlignment="Top"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
ZoomMode="Disabled"
Expand All @@ -250,21 +252,25 @@
</ScrollViewer.RenderTransform>
</ScrollViewer>

<TextBlock x:Name="PlaceholderElement"
Grid.Column="1"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="False"
RenderTransformOrigin="0,0.5"
Text="{TemplateBinding PlaceholderText}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}"
not_macos:VerticalAlignment="Top"
macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="PlaceholderElement_CompositeTransform" />
</TextBlock.RenderTransform>
</TextBlock>
<!-- Border in place to properly vertically center the placeholder inside when it's a one-line TextBox -->
<!-- but keep it in the same place and at the top when it's a multiline TextBox -->
<Border Grid.Column="1"
Height="26"
VerticalAlignment="Top">
<TextBlock x:Name="PlaceholderElement"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="False"
RenderTransformOrigin="0,0.5"
Text="{TemplateBinding PlaceholderText}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="PlaceholderElement_CompositeTransform" />
</TextBlock.RenderTransform>
</TextBlock>
</Border>

<Button x:Name="DeleteButton"
Grid.Column="2"
Expand Down Expand Up @@ -436,24 +442,28 @@
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid x:Name="Root"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<ContentPresenter x:Name="IconPresenter"
Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Center"
Width="20"
Margin="1,0,18,0"
not_macos:VerticalAlignment="Top"
macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<!-- Border in place to properly vertically center the icon inside when it's a one-line TextBox -->
<!-- but keep it in the same place and at the top when it's a multiline TextBox -->
<Border Height="20"
VerticalAlignment="Top">
<ContentPresenter x:Name="IconPresenter"
Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Center"
Width="20"
Margin="1,0,18,0"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
</Border>

<ScrollViewer x:Name="ContentElement"
Grid.Column="1"
Expand All @@ -465,30 +475,33 @@
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
not_macos:VerticalAlignment="Top"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ZoomMode="Disabled"
AutomationProperties.AccessibilityView="Raw">
<ScrollViewer.RenderTransform>
<CompositeTransform x:Name="ContentElement_CompositeTransform" />
</ScrollViewer.RenderTransform>
</ScrollViewer>

<TextBlock x:Name="PlaceholderElement"
Grid.Column="1"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="False"
RenderTransformOrigin="0,0.5"
Text="{TemplateBinding PlaceholderText}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}"
not_macos:VerticalAlignment="Top"
macos:VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="PlaceholderElement_CompositeTransform" />
</TextBlock.RenderTransform>
</TextBlock>
<!-- Border in place to properly vertically center the placeholder inside when it's a one-line TextBox -->
<!-- but keep it in the same place and at the top when it's a multiline TextBox -->
<Border Grid.Column="1"
Height="20"
VerticalAlignment="Top">
<TextBlock x:Name="PlaceholderElement"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="False"
RenderTransformOrigin="0,0.5"
Text="{TemplateBinding PlaceholderText}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="PlaceholderElement_CompositeTransform" />
</TextBlock.RenderTransform>
</TextBlock>
</Border>

<Button x:Name="DeleteButton"
Grid.Column="2"
Expand Down

0 comments on commit 7b3c937

Please sign in to comment.