WPF - Dashboard | MVVM | UI Design | XAML | C# | Tutorial
HTML-код
- Опубликовано: 16 май 2024
- [ Skill Level : Intermediate ]
A WPF - MVVM Based Modern / Contemporary Dashboard UI Design with Text Search Filter.
Subscription Link for more WPF videos and updates :
ruclips.net/user/cdesignproarunmut...
Download the Complete Source Code from Github Repository.
Link : github.com/CSharpDesignPro/WP...
// Chapters //
00:00 Intro
07:00 Predefined Style Template
07:28 Model
12:10 RelayCommand
16:32 ViewModel
17:20 CollectionViewSource
18:00 ICollectionView
18:52 ObservableCollection
23:02 INotifyPropertyChanged Interface Member
23:45 Text Search Filter
31:05 ItemsControl
33:25 View
38:23 DataTemplates
43:10 Switch Views
45:50 ICommand
47:27 Close App
49:28 Command Parameter
50:15 Page Container
51:15 Close Button
Subscription Link for more WPF videos and updates :
ruclips.net/user/cdesignproarunmut...
Related Videos
WPF - Navigation Menu With Sub Menu : • WPF - Navigation Menu ...
WPF - Navigation Drawer / Sidebar Menu : • WPF - Navigation Drawe...
WPF - Hamburger Menu / SubMenu : • WPF - Hamburger Menu /...
Channel Link: / cdesignpro_arunmutharasu
Tools Used :
Microsoft Visual Studio Community Edition 2019
Icon Credits :
icons8.com/icons
Thank you!
Have a great day!
For Business Inquiries : arun.enterprises.co@gmail.com
I watched one of your videos yesterday and thought..dang I wish he showed an MVVM version.
And here we are.
@Rick - Right on time! Thanks:)
I wanted to make a program with wpf using mvvm pattern without using Code Behind as much as possible, but I'm really grateful that the video I wanted came out.
I'll take that into consideration and learn well.
@오창석 - That's great!
Man I love your work, Keep going...
@Nematullah Hussaini - Sure. Thanks!
You´re a realy dev ninja...Congrats!!
@FRO ELETRONIC - Thank you!
Great videos! Would like to see more MVVM please.
@GuildOfCalamity - I'm glad! Thanks for the appreciation:) Sure, I'll try to make more videos on MVVM.
So wonderfull! Thanks. From VN with love
@vuphong6036 - Thank you for your kind words! I'm delighted to know that you found the content both valuable and useful.
That's was awesome, Thank a lot🤗
@morteza jafari - You're welcome:) Glad you liked it!
Incredible video! Good job thank you
@Chloe - Thank you!
@@CSharpDesignPro keep it up! The subs will come I am sure!!! Merry Christmas
@Chloe - I really do appreciate your kind words! Thanks a lot! Merry Christmas!!!
very impressiv! keep going on
@samename - Thank you!
Thanks for upload Great Video!
@천도현 - Glad it was helpful!
Спасибо за урок!!!!!
@Павел Куликов - Glad to be of help!
i love WPF
you are very good innovative Designer.
@Bahur Deen - Thank you!
Good video👍
@ATD inc. - Thank you!
where can I learn your MVVM, and WPF?
can you show me the path to build like him?
anyone?
Thanks for the animations
@angelldark6426 - You're welcome!
uff......one year later ......still great ....I love it.
@PicharDev - I really appreciate your kind words. Thanks!
Thanks. I would love to see how to handle displaying real-time data using MVVM.
@SeeMovie Love - Sure!
Hello
I'm studying after seeing a good code with this MVVM applied well.
Can you tell me how to create and show a new window when you click the button by applying MVVM to this code?
No matter how hard I try, it doesn't work, so I'm asking
Thank you.
@오창석 - Hi, I'm glad the tutorial was helpful! Can you post the code that you have tried so far? It would be easier for me to provide a better solution.
Great Video, Thank you!
i would like to show no item found when the user types a menu that isn't available..
@dxdiag Mr-jiro - Thanks!
// To Display "No Record Found" using a label //
1. Declare a BooleanToVisibilityConverter in Windows Resources.
2. Add a Label to the Menu Grid.
3. Create a bool "ShowLabel" method and set it to false in NavigationViewModel.
4. Bind "ShowLabel" to the "Visibility" property of the Label along with the Converter in the Menu Grid.
5. Add an If Else statement to the MenuItems_Filter method.
if (MenuItemsCollection.View.IsEmpty)
{
// Show label if CollectionView is Empty
ShowLabel = true;
}
else
{
// Hide label if CollectionView is not Empty
ShowLabel = false;
}
I hope this helps.
@@CSharpDesignPro Thanks for the quick reply! i'll try it and get back.
very 👍
@김영수 - Thanks!
I have trouble to understand the need of call OnPropertyChanged() in the FilterText setter. I removed it and the filter still working. The UpdateSourceTrigger of the TextBox doesn't make a double call ?
@aze eza - Hi, Here in this case, you need to call the OnPropertyChanged whenever the property is updated or the source has been changed dynamically. You should check if the value is actually changed before firing the OnPropertyChanged event. The textbox is checking for the change, and thereby avoiding an infinite cycle of binding updates. To know more about OnPropertyChanged, check the following links :
( One Way and Two Way Binding )
docs.microsoft.com/en-us/dotnet/desktop/wpf/data/how-to-implement-property-change-notification?view=netframeworkdesktop-4.8
( Filtering Data )
docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/how-to-group-sort-and-filter-data-in-the-datagrid-control?view=netframeworkdesktop-4.8
I hope this helps.
@@CSharpDesignPro Yes, thanks for your reply !
Great video. I am practicing to build app by imitating your video. In one of the views I created usercontrol with a form, with textboxes and autocomplete box. After clicking of submit butto, the data saved to the database but the content on the view usercontrol is not refreshing. It is showing the data as it is it was filled. If I clear the textbox, the autocomplete box, which should be updated with the latest data is not updating. Else after submittjng and then switching the views from menu option works. Kindly help how I can submit the data and refreshes the ui with updated data
@Deepakkumar-ry8kv - I'm happy to hear that the video helped you out! It seems like you're experiencing an issue with refreshing the UI after submitting data. Make sure your data bindings are correctly set up and consider implementing a refresh method or manually updating the UI controls after data submission. I hope this helps. Thanks!
Бля, где же ты был все это время????
Great video! But I have one trouble, I need left menu horizontal, not vertical, I tried so much to find in, but my head is blown away;D
Please help!
@R33ck Sanchez - Try to replace the 'Menu' code in the MainWindow with the following code.
// Comment Out the 'Page Container' code to test the horizontal left menu code. //
@@CSharpDesignPro thank you very much! I’ll try it later
@@CSharpDesignPro It's working! thank you very much!
@R33ck Sanchez - Glad it was helpful!
Вот тебе задачка, над которой сейчас бьюсь я, если поможешь, буду очень признателен, как сделать фильтрацию, которую ты реализовал, только для древовидной структуры?
@Zero Indefined - TreeView filtering could be achieved with a slight modification, try to create an ItemsCollection with a filter that includes all the nodes in the hierarchy [HierarchicalDataTemplate] while using the same delegate, and then update the filter. I hope that helps.
@@CSharpDesignProСпасибо большое, обязательно попробую, отпишусь о результатах😁
@@CSharpDesignPro, вопрос: То есть мне придется перестроить архитектуру, так как я не наследовался от узлов дерева, чтобы было проще:
public class MenuItem
{
private List _Childs = new List();
private PackIconBootstrapIconsKind _Kind = PackIconBootstrapIconsKind.Info;
public MenuItem()
{
}
///
/// Картинки
///
public PackIconBootstrapIconsKind Kind
{
get { return _Kind; }
set
{
_Kind = value;
}
}
///
/// Имя блока или позиции
///
public string Name { get; set; }
///
/// В отдельном ли окне?
///
[DefaultValue(false)]
public bool IsExpanded { get; set; }
[DefaultValue(false)]
public bool IsDeployed { get; set; }
public bool IsDeployedable => Childs.Count != 0;
///
/// Дочерние элементы
///
public List Childs
{
get { return _Childs; }
set
{
_Childs = value;
}
}
}
public class MenuCollection : INotifyPropertyChanged
{
private CollectionViewSource _MenuItemsCollection;
public ICollectionView MenuItemsSourceCollection => _MenuItemsCollection.View;
public MenuCollection()
{
ObservableCollection Items = new ObservableCollection();
#region Настройки
MenuItem SettingsItem = new MenuItem() { Name = "Настройки",Kind = PackIconBootstrapIconsKind.Gear };
MenuItem MainSettingsItem = new MenuItem() { Name = "Основные", Kind = PackIconBootstrapIconsKind.BookmarkCheck };
MenuItem GraphicsItem = new MenuItem() { Name = "Оформление", Kind = PackIconBootstrapIconsKind.Palette };
SettingsItem.Childs.Add(MainSettingsItem);
SettingsItem.Childs.Add(GraphicsItem);
#endregion
Items.Add(SettingsItem);
_MenuItemsCollection = new CollectionViewSource() {Source = Items };
_MenuItemsCollection.Filter += _MenuItemsCollection_Filter;
}
protected void OnPropertyChanged([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
public event PropertyChangedEventHandler PropertyChanged;
private string _Filter;
public string Filter
{
get { return _Filter; }
set
{
_Filter = value;
_MenuItemsCollection.View.Refresh();
OnPropertyChanged("Filter");
}
}
private void _MenuItemsCollection_Filter(object sender, FilterEventArgs e)
{
if (string.IsNullOrEmpty(Filter))
{
e.Accepted = true;
return;
}
MenuItem MenuItem = e.Item as MenuItem;
e.Accepted = FindInMenuItem(MenuItem, Filter, e);
}
private bool FindInMenuItem(MenuItem menuItem, string filter, FilterEventArgs e)
{
if (menuItem.Childs.Count == 0)
{
if (menuItem.Name.ToUpper().Contains(filter.ToUpper()))
{
e.Accepted = true;
}
else
{
e.Accepted = false;
}
}
else
{
bool Privileged = false;
foreach (MenuItem item in menuItem.Childs)
{
bool Result = FindInMenuItem(item, Filter, e);
if ((Privileged == false)&&(Result == true))
{
Privileged = Result;
}
}
e.Accepted = Privileged;
}
return e.Accepted;
}
}
I can't see the source code please help me.
@Mai Vayne - Hi, Check the link again. You should be able to find it now.
@@CSharpDesignPro thank a lot.
@@CSharpDesignPro so impressive
@Mai Vayne - Thank you!
Can you upload the source code on github please ?
@Amr Yakout - You can find the link in the description!
@@CSharpDesignPro I found it, thanks 😊