Skip to content

Commit 40e487e

Browse files
spiegelpspiegelp
committed
2 parents ca33fb6 + 4298064 commit 40e487e

File tree

11 files changed

+381
-14
lines changed

11 files changed

+381
-14
lines changed

‎MaterialDesignExtensions/Controls/SearchBase.cs‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,50 @@ public object SearchIcon
115115
}
116116
}
117117

118+
/// <summary>
119+
/// The icon on the left side of the search text box that appears when the text is not empty and replaced the search icon.
120+
/// </summary>
121+
public static readonly DependencyProperty CancelIconProperty = DependencyProperty.Register(
122+
nameof(CancelIcon), typeof(object), typeof(SearchBase), new PropertyMetadata(PackIconKind.ArrowLeft, null));
123+
124+
/// <summary>
125+
/// The icon on the left side of the search text box that appears when the text is not empty and replaced the search icon.
126+
/// </summary>
127+
public object CancelIcon
128+
{
129+
get
130+
{
131+
return GetValue(CancelIconProperty);
132+
}
133+
134+
set
135+
{
136+
SetValue(CancelIconProperty, value);
137+
}
138+
}
139+
140+
/// <summary>
141+
/// The icon on the right side of the search text box that appears when the text is not empty.
142+
/// </summary>
143+
public static readonly DependencyProperty ClearIconProperty = DependencyProperty.Register(
144+
nameof(ClearIcon), typeof(object), typeof(SearchBase), new PropertyMetadata(PackIconKind.Close, null));
145+
146+
/// <summary>
147+
/// The icon on the right side of the search text box that appears when the text is not empty.
148+
/// </summary>
149+
public object ClearIcon
150+
{
151+
get
152+
{
153+
return GetValue(ClearIconProperty);
154+
}
155+
156+
set
157+
{
158+
SetValue(ClearIconProperty, value);
159+
}
160+
}
161+
118162
/// <summary>
119163
/// A source for providing suggestions to search for.
120164
/// </summary>

‎MaterialDesignExtensions/Themes/SearchTemplates.xaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
<Binding Path="SearchTerm" RelativeSource="{RelativeSource TemplatedParent}" Converter="{StaticResource notNullBooleanConverter}" />
8383
</MultiBinding>
8484
</Button.Visibility>
85-
<md:PackIcon Kind="ArrowLeft" Width="{TemplateBinding IconSize}" Height="{TemplateBinding IconSize}" />
85+
<md:PackIcon Kind="{TemplateBinding CancelIcon}" Width="{TemplateBinding IconSize}" Height="{TemplateBinding IconSize}" />
8686
</Button>
8787
<TextBox x:Name="searchTextBox" Grid.Column="1" md:HintAssist.Hint="{TemplateBinding SearchHint}"
8888
Text="{Binding Path=SearchTerm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource TemplatedParent}}"
@@ -96,7 +96,7 @@
9696
<Binding Path="SearchTerm" RelativeSource="{RelativeSource TemplatedParent}" Converter="{StaticResource notNullBooleanConverter}" />
9797
</MultiBinding>
9898
</Button.Visibility>
99-
<md:PackIcon Kind="Close" Width="{TemplateBinding IconSize}" Height="{TemplateBinding IconSize}" />
99+
<md:PackIcon Kind="{TemplateBinding ClearIcon}" Width="{TemplateBinding IconSize}" Height="{TemplateBinding IconSize}" />
100100
</Button>
101101
<controls:AutocompletePopup x:Name="searchSuggestionsPopup"
102102
PlacementTarget="{Binding ElementName=rootBorder}"

