Skip to content

Commit fa499bb

Browse files
boexlerboexler
committed
docs(readme): update documentation with new search functionality and Material Design features
1 parent 397e8a3 commit fa499bb

2 files changed

Lines changed: 155 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,73 @@ nLogViewer.ShowFilterButtons = false;
234234
- The filter buttons are ToggleButtons that automatically bind to these properties
235235
- The entire filter group can be hidden using `ShowFilterButtons = false`
236236

237+
### Search Functionality
238+
239+
The NLogViewer includes search capabilities that filter log entries based on text patterns or regular expressions. Search terms are displayed as chips/tags and can be managed through the UI or programmatically.
240+
241+
**Search Features:**
242+
- **Text Search** - Case-insensitive substring matching
243+
- **Regex Search** - Full regular expression pattern matching
244+
- **AND Logic** - All search terms must match for an entry to be displayed
245+
- **Search Highlighting** - Matched text is highlighted in both message and logger name columns
246+
- **Context Menu** - Right-click search terms for edit/remove options
247+
248+
**Search Properties:**
249+
- `CurrentSearchText` - The text currently being typed in the search box
250+
- `UseRegexSearch` - Toggle between text search and regex search modes
251+
- `ActiveSearchTerms` - Collection of active search terms (read-only)
252+
- `SearchHighlightBackground` - Brush used to highlight matched text
253+
254+
**Usage:**
255+
256+
```csharp
257+
// Programmatically add search terms
258+
nLogViewer.CurrentSearchText = "error";
259+
nLogViewer.AddSearchTerm(); // Adds as text search
260+
261+
// Enable regex mode and add regex pattern
262+
nLogViewer.UseRegexSearch = true;
263+
nLogViewer.CurrentSearchText = @"\d{4}-\d{2}-\d{2}";
264+
nLogViewer.AddSearchTerm(); // Adds as regex search
265+
266+
// Remove specific search term
267+
var searchTerm = nLogViewer.ActiveSearchTerms.First();
268+
nLogViewer.RemoveSearchTerm(searchTerm);
269+
270+
// Clear all search terms
271+
nLogViewer.ClearAllSearchTerms();
272+
273+
// Customize search highlight color
274+
nLogViewer.SearchHighlightBackground = Brushes.Yellow;
275+
```
276+
277+
**XAML Binding:**
278+
279+
```xaml
280+
<dj:NLogViewer
281+
CurrentSearchText="{Binding SearchText}"
282+
UseRegexSearch="{Binding IsRegexMode}"
283+
SearchHighlightBackground="{Binding HighlightBrush}" />
284+
```
285+
286+
**Search Logic:**
287+
- Search terms are applied to both the **message** and **logger name** columns
288+
- **AND logic**: ALL active search terms must match for a log entry to be displayed
289+
- Text search is case-insensitive and performs substring matching
290+
- Regex search uses full .NET regular expression patterns
291+
- Invalid regex patterns show a warning dialog and are not added
292+
- Search highlighting works in real-time as you add/remove terms
293+
294+
### Control Architecture
295+
296+
NLogViewer is built as a CustomControl with theming support:
297+
298+
**Architecture:**
299+
- **CustomControl Base Class** - Enables proper theming and styling
300+
- **RelayCommand System** - MVVM-compatible command system
301+
- **Theme Support** - Full support for custom themes including Material Design
302+
- **Code Organization** - Separation of concerns between UI and logic
303+
237304
### Format output (ILogEventInfoResolver)
238305

239306
To format the output of a `LogEventInfo`, implement a new instance of `ILogEventInfoResolver` and bind it to the `Resolver` you want to customize:

‎src/NLogViewer.MaterialDesign/README.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ NLogViewer.MaterialDesign extends the base NLogViewer control with Material Desi
99
- Beautiful log level icons and color coding
1010
- Responsive layout with Material Design cards
1111
- Consistent theming with Material Design principles
12+
- Enhanced search functionality with Material Design chips
13+
- Improved column headers with reduced height and separators
1214

1315
## Installation
1416

@@ -58,3 +60,89 @@ In your `App.xaml`, add the Material Design theme and NLogViewer Material Design
5860
</Application.Resources>
5961
</Application>
6062
```
63+
64+
### 3. Use the Control
65+
66+
Add the namespace and use the control in your XAML:
67+
68+
```xaml
69+
<Window x:Class="YourApp.MainWindow"
70+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
71+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
72+
xmlns:dj="clr-namespace:DJ;assembly=NLogViewer">
73+
<Grid>
74+
<dj:NLogViewer />
75+
</Grid>
76+
</Window>
77+
```
78+
79+
## Features
80+
81+
### Material Design Styling
82+
- **Cards**: Log entries are displayed in Material Design cards
83+
- **Icons**: Log levels are represented with Material Design icons
84+
- **Colors**: Consistent color scheme following Material Design guidelines
85+
- **Typography**: Material Design typography
86+
87+
### Search Interface
88+
- **Search Chips**: Search terms are displayed as Material Design chips
89+
- **Regex Indicators**: Regex search terms are prefixed with "/" for identification
90+
- **Context Menus**: Right-click search chips for edit/remove options
91+
- **Search Highlighting**: Matched text is highlighted with Material Design colors
92+
93+
### Layout
94+
- **Reduced Header Height**: Column headers have a reduced height (32px)
95+
- **Column Separators**: Visual separators between columns
96+
- **Responsive Design**: Layout adapts to different screen sizes
97+
98+
### Theme Integration
99+
- **Color Binding**: Search term chips bind to NLogViewer color dependency properties
100+
- **Consistent Styling**: All UI elements follow Material Design principles
101+
- **Dark/Light Theme Support**: Compatible with Material Design theme switching
102+
103+
## Customization
104+
105+
### Color Customization
106+
You can customize the appearance by binding to NLogViewer's color properties:
107+
108+
```xaml
109+
<dj:NLogViewer
110+
TraceBackground="{DynamicResource MaterialDesignChipBackground}"
111+
DebugBackground="{DynamicResource MaterialDesignChipBackground}"
112+
InfoBackground="{DynamicResource MaterialDesignChipBackground}"
113+
WarnBackground="{DynamicResource MaterialDesignChipBackground}"
114+
ErrorBackground="{DynamicResource MaterialDesignChipBackground}"
115+
FatalBackground="{DynamicResource MaterialDesignChipBackground}"
116+
SearchHighlightBackground="{DynamicResource MaterialDesignSelection}"
117+
ShowControlButtons="True"
118+
ShowFilterButtons="True" />
119+
```
120+
121+
### Search Functionality
122+
The Material Design theme provides enhanced search experience:
123+
124+
```csharp
125+
// Enable regex search mode
126+
nLogViewer.UseRegexSearch = true;
127+
128+
// Add search terms programmatically
129+
nLogViewer.CurrentSearchText = "error";
130+
nLogViewer.AddSearchTerm();
131+
132+
// Customize search highlight color
133+
nLogViewer.SearchHighlightBackground = new SolidColorBrush(Colors.Yellow);
134+
```
135+
136+
## Test Applications
137+
138+
This package includes test applications:
139+
140+
- **NLogViewer.MaterialDesign.TestApp** - Standalone test application
141+
- **NLogViewer.TestApp** - Base test application for comparison
142+
143+
## Requirements
144+
145+
- .NET 8.0 or higher
146+
- MaterialDesignThemes 4.9.0 or higher
147+
- NLogViewer base control
148+

0 commit comments

Comments
 (0)