Skip to content

Commit

Permalink
fix: Material ComboBoxItem not working when using a custom ItemTemplate
Browse files Browse the repository at this point in the history
  • Loading branch information
Agnès Zitte committed Sep 15, 2022
1 parent 2b19700 commit 696da02
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 27 deletions.
14 changes: 3 additions & 11 deletions src/library/Uno.Material/Generated/mergedpages.v2.xaml
View file
Expand Up @@ -1424,7 +1424,7 @@
<!-- End: Body Large Typo -->
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
<Setter Property="Padding" Value="16,0" />
<Setter Property="Height" Value="50" />
<Setter Property="Template">
<Setter.Value>
Expand Down Expand Up @@ -1508,15 +1508,7 @@
<!-- Pressed Overlay -->
<Grid x:Name="PressedOverlay" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{StaticResource MaterialComboBoxItemSelectedBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0" />
<!-- ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<Grid>
<TextBlock Margin="16,0,0,0" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Style="{StaticResource MaterialLabelLarge}" Text="{Binding}" />
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
<ContentPresenter x:Name="ContentPresenter" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
Expand Down Expand Up @@ -1615,7 +1607,7 @@
<!-- Leading Icon -->
<ContentPresenter x:Name="IconPresenter" Width="20" Margin="2,0,18,0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{ThemeResource MaterialComboBoxLeadingIconForegroundThemeBrush}" Content="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}" Visibility="{Binding Path=(um:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
<!-- ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter" Grid.Column="1" VerticalAlignment="Center" RenderTransform="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyToCompositeTransformConverter}, TargetNullValue={StaticResource ContentPresenter_CompositeTransformWithoutPlaceholder}, FallbackValue={StaticResource ContentPresenter_CompositeTransformWithoutPlaceholder}}" />
<ContentPresenter x:Name="ContentPresenter" Grid.Column="1" MaxLines="1" VerticalAlignment="Center" RenderTransform="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyToCompositeTransformConverter}, TargetNullValue={StaticResource ContentPresenter_CompositeTransformWithoutPlaceholder}, FallbackValue={StaticResource ContentPresenter_CompositeTransformWithoutPlaceholder}}" />
<!-- PlaceholderElement -->
<TextBlock x:Name="PlaceholderElement" Grid.Column="1" VerticalAlignment="Center" Foreground="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource NullToPlaceholderThemeBrushConverter}, TargetNullValue={StaticResource MaterialComboBoxPlaceholderForegroundThemeBrush}, FallbackValue={StaticResource MaterialComboBoxPlaceholderForegroundThemeBrush}}" IsHitTestVisible="False" MaxLines="1" RenderTransformOrigin="0,0.5" Style="{StaticResource BodyLarge}" Text="{TemplateBinding PlaceholderText}">
<TextBlock.RenderTransform>
Expand Down
21 changes: 7 additions & 14 deletions src/library/Uno.Material/Styles/Controls/v2/ComboBox.xaml
View file
Expand Up @@ -114,7 +114,7 @@
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="Padding"
Value="0" />
Value="16,0" />
<Setter Property="Height"
Value="50" />

Expand Down Expand Up @@ -239,20 +239,12 @@

<!-- ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<Grid>
<TextBlock Margin="16,0,0,0"
VerticalAlignment="Center"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource MaterialLabelLarge}"
Text="{Binding}" />
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
Expand Down Expand Up @@ -438,6 +430,7 @@
<!-- ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
MaxLines="1"
VerticalAlignment="Center"
RenderTransform="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyToCompositeTransformConverter}, TargetNullValue={StaticResource ContentPresenter_CompositeTransformWithoutPlaceholder}, FallbackValue={StaticResource ContentPresenter_CompositeTransformWithoutPlaceholder}}" />

Expand Down
30 changes: 29 additions & 1 deletion ...les/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/ComboBoxSamplePage.xaml
View file
Expand Up @@ -14,7 +14,7 @@
<Page.Resources>
<x:String x:Key="Icon_Mail">F1 M 18 0 L 2 0 C 0.8999999761581421 0 0.009999990463256836 0.8999999761581421 0.009999990463256836 2 L 0 14 C 0 15.100000023841858 0.8999999761581421 16 2 16 L 18 16 C 19.100000023841858 16 20 15.100000023841858 20 14 L 20 2 C 20 0.8999999761581421 19.100000023841858 0 18 0 Z M 18 4 L 10 9 L 2 4 L 2 2 L 10 7 L 18 2 L 18 4 Z</x:String>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<sample:SamplePageLayout>
<sample:SamplePageLayout.MaterialTemplate>
Expand Down Expand Up @@ -76,6 +76,7 @@
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
Expand Down Expand Up @@ -157,6 +158,33 @@
</ComboBox>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Grid.Row="2"
Grid.ColumnSpan="2">

<!-- Label -->
<TextBlock Text="Normal with custom ItemTemplate"
Style="{StaticResource TitleMedium}" />

<!-- ComboBox -->
<smtx:XamlDisplay UniqueKey="M3_Material_ComboBoxSamplePage_Normal_CustomItemTemplate"
Style="{StaticResource XamlDisplayBelowStyle}">
<ComboBox ItemsSource="{Binding Data.TestDataSource, Mode=OneTime}"
PlaceholderText="Placeholder"
Style="{StaticResource MaterialComboBoxStyle}"
VerticalAlignment="Center">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding Display}" />
<Run Text=":" />
<Run Text="{Binding Value}" />
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</smtx:XamlDisplay>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
Expand Down
3 changes: 2 additions & 1 deletion .../Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/ComboBoxSamplePage.xaml.cs
View file
@@ -1,10 +1,11 @@
using Uno.Themes.Samples.Entities;
using Uno.Themes.Samples.Entities.Data;
using Windows.UI.Xaml.Controls;


namespace Uno.Themes.Samples.Content.Controls
{
[SamplePage(SampleCategory.Controls, "ComboBox", Description = "This control used for selection is a drop-down list that shows its selection in a box.", DocumentationLink = "https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.combobox")]
[SamplePage(SampleCategory.Controls, "ComboBox", Description = "This control used for selection is a drop-down list that shows its selection in a box.", DocumentationLink = "https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.combobox", DataType = typeof(TestCollections))]
public sealed partial class ComboBoxSamplePage : Page
{
public ComboBoxSamplePage()
Expand Down
26 changes: 26 additions & 0 deletions src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Entities/Data/TestCollections.cs
View file
@@ -1,5 +1,6 @@
using System;
using System.Collections.Generic;
using System.Collections.Immutable;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
Expand Down Expand Up @@ -28,6 +29,31 @@ private static IEnumerable<SelectableData> CreateItems()
.ToArray();
}

public ImmutableList<TestData> TestDataSource { get; } = new List<TestData>
{
new TestData
{
Display = "Data01",
Value = Guid.NewGuid().ToString()
},
new TestData
{
Display = "Data02",
Value = Guid.NewGuid().ToString()
},
new TestData
{
Display = "Data03",
Value = Guid.NewGuid().ToString()
},
}.ToImmutableList();

public sealed class TestData
{
public string Display { get; set; }
public string Value { get; set; }
}

public class SelectableData : InpcObject
{
public int Index { get => GetProperty<int>(); set => SetProperty(value); }
Expand Down

0 comments on commit 696da02

Please sign in to comment.