‎MaterialDesignExtensionsDemo/Controls/SearchControl.xaml‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<UserControl x:Class="MaterialDesignExtensionsDemo.Controls.SearchControl"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
45
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
56
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
67
xmlns:local="clr-namespace:MaterialDesignExtensionsDemo.Controls"
@@ -18,12 +19,20 @@
1819
<TextBlock x:Name="searchResultTextBlock1" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,128,0,0" />
1920
</Grid>
2021
</Border>
21-
<Border BorderThickness="1" BorderBrush="Black" Height="200" Background="{DynamicResource MaterialDesignPaper}" SnapsToDevicePixels="True" Margin="0,24,0,0">
22+
<TextBlock Text="Dense style" Margin="0,16,0,0"/>
23+
<Border BorderThickness="1" BorderBrush="Black" Height="200" Background="{DynamicResource MaterialDesignPaper}" SnapsToDevicePixels="True" Margin="0,8,0,0">
2224
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
23-
<mde:PersistentSearch Style="{StaticResource MaterialDesignPersistentSearchDense}" VerticalAlignment="Top" Margin="8" SearchSuggestionsSource="{Binding Path=SearchSuggestionsSource}" Search="SearchHandler1" />
25+
<mde:PersistentSearch Style="{StaticResource MaterialDesignPersistentSearchDense}" VerticalAlignment="Top" Margin="8" SearchSuggestionsSource="{Binding Path=SearchSuggestionsSource}" Search="SearchHandler2" />
2426
<TextBlock x:Name="searchResultTextBlock2" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,128,0,0" />
2527
</Grid>
2628
</Border>
29+
<TextBlock Text="Custom icons" Margin="0,16,0,0"/>
30+
<Border BorderThickness="1" BorderBrush="Black" Height="200" Background="{DynamicResource MaterialDesignPaper}" SnapsToDevicePixels="True" Margin="0,8,0,0">
31+
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
32+
<mde:PersistentSearch Style="{StaticResource MaterialDesignPersistentSearchDense}" VerticalAlignment="Top" Margin="8" SearchSuggestionsSource="{Binding Path=SearchSuggestionsSource}" Search="SearchHandler3" SearchIcon="{x:Static md:PackIconKind.PrinterSearch}" CancelIcon="{x:Static md:PackIconKind.BellCancel}" ClearIcon="{x:Static md:PackIconKind.CircleArrows}" />
33+
<TextBlock x:Name="searchResultTextBlock3" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,128,0,0" />
34+
</Grid>
35+
</Border>
2736
</StackPanel>
2837
</ScrollViewer>
2938
</Grid>

‎MaterialDesignExtensionsDemo/Controls/SearchControl.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,15 @@ private void SearchHandler1(object sender, SearchEventArgs args)
2828
{
2929
searchResultTextBlock1.Text = "Your are looking for '" + args.SearchTerm + "'.";
3030
}
31+
32+
private void SearchHandler2(object sender, SearchEventArgs args)
33+
{
34+
searchResultTextBlock2.Text = "Your are looking for '" + args.SearchTerm + "'.";
35+
}
36+
37+
private void SearchHandler3(object sender, SearchEventArgs args)
38+
{
39+
searchResultTextBlock3.Text = "Your are looking for '" + args.SearchTerm + "'.";
40+
}
3141
}
3242
}

