-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #127 from michaldivis/master
Support for custom icons in PersistentSearch, new documentation
- Loading branch information
Showing
11 changed files
with
381 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,85 @@ | ||
| <div> | ||
| <h1>Autocomplete</h1> | ||
| Documentation under construction | ||
| </div> | ||
| <p> | ||
| The following predefined styles are available: | ||
| <ul> | ||
| <li><code>MaterialDesignAutocomplete</code></li> | ||
| <li><code>MaterialDesignAutocompleteDense</code></li> | ||
| </ul> | ||
| </p> | ||
|
|
||
| <h2>Screenshots</h2> | ||
| <img src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/Autocomplete.png" alt="Autocomplete" /> | ||
| <h2>Code example</h2> | ||
|
|
||
| <p>Item template</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| <DataTemplate x:Key="itemTemplate"> | ||
| <DockPanel> | ||
| <md:PackIcon DockPanel.Dock="Left" Kind="{Binding Path=Icon}" Width="24" Height="24" VerticalAlignment="Center" SnapsToDevicePixels="True" /> | ||
| <TextBlock FontSize="14" Text="{Binding Path=Name}" VerticalAlignment="Center" Margin="24,0,0,0" /> | ||
| </DockPanel> | ||
| </DataTemplate> | ||
| </code></pre> | ||
|
|
||
| <p>Autocomplete control</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| <mde:Autocomplete Style="{StaticResource MaterialDesignAutocomplete}" | ||
| AutocompleteSource="{Binding Path=AutocompleteSource}" | ||
| Hint="Which OS?" | ||
| Margin="0,16,0,0" | ||
| ItemTemplate="{StaticResource itemTemplate}" /> | ||
| </code></pre> | ||
|
|
||
| <p>Autocomplete data source</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| public class AutocompleteViewModel : ViewModel | ||
| { | ||
| private IAutocompleteSource _autocompleteSource; | ||
|
|
||
| public IAutocompleteSource AutocompleteSource | ||
| { | ||
| get => _autocompleteSource; | ||
| } | ||
|
|
||
| public AutocompleteViewModel() : base() | ||
| { | ||
| _autocompleteSource = new OperatingSystemAutocompleteSource(); | ||
| } | ||
| } | ||
|
|
||
| public class OperatingSystemItem | ||
| { | ||
| public PackIconKind Icon { get; set; } | ||
| public string Name { get; set; } | ||
| public OperatingSystemItem() { } | ||
| } | ||
|
|
||
| public class OperatingSystemAutocompleteSource : IAutocompleteSource | ||
| { | ||
| private List<OperatingSystemItem> _operatingSystemItems; | ||
|
|
||
| public OperatingSystemAutocompleteSource() | ||
| { | ||
| _operatingSystemItems = new List<OperatingSystemItem>() | ||
| { | ||
| new OperatingSystemItem() { Icon = PackIconKind.MicrosoftWindows, Name = "Windows 7" }, | ||
| new OperatingSystemItem() { Icon = PackIconKind.MicrosoftWindows, Name = "Windows 8" }, | ||
| new OperatingSystemItem() { Icon = PackIconKind.MicrosoftWindows, Name = "Windows 8.1" }, | ||
| new OperatingSystemItem() { Icon = PackIconKind.MicrosoftWindows, Name = "Windows 10" } | ||
| }; | ||
| } | ||
|
|
||
| public IEnumerable Search(string searchTerm) | ||
| { | ||
| searchTerm = searchTerm ?? string.Empty; | ||
| searchTerm = searchTerm.ToLower(); | ||
|
|
||
| return _operatingSystemItems.Where(item => item.Name.ToLower().Contains(searchTerm)); | ||
| } | ||
| } | ||
| </code></pre> | ||
| <script type="text/javascript"> | ||
| appViewModel.prepareCodeSnippets(); | ||
| </script> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,85 @@ | ||
| <div> | ||
| <h1>Busy overlay</h1> | ||
| Documentation under construction | ||
| <p> | ||
| The following predefined styles are available: | ||
| <ul> | ||
| <li><code>MaterialBusyOverlayCircular</code></li> | ||
| <li><code>MaterialBusyOverlayCircularProgress</code></li> | ||
| <li><code>MaterialBusyOverlayLinear</code></li> | ||
| <li><code>MaterialBusyOverlayLinearProgress</code></li> | ||
| </ul> | ||
| </p> | ||
|
|
||
| <h2>Screenshots</h2> | ||
| <img src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/BusyOverlay.png" alt="Busy overlay" /> | ||
|
|
||
| <h2>Code example</h2> | ||
|
|
||
| <p>Busy overlay control</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| <mde:BusyOverlay IsBusy="{Binding Path=IsBusy}" | ||
| Progress="{Binding Path=Progress}" | ||
| Style="{StaticResource MaterialBusyOverlayCircular}" /> | ||
| </code></pre> | ||
|
|
||
| <p>Busy overlay show and progress bindings</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| public class BusyOverlayViewModel : ViewModel | ||
| { | ||
| private bool _isBusy; | ||
| public bool IsBusy | ||
| { | ||
| get => _isBusy; | ||
| set | ||
| { | ||
| _isBusy = value; | ||
| OnPropertyChanged(nameof(IsBusy)); | ||
| } | ||
| } | ||
|
|
||
| private int _progress; | ||
| public int Progress | ||
| { | ||
| get => _progress; | ||
| set | ||
| { | ||
| _progress = value; | ||
| OnPropertyChanged(nameof(Progress)); | ||
| } | ||
| } | ||
|
|
||
| public BusyOverlayViewModel() : base() | ||
| { | ||
| _isBusy = false; | ||
| _progress = 0; | ||
| } | ||
|
|
||
| public async Task BeBusyAsync() | ||
| { | ||
| try | ||
| { | ||
| Progress = 0; | ||
| IsBusy = true; | ||
|
|
||
| //Simulate work and update progress | ||
| await Task.Run(async () => | ||
| { | ||
| int progress = 0; | ||
|
|
||
| while (progress < 100) | ||
| { | ||
| await Task.Delay(250); | ||
|
|
||
| progress += 10; | ||
| Progress = progress; | ||
| } | ||
| }); | ||
| } | ||
| finally | ||
| { | ||
| IsBusy = false; | ||
| } | ||
| } | ||
| } | ||
| </code></pre> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,82 @@ | ||
| <div> | ||
| <h1>Search</h1> | ||
| Documentation under construction | ||
| </div> | ||
| <div> | ||
| <h1>Persistent search</h1> | ||
| <p> | ||
| The following predefined styles are available: | ||
| <ul> | ||
| <li><code>MaterialDesignPersistentSearch</code></li> | ||
| <li><code>MaterialDesignPersistentSearchDense</code></li> | ||
| </ul> | ||
| </p> | ||
|
|
||
| <h2>Screenshots</h2> | ||
| <img src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/PersistentSearch.png" alt="Persistent search" /> | ||
|
|
||
| <h2>Code example</h2> | ||
|
|
||
| <p>Persistent search control</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| <mde:PersistentSearch | ||
| Margin="8" | ||
| VerticalAlignment="Top" | ||
| SearchSuggestionsSource="{Binding SearchSuggestionsSource}" /> | ||
| </code></pre> | ||
|
|
||
| <p>Persistent search data source</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| public class SearchViewModel : ViewModel | ||
| { | ||
| public ISearchSuggestionsSource SearchSuggestionsSource | ||
| { | ||
| get => new OperatingSystemsSearchSuggestionsSource(); | ||
| } | ||
| } | ||
|
|
||
| public class OperatingSystemsSearchSuggestionsSource : ISearchSuggestionsSource | ||
| { | ||
| private List<string> _operatingSystems; | ||
|
|
||
| public OperatingSystemsSearchSuggestionsSource() | ||
| { | ||
| _operatingSystems = new List<string> | ||
| { | ||
| "Windows 7", | ||
| "Windows 8", | ||
| "Windows 8.1", | ||
| "Windows 10" | ||
| }; | ||
| } | ||
|
|
||
| public IList<string> GetAutoCompletion(string searchTerm) | ||
| { | ||
| return _operatingSystems.Where(os => os.ToLower().Contains(searchTerm.ToLower())).ToList(); | ||
| } | ||
|
|
||
| public IList<string> GetSearchSuggestions() | ||
| { | ||
| return new List<string> { "Windows 10", "Windows 8.1" }; | ||
| } | ||
| } | ||
| </code></pre> | ||
|
|
||
| <h2>Custom icons</h2> | ||
|
|
||
| <p>Make sure to include this namespace</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes" | ||
| </code></pre> | ||
|
|
||
| <p>Set your desired icons like this</p> | ||
| <pre class="language-markup"><code class="language-markup"> | ||
| <mde:PersistentSearch | ||
| Margin="8" | ||
| VerticalAlignment="Top" | ||
| SearchSuggestionsSource="{Binding SearchSuggestionsSource}" | ||
| SearchIcon="{x:Static md:PackIconKind.PrinterSearch}" | ||
| CancelIcon="{x:Static md:PackIconKind.BellCancel}" | ||
| ClearIcon="{x:Static md:PackIconKind.CircleArrows}" /> | ||
| </code></pre> | ||
|
|
||
| <script type="text/javascript"> | ||
| appViewModel.prepareCodeSnippets(); | ||
| </script> | ||
| </div> |
Oops, something went wrong.