Skip to content

Commit 3c78d12

Browse files
punker76punker76
authored
Merge pull request #35 from g4m3r0/g4m3r0-docs-combobox-styles
Docs: Add ComboBox styles documentation
2 parents 20d9b1e + 32569ba commit 3c78d12

File tree

2 files changed

+141
-2
lines changed

2 files changed

+141
-2
lines changed

‎.github/workflows/wyam.yml‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ on:
99
jobs:
1010
build:
1111
runs-on: ubuntu-latest
12-
12+
env:
13+
# Necessary for installing OpenSSL 1.1
14+
DOTNET_SYSTEM_GLOBALIZATION_INVARIANT: 1
1315
steps:
1416
- name: Checkout
1517
uses: actions/checkout@v3
@@ -21,6 +23,10 @@ jobs:
2123
dotnet-version: |
2224
2.1.818
2325
6.0.x
26+
- name: Install OpenSSL 1.1
27+
run: |
28+
wget http://security.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1f-1ubuntu2.24_amd64.deb
29+
sudo dpkg -i libssl1.1_1.1.1f-1ubuntu2.24_amd64.deb
2430
- name: Run the Cake script
2531
uses: cake-build/cake-action@v1
2632
with:

‎input/docs/styles/combobox.md‎

Lines changed: 134 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,137 @@ Title: ComboBox
22
Description: The ComboBox styles
33
---
44

5-
_coming soon_
5+
## Default Style
6+
7+
The standard `ComboBox` is automatically styled when you include the MahApps.Metro library. You can enhance it with helper properties from `TextBoxHelper`.
8+
9+
-----
10+
11+
## Watermark
12+
13+
You can add placeholder text, known as a watermark, which appears when the `ComboBox` has no selected item.
14+
15+
Add the following attribute to your `ComboBox`: `mah:TextBoxHelper.Watermark="Your placeholder text..."`
16+
17+
```xml
18+
<ComboBox mah:TextBoxHelper.Watermark="Please select an item..."
19+
Width="200">
20+
<ComboBoxItem Content="Item 1" />
21+
<ComboBoxItem Content="Item 2" />
22+
</ComboBox>
23+
```
24+
25+
-----
26+
27+
## ClearText Button
28+
29+
A button to clear the selected item can be added to the `ComboBox`.
30+
31+
Set `mah:TextBoxHelper.ClearTextButton="True"` to make the button always visible.
32+
33+
```xml
34+
<ComboBox mah:TextBoxHelper.ClearTextButton="True"
35+
mah:TextBoxHelper.Watermark="Please select an item..."
36+
Width="200">
37+
<ComboBoxItem Content="Item 1" />
38+
<ComboBoxItem Content="Item 2" />
39+
</ComboBox>
40+
```
41+
42+
Alternatively, you can bind its visibility to the `SelectedItem` property, so it only appears when an item is selected.
43+
44+
```xml
45+
<ComboBox mah:TextBoxHelper.ClearTextButton="{Binding Path=SelectedItem, RelativeSource={RelativeSource Mode=Self}, Converter={x:Static mah:IsNotNullConverter.Instance}}"
46+
mah:TextBoxHelper.Watermark="Please select an item..."
47+
Width="200">
48+
<ComboBoxItem Content="Item 1" />
49+
<ComboBoxItem Content="Item 2" />
50+
</ComboBox>
51+
```
52+
53+
-----
54+
55+
## Floating Watermark
56+
57+
The watermark can be configured to float above the `ComboBox` like a label when an item is selected. This also works for editable `ComboBoxes`.
58+
59+
Add the following attribute to apply this style: `mah:TextBoxHelper.UseFloatingWatermark="True"`
60+
61+
```xml
62+
<ComboBox mah:TextBoxHelper.UseFloatingWatermark="True"
63+
mah:TextBoxHelper.Watermark="Please select an item..."
64+
Width="200">
65+
<ComboBoxItem Content="Item 1" />
66+
<ComboBoxItem Content="Item 2" />
67+
</ComboBox>
68+
```
69+
70+
-----
71+
72+
## Custom Button Content
73+
74+
You can replace the default dropdown arrow with custom content, such as an icon. This is useful for creating search or filter-like inputs.
75+
76+
Use the `ButtonCommand`, `ButtonContent`, and `ButtonContentTemplate` properties from `TextBoxHelper` to customize the button.
77+
78+
```xml
79+
<ComboBox Width="200"
80+
mah:TextBoxHelper.ButtonCommand="{Binding ControlButtonCommand, Mode=OneWay}"
81+
mah:TextBoxHelper.ButtonContent="M17.545,15.467l-3.779-3.779..."
82+
mah:TextBoxHelper.Watermark="Search here...">
83+
<mah:TextBoxHelper.ButtonContentTemplate>
84+
<DataTemplate>
85+
<mah:PathIcon Width="16"
86+
Height="16"
87+
Padding="3"
88+
Data="{Binding Mode=OneWay}" />
89+
</DataTemplate>
90+
</mah:TextBoxHelper.ButtonContentTemplate>
91+
<ComboBoxItem Content="Item 1" />
92+
<ComboBoxItem Content="Item 2" />
93+
</ComboBox>
94+
```
95+
96+
-----
97+
98+
## Editable / Auto-Completion
99+
100+
Set `IsEditable="True"` to allow users to type directly into the `ComboBox`. When combined with an `ItemsSource`, this enables auto-completion.
101+
102+
For `ComboBoxes` with a large number of items, use the virtualized style for better performance.
103+
104+
Add the following to a `ComboBox` to apply this style: `Style="{DynamicResource MahApps.Styles.ComboBox.Virtualized}"`
105+
106+
```xaml
107+
<ComboBox Width="200"
108+
mah:TextBoxHelper.Watermark="Auto completion"
109+
DisplayMemberPath="Title"
110+
IsEditable="True"
111+
ItemsSource="{Binding Albums}"
112+
Style="{DynamicResource MahApps.Styles.ComboBox.Virtualized}" />
113+
```
114+
115+
-----
116+
117+
## Grouping
118+
119+
Items within the dropdown can be grouped under custom headers. This is achieved by setting the `<ComboBox.GroupStyle>`.
120+
121+
```xml
122+
<ComboBox Width="200"
123+
mah:TextBoxHelper.Watermark="Auto completion with grouping"
124+
DisplayMemberPath="Title"
125+
IsEditable="True"
126+
ItemsSource="{Binding Albums}"
127+
Style="{DynamicResource MahApps.Styles.ComboBox.Virtualized}">
128+
<ComboBox.GroupStyle>
129+
<GroupStyle>
130+
<GroupStyle.HeaderTemplate>
131+
<DataTemplate>
132+
<TextBlock Text="{Binding Path=Name.Name}" />
133+
</DataTemplate>
134+
</GroupStyle.HeaderTemplate>
135+
</GroupStyle>
136+
</ComboBox.GroupStyle>
137+
</ComboBox>
138+
```

0 commit comments

Comments
 (0)