Skip to content

Commit 24986d4

Browse files
jizcKeboo
jizc
and
Keboo
authored
Outlined ComboBox style (#2204)
* Just starting work for an outline combo box * Combined ComboBox templates Aiming for the same type of solution TextBox uses, making more use of attach properties instead of separate templates. * Restored default filled ComboBox behaviour * Flip toggle arrow when drop down is open * Implemented outlined combo box template * Validation and clear button style improvements * Fixed corner radius issues Co-authored-by: Kevin Bost <[email protected]>
1 parent 5c1ed6a commit 24986d4

File tree

5 files changed

+399
-419
lines changed

5 files changed

+399
-419
lines changed

‎MainDemo.Wpf/ComboBoxes.xaml

Lines changed: 124 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
mc:Ignorable="d"
1212
d:DesignHeight="300"
1313
d:DesignWidth="600"
14-
d:DataContext="{d:DesignInstance colorsDomain:FieldsViewModel, IsDesignTimeCreatable=False}">
14+
d:DataContext="{d:DesignInstance colorsDomain:ComboBoxesViewModel, IsDesignTimeCreatable=False}">
1515

1616
<UserControl.Resources>
1717
<Style x:Key="SectionTitle" TargetType="TextBlock" BasedOn="{StaticResource MaterialDesignHeadline5TextBlock }">
1818
<Setter Property="Margin" Value="0 24 0 0" />
1919
</Style>
20-
20+
2121
<Style TargetType="{x:Type smtx:XamlDisplay}" BasedOn="{StaticResource {x:Type smtx:XamlDisplay}}">
2222
<Setter Property="Margin" Value="16 0 0 0" />
2323
<Setter Property="VerticalAlignment" Value="Bottom" />
@@ -249,43 +249,132 @@
249249
<TextBlock
250250
Style="{StaticResource SectionTitle}"
251251
Text="Filled ComboBox"/>
252-
253-
<smtx:XamlDisplay
254-
UniqueKey="comboboxes_filled_combobox"
255-
HorizontalAlignment="Left"
256-
Margin="0 16 0 0">
257252

258-
<StackPanel>
259-
<Grid>
260-
<Grid.ColumnDefinitions>
261-
<ColumnDefinition />
262-
<ColumnDefinition />
263-
</Grid.ColumnDefinitions>
264-
<CheckBox
265-
x:Name="MaterialDesignFilledComboBoxEnabledComboBox"
266-
IsChecked="True"
267-
Margin="0,0,0,8"
268-
Content="Enabled"/>
253+
<StackPanel
254+
Orientation="Horizontal"
255+
Margin="0,8,0,0">
256+
<smtx:XamlDisplay
257+
UniqueKey="comboboxes_filled_combobox"
258+
HorizontalAlignment="Left">
259+
260+
<StackPanel>
261+
<Grid>
262+
<Grid.ColumnDefinitions>
263+
<ColumnDefinition />
264+
<ColumnDefinition />
265+
</Grid.ColumnDefinitions>
266+
<CheckBox
267+
x:Name="FilledComboBoxEnabledCheckBox"
268+
IsChecked="True"
269+
Margin="0,0,0,8"
270+
Content="Enabled"/>
271+
272+
<Button
273+
Content="Clear"
274+
Style="{StaticResource MaterialDesignFlatButton}"
275+
HorizontalAlignment="Right"
276+
Grid.Column="1"
277+
Click="ClearFilledComboBox_Click" />
278+
</Grid>
279+
280+
<ComboBox
281+
x:Name="FilledComboBox"
282+
Style="{StaticResource MaterialDesignFilledComboBox}"
283+
IsEnabled="{Binding Path=IsChecked, ElementName=FilledComboBoxEnabledCheckBox}"
284+
materialDesign:HintAssist.Hint="Some item"
285+
Width="256">
286+
<ComboBoxItem Content="Item 1"/>
287+
<ComboBoxItem Content="Item 2"/>
288+
<ComboBoxItem Content="Item 3"/>
289+
</ComboBox>
290+
</StackPanel>
291+
</smtx:XamlDisplay>
292+
293+
<smtx:XamlDisplay
294+
UniqueKey="comboboxes_validation_filled_combobox"
295+
HorizontalAlignment="Left">
296+
<ComboBox
297+
Style="{StaticResource MaterialDesignFilledComboBox}"
298+
materialDesign:HintAssist.Hint="Validation test"
299+
ItemsSource="{Binding ShortStringList}"
300+
materialDesign:TextFieldAssist.HasClearButton="True"
301+
Width="256">
302+
<ComboBox.SelectedItem>
303+
<Binding
304+
Path="SelectedValidationFilled"
305+
Mode="TwoWay"
306+
UpdateSourceTrigger="PropertyChanged">
307+
<Binding.ValidationRules>
308+
<demoAppDomain:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
309+
</Binding.ValidationRules>
310+
</Binding>
311+
</ComboBox.SelectedItem>
312+
</ComboBox>
313+
</smtx:XamlDisplay>
314+
</StackPanel>
315+
316+
<TextBlock
317+
Style="{StaticResource SectionTitle}"
318+
Text="Outlined ComboBox"/>
319+
320+
<StackPanel
321+
Orientation="Horizontal"
322+
Margin="0,8,0,0">
323+
<smtx:XamlDisplay
324+
UniqueKey="comboboxes_outlined_combobox"
325+
HorizontalAlignment="Left">
326+
327+
<StackPanel>
328+
<Grid>
329+
<Grid.ColumnDefinitions>
330+
<ColumnDefinition />
331+
<ColumnDefinition />
332+
</Grid.ColumnDefinitions>
333+
<CheckBox
334+
x:Name="OutlinedComboBoxEnabledCheckBox"
335+
IsChecked="True"
336+
Margin="0,0,0,8"
337+
Content="Enabled"/>
338+
339+
<Button
340+
Content="Clear"
341+
Style="{StaticResource MaterialDesignFlatButton}"
342+
HorizontalAlignment="Right"
343+
Grid.Column="1"
344+
Click="ClearOutlinedComboBox_Click" />
345+
</Grid>
269346

270-
<Button
271-
Content="Clear"
272-
Style="{StaticResource MaterialDesignFlatButton}"
273-
HorizontalAlignment="Right"
274-
Grid.Column="1"
275-
Click="ClearFilledComboBox_Click" />
276-
</Grid>
277-
347+
<ComboBox
348+
x:Name="OutlinedComboBox"
349+
Style="{StaticResource MaterialDesignOutlinedComboBox}"
350+
IsEnabled="{Binding Path=IsChecked, ElementName=OutlinedComboBoxEnabledCheckBox}"
351+
materialDesign:HintAssist.Hint="Some item"
352+
ItemsSource="{Binding ShortStringList}"
353+
Width="256" />
354+
</StackPanel>
355+
</smtx:XamlDisplay>
356+
357+
<smtx:XamlDisplay
358+
UniqueKey="comboboxes_validation_outlined_combobox"
359+
HorizontalAlignment="Left">
278360
<ComboBox
279-
x:Name="FilledComboBox"
280-
Style="{StaticResource MaterialDesignFilledComboBox}"
281-
IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignFilledComboBoxEnabledComboBox}"
282-
materialDesign:HintAssist.Hint="Some item"
361+
Style="{StaticResource MaterialDesignOutlinedComboBox}"
362+
materialDesign:HintAssist.Hint="Validation test"
363+
ItemsSource="{Binding ShortStringList}"
364+
materialDesign:TextFieldAssist.HasClearButton="True"
283365
Width="256">
284-
<ComboBoxItem Content="Item 1"/>
285-
<ComboBoxItem Content="Item 2"/>
286-
<ComboBoxItem Content="Item 3"/>
366+
<ComboBox.SelectedItem>
367+
<Binding
368+
Path="SelectedValidationOutlined"
369+
Mode="TwoWay"
370+
UpdateSourceTrigger="PropertyChanged">
371+
<Binding.ValidationRules>
372+
<demoAppDomain:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
373+
</Binding.ValidationRules>
374+
</Binding>
375+
</ComboBox.SelectedItem>
287376
</ComboBox>
288-
</StackPanel>
289-
</smtx:XamlDisplay>
377+
</smtx:XamlDisplay>
378+
</StackPanel>
290379
</StackPanel>
291380
</UserControl>

‎MainDemo.Wpf/ComboBoxes.xaml.cs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,13 @@ public partial class ComboBoxes
77
public ComboBoxes()
88
{
99
InitializeComponent();
10-
DataContext = new FieldsViewModel();
10+
DataContext = new ComboBoxesViewModel();
1111
}
1212

1313
private void ClearFilledComboBox_Click(object sender, System.Windows.RoutedEventArgs e)
1414
=> FilledComboBox.SelectedItem = null;
15+
16+
private void ClearOutlinedComboBox_Click(object sender, System.Windows.RoutedEventArgs e)
17+
=> OutlinedComboBox.SelectedItem = null;
1518
}
1619
}

‎MainDemo.Wpf/Domain/TextFieldsViewModel.cs renamed to ‎MainDemo.Wpf/Domain/ComboBoxesViewModel.cs

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,30 @@
1-
using System;
2-
using System.Collections.Generic;
1+
using System.Collections.Generic;
32
using System.ComponentModel;
43
using System.Linq;
5-
using MaterialDesignDemo.Domain;
64

75
namespace MaterialDesignDemo.Domain
86
{
9-
public class FieldsViewModel : INotifyPropertyChanged
7+
public class ComboBoxesViewModel : INotifyPropertyChanged
108
{
11-
private string? _name;
12-
private string? _name2;
139
private int? _selectedValueOne;
1410
private string? _selectedTextTwo;
11+
private string? _selectedValidationOutlined;
12+
private string? _selectedValidationFilled;
1513

16-
public FieldsViewModel()
14+
public ComboBoxesViewModel()
1715
{
1816
LongListToTestComboVirtualization = new List<int>(Enumerable.Range(0, 1000));
17+
ShortStringList = new[]
18+
{
19+
"Item 1",
20+
"Item 2",
21+
"Item 3"
22+
};
1923

2024
SelectedValueOne = LongListToTestComboVirtualization.Skip(2).First();
2125
SelectedTextTwo = null;
2226
}
2327

24-
public string? Name
25-
{
26-
get => _name;
27-
set => this.MutateVerbose(ref _name, value, RaisePropertyChanged());
28-
}
29-
30-
public string? Name2
31-
{
32-
get => _name2;
33-
set => this.MutateVerbose(ref _name2, value, RaisePropertyChanged());
34-
}
35-
3628
public int? SelectedValueOne
3729
{
3830
get => _selectedValueOne;
@@ -45,12 +37,24 @@ public string? SelectedTextTwo
4537
set => this.MutateVerbose(ref _selectedTextTwo, value, RaisePropertyChanged());
4638
}
4739

40+
public string? SelectedValidationFilled
41+
{
42+
get => _selectedValidationFilled;
43+
set => this.MutateVerbose(ref _selectedValidationFilled, value, RaisePropertyChanged());
44+
}
45+
46+
public string? SelectedValidationOutlined
47+
{
48+
get => _selectedValidationOutlined;
49+
set => this.MutateVerbose(ref _selectedValidationOutlined, value, RaisePropertyChanged());
50+
}
51+
4852
public IList<int> LongListToTestComboVirtualization { get; }
53+
public IList<string> ShortStringList { get; }
4954

50-
public DemoItem DemoItem => new DemoItem("Mr. Test", null, Enumerable.Empty<DocumentationLink>());
5155

5256
public event PropertyChangedEventHandler? PropertyChanged;
5357

54-
private Action<PropertyChangedEventArgs> RaisePropertyChanged() => args => PropertyChanged?.Invoke(this, args);
58+
private System.Action<PropertyChangedEventArgs> RaisePropertyChanged() => args => PropertyChanged?.Invoke(this, args);
5559
}
5660
}

‎MainDemo.Wpf/Domain/FieldsViewModel.cs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
using System;
2+
using System.ComponentModel;
3+
using System.Linq;
4+
5+
namespace MaterialDesignDemo.Domain
6+
{
7+
public class FieldsViewModel : INotifyPropertyChanged
8+
{
9+
private string? _name;
10+
private string? _name2;
11+
12+
public string? Name
13+
{
14+
get => _name;
15+
set => this.MutateVerbose(ref _name, value, RaisePropertyChanged());
16+
}
17+
18+
public string? Name2
19+
{
20+
get => _name2;
21+
set => this.MutateVerbose(ref _name2, value, RaisePropertyChanged());
22+
}
23+
24+
public DemoItem DemoItem => new DemoItem("Mr. Test", null, Enumerable.Empty<DocumentationLink>());
25+
26+
public event PropertyChangedEventHandler? PropertyChanged;
27+
28+
private Action<PropertyChangedEventArgs> RaisePropertyChanged() => args => PropertyChanged?.Invoke(this, args);
29+
}
30+
}

0 commit comments

Comments
 (0)