‎docs/js/AppViewModel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function AppViewModel(contentDivId, drawer) {
1616
self.documentationItems = [
1717
new DocumentationItem('appbar', 'App bar', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/MaterialWindow.png', 'snippets/documentation/appbar.html'),
1818
new DocumentationItem('autocomplete', 'Autocomplete', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/Autocomplete.png', 'snippets/documentation/autocomplete.html'),
19-
new DocumentationItem('busyoverlay', 'Busy overlay', null, 'snippets/documentation/busyoverlay.html'),
19+
new DocumentationItem('busyoverlay', 'Busy overlay', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/BusyOverlay.png', 'snippets/documentation/busyoverlay.html'),
2020
new DocumentationItem('filesystemcontrols', 'File system controls', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/OpenFileControl1.png', 'snippets/documentation/filesystemcontrols.html'),
2121
new DocumentationItem('gridlist', 'Grid list', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/GridList.png', 'snippets/documentation/gridlist.html'),
2222
new DocumentationItem('materialwindow', 'Material window', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/MaterialWindow.png', 'snippets/documentation/materialwindow.html'),
@@ -25,7 +25,7 @@ function AppViewModel(contentDivId, drawer) {
2525
new DocumentationItem('search', 'Search', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/PersistentSearch.png', 'snippets/documentation/search.html'),
2626
new DocumentationItem('stepper', 'Stepper', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/HorizontalStepper.png', 'snippets/documentation/stepper.html'),
2727
new DocumentationItem('tabs', 'Tabs', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/TabControl1.png', 'snippets/documentation/tabs.html'),
28-
new DocumentationItem('textboxsuggestions', 'Text box suggestions', null, 'snippets/documentation/textboxsuggestions.html')
28+
new DocumentationItem('textboxsuggestions', 'Text box suggestions', 'https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/TextBoxSuggestions.png', 'snippets/documentation/textboxsuggestions.html')
2929
];
3030

3131
self.goToNavigationItem = function (navigationItem) {

‎docs/snippets/documentation/autocomplete.html‎

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,85 @@
11
<div>
22
<h1>Autocomplete</h1>
3-
Documentation under construction
4-
</div>
3+
<p>
4+
The following predefined styles are available:
5+
<ul>
6+
<li><code>MaterialDesignAutocomplete</code></li>
7+
<li><code>MaterialDesignAutocompleteDense</code></li>
8+
</ul>
9+
</p>
10+
11+
<h2>Screenshots</h2>
12+
<img src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/Autocomplete.png" alt="Autocomplete" />
13+
<h2>Code example</h2>
14+
15+
<p>Item template</p>
16+
<pre class="language-markup"><code class="language-markup">
17+
&lt;DataTemplate x:Key="itemTemplate">
18+
&lt;DockPanel>
19+
&lt;md:PackIcon DockPanel.Dock="Left" Kind="{Binding Path=Icon}" Width="24" Height="24" VerticalAlignment="Center" SnapsToDevicePixels="True" />
20+
&lt;TextBlock FontSize="14" Text="{Binding Path=Name}" VerticalAlignment="Center" Margin="24,0,0,0" />
21+
&lt;/DockPanel>
22+
&lt;/DataTemplate>
23+
</code></pre>
24+
25+
<p>Autocomplete control</p>
26+
<pre class="language-markup"><code class="language-markup">
27+
&lt;mde:Autocomplete Style="{StaticResource MaterialDesignAutocomplete}"
28+
AutocompleteSource="{Binding Path=AutocompleteSource}"
29+
Hint="Which OS?"
30+
Margin="0,16,0,0"
31+
ItemTemplate="{StaticResource itemTemplate}" />
32+
</code></pre>
33+
34+
<p>Autocomplete data source</p>
35+
<pre class="language-markup"><code class="language-markup">
36+
public class AutocompleteViewModel : ViewModel
37+
{
38+
private IAutocompleteSource _autocompleteSource;
39+
40+
public IAutocompleteSource AutocompleteSource
41+
{
42+
get => _autocompleteSource;
43+
}
44+
45+
public AutocompleteViewModel() : base()
46+
{
47+
_autocompleteSource = new OperatingSystemAutocompleteSource();
48+
}
49+
}
50+
51+
public class OperatingSystemItem
52+
{
53+
public PackIconKind Icon { get; set; }
54+
public string Name { get; set; }
55+
public OperatingSystemItem() { }
56+
}
57+
58+
public class OperatingSystemAutocompleteSource : IAutocompleteSource
59+
{
60+
private List<OperatingSystemItem> _operatingSystemItems;
61+
62+
public OperatingSystemAutocompleteSource()
63+
{
64+
_operatingSystemItems = new List<OperatingSystemItem>()
65+
{
66+
new OperatingSystemItem() { Icon = PackIconKind.MicrosoftWindows, Name = "Windows 7" },
67+
new OperatingSystemItem() { Icon = PackIconKind.MicrosoftWindows, Name = "Windows 8" },
68+
new OperatingSystemItem() { Icon = PackIconKind.MicrosoftWindows, Name = "Windows 8.1" },
69+
new OperatingSystemItem() { Icon = PackIconKind.MicrosoftWindows, Name = "Windows 10" }
70+
};
71+
}
72+
73+
public IEnumerable Search(string searchTerm)
74+
{
75+
searchTerm = searchTerm ?? string.Empty;
76+
searchTerm = searchTerm.ToLower();
77+
78+
return _operatingSystemItems.Where(item => item.Name.ToLower().Contains(searchTerm));
79+
}
80+
}
81+
</code></pre>
82+
<script type="text/javascript">
83+
appViewModel.prepareCodeSnippets();
84+
</script>
85+
</div>

‎docs/snippets/documentation/busyoverlay.html‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,85 @@
11
<div>
22
<h1>Busy overlay</h1>
3-
Documentation under construction
3+
<p>
4+
The following predefined styles are available:
5+
<ul>
6+
<li><code>MaterialBusyOverlayCircular</code></li>
7+
<li><code>MaterialBusyOverlayCircularProgress</code></li>
8+
<li><code>MaterialBusyOverlayLinear</code></li>
9+
<li><code>MaterialBusyOverlayLinearProgress</code></li>
10+
</ul>
11+
</p>
12+
13+
<h2>Screenshots</h2>
14+
<img src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/BusyOverlay.png" alt="Busy overlay" />
15+
16+
<h2>Code example</h2>
17+
18+
<p>Busy overlay control</p>
19+
<pre class="language-markup"><code class="language-markup">
20+
&lt;mde:BusyOverlay IsBusy="{Binding Path=IsBusy}"
21+
Progress="{Binding Path=Progress}"
22+
Style="{StaticResource MaterialBusyOverlayCircular}" />
23+
</code></pre>
24+
25+
<p>Busy overlay show and progress bindings</p>
26+
<pre class="language-markup"><code class="language-markup">
27+
public class BusyOverlayViewModel : ViewModel
28+
{
29+
private bool _isBusy;
30+
public bool IsBusy
31+
{
32+
get => _isBusy;
33+
set
34+
{
35+
_isBusy = value;
36+
OnPropertyChanged(nameof(IsBusy));
37+
}
38+
}
39+
40+
private int _progress;
41+
public int Progress
42+
{
43+
get => _progress;
44+
set
45+
{
46+
_progress = value;
47+
OnPropertyChanged(nameof(Progress));
48+
}
49+
}
50+
51+
public BusyOverlayViewModel() : base()
52+
{
53+
_isBusy = false;
54+
_progress = 0;
55+
}
56+
57+
public async Task BeBusyAsync()
58+
{
59+
try
60+
{
61+
Progress = 0;
62+
IsBusy = true;
63+
64+
//Simulate work and update progress
65+
await Task.Run(async () =>
66+
{
67+
int progress = 0;
68+
69+
while (progress < 100)
70+
{
71+
await Task.Delay(250);
72+
73+
progress += 10;
74+
Progress = progress;
75+
}
76+
});
77+
}
78+
finally
79+
{
80+
IsBusy = false;
81+
}
82+
}
83+
}
84+
</code></pre>
485
</div>

‎docs/snippets/documentation/search.html‎

Lines changed: 82 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,82 @@
1-
<div>
2-
<h1>Search</h1>
3-
Documentation under construction
4-
</div>
1+
<div>
2+
<h1>Persistent search</h1>
3+
<p>
4+
The following predefined styles are available:
5+
<ul>
6+
<li><code>MaterialDesignPersistentSearch</code></li>
7+
<li><code>MaterialDesignPersistentSearchDense</code></li>
8+
</ul>
9+
</p>
10+
11+
<h2>Screenshots</h2>
12+
<img src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/PersistentSearch.png" alt="Persistent search" />
13+
14+
<h2>Code example</h2>
15+
16+
<p>Persistent search control</p>
17+
<pre class="language-markup"><code class="language-markup">
18+
&lt;mde:PersistentSearch
19+
Margin="8"
20+
VerticalAlignment="Top"
21+
SearchSuggestionsSource="{Binding SearchSuggestionsSource}" />
22+
</code></pre>
23+
24+
<p>Persistent search data source</p>
25+
<pre class="language-markup"><code class="language-markup">
26+
public class SearchViewModel : ViewModel
27+
{
28+
public ISearchSuggestionsSource SearchSuggestionsSource
29+
{
30+
get => new OperatingSystemsSearchSuggestionsSource();
31+
}
32+
}
33+
34+
public class OperatingSystemsSearchSuggestionsSource : ISearchSuggestionsSource
35+
{
36+
private List<string> _operatingSystems;
37+
38+
public OperatingSystemsSearchSuggestionsSource()
39+
{
40+
_operatingSystems = new List<string>
41+
{
42+
"Windows 7",
43+
"Windows 8",
44+
"Windows 8.1",
45+
"Windows 10"
46+
};
47+
}
48+
49+
public IList<string> GetAutoCompletion(string searchTerm)
50+
{
51+
return _operatingSystems.Where(os => os.ToLower().Contains(searchTerm.ToLower())).ToList();
52+
}
53+
54+
public IList<string> GetSearchSuggestions()
55+
{
56+
return new List<string> { "Windows 10", "Windows 8.1" };
57+
}
58+
}
59+
</code></pre>
60+
61+
<h2>Custom icons</h2>
62+
63+
<p>Make sure to include this namespace</p>
64+
<pre class="language-markup"><code class="language-markup">
65+
xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
66+
</code></pre>
67+
68+
<p>Set your desired icons like this</p>
69+
<pre class="language-markup"><code class="language-markup">
70+
&lt;mde:PersistentSearch
71+
Margin="8"
72+
VerticalAlignment="Top"
73+
SearchSuggestionsSource="{Binding SearchSuggestionsSource}"
74+
SearchIcon="{x:Static md:PackIconKind.PrinterSearch}"
75+
CancelIcon="{x:Static md:PackIconKind.BellCancel}"
76+
ClearIcon="{x:Static md:PackIconKind.CircleArrows}" />
77+
</code></pre>
78+
79+
<script type="text/javascript">
80+
appViewModel.prepareCodeSnippets();
81+
</script>
82+
</div>

0 commit comments

Comments
 (0)