WPF - Custom Scroll Bar / Scroll Viewer | UI Design | XAML | C# | Tutorial
HTML-код
- Опубликовано: 5 июн 2024
- [ Skill Level : Advanced ]
Hi, this video demonstrates the use and modification of the default " ControlTemplate " of the Scrollbar / Scroll Viewer. This includes the modification of the "RepeatButton" , "Track" & "Thumb" parts of the scrollbar template.
Subscription Link for more WPF videos and updates :
ruclips.net/user/cdesignproarunmut...
Playlist : • WPF - Navigation Drawe...
Download the Complete Source Code from Github Repository.
Link : github.com/CSharpDesignPro/WP...
Channel Link: / cdesignpro_arunmutharasu
Chapters:
0:00 Intro
0:10 App Preview
0:58 Open Visual Studio IDE
1:06 Create a New Project
1:40 Setup Main Window
2:38 Define Grid Rows
3:08 Header
3:29 Body
3:48 Footer
4:21 SrollViewer
4:42 Grid layout for the images
6:24 Styling the scrollbar
8:24 Vertical scrollbar template
10:57 Up Arrow button style [ Repeat Button ]
11:59 Down Arrow button style [ Repeat Button ]
12:58 Track
14:36 Thumb
15:48 Implementing the styled template
16:06 Creating an Assets folder for the images
16:39 Set the image resource for the Up & Down Arrow buttons
17:30 Assign image for the Up Arrow button
17:44 Assign image for the Down Arrow button.
17:55 Add a resource dictionary to style the elements
18:59 Thumb [style]
22:56 Track [style]
24:31 Up & Down Arrow buttons MouseOver event [style]
30:16 Implement Thumb & Track style
30:55 Implement Up & Down Arrow button style
31:28 Declaring a MultiValue Converter
35:48 Binding the MultiValue Converter
39:25 Add images to the ScrollViewer grid
42:34 Header Title & Close button [style]
That's it!
Tools Used :
Microsoft Visual Studio Community Edition 2019
Icon Credits :
Link : icons8.com/icons
Background Music Credits:
Summer Nights by LiQWYD / liqwyd
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/summer-nights-liqwyd
Music promoted by Audio Library • Summer Nights - LiQWYD...
Thank you!
Have a great day!
For Business Inquiries : arun.enterprises.co@gmail.com
Thank you for putting in a lot of effort. Thank you very much.
Thanks for your effort , keep it up !
@Thái Sơn Nguyễn - Sure! Will do. Thanks.
Just found your channel, very nice... subscribed
+Michael Harmon - I'm glad. Thank you for subscribing to my channel :)
Super good video, not too fast and could be adapted for your own personal style, thanks for sharing. 👌
@Vinny Passmore - I appreciate that!
@@CSharpDesignPro What I cant seem to figure out is the ScrollLimitConverter in xaml is neither there or recognised!
Glad I didn't point fingers at other than to myself, If anyone who's following along and find this problem check your indent on the cs !!!
wow, so beautiful, thanks for your shared
@Code Ngẫu Hứng - Glad you like it! Thanks!
thank you for sharing. Nice tutorial..
@Budi Santoso - Glad. Thank you!
thanks for the tutorial but a recommendation would be to show what you doing for example in many spots you were writing code even though you were putting comments you weren't showing what the code actually were doing.
@Fuzzy D Pozzy - Thanks for the appreciation. Based on your recommendation, I have updated the description with video chapters. I hope that'll be helpful. Thanks for watching:)
Love U M8 ❤️❤️❤️❤️❤️
Hi thank you very much in your effort, I just started coding, i want to try to make my own english application !
@KIMJINWOODONG - Go for it! Glad the tutorial was helpful.
Nice
Thank you!
Make sure to subscribe and turn on the notification for upcoming videos and updates from this channel.
Hi ! A very usefull und informative Video !
is it possible to get the imgBrushes clickable ? I would like to create kind of a menu with 2 Arows left and right and would like to get the pictures clickable (like a normal click event) but im a beginner in programming. maybe you could create a video or help how i get this horizontal for a one line Scrollview with clickable pictures.
@Thomas Bytoff - Hi, thanks for the appreciation! I'm glad the tutorial was helpful. Making a video tutorial, I suppose, would be better. I'll try to make one.
hi there, ii guess i find the answer prior but i didnt copy paste the code but nstead i follow and used bits, its all great, thanks for that but i cant drag the thumb, any idea why? or where i HAVE to write some line of code
@Salu omnidentidade - Hi, It's great to know that you are trying to customize the code even further and re-template it. There is one thing that I can think of right now, which might resolve the issue.
Certain style parts have a specific predefined name. Check the "Track" container name. The name has to be "PART_Track" and nothing else. Don't try to rename it. If that does not resolve the issue, you can post the code here. I hope that helps!
That is great it worked!
If it isn't much to ask, there are 3 more obvious mistakes on my code, 1st when the thumb is up it covers the repeat button I added margin to the thumb so it doesn't cover the top repeat button but then I get the track color overlapping the repeatbutton, then the repeat button lineupcommand (the one outside the ) is not working, all the track is a lunedowncommand this maybe has to do with the grid. And lastly the thumb has an effect like shadow or 3d that is unwanted, I remove the border but that stays and I couldnt find the name of it.
All this is a learning project I can share the code with you if you interested I guess if I fix this bugs the project is done for desktop . Anyway thanks a lot for the track name was that easy :)
In context this xaml file is almost half code for the scroll, that's why I try to reduce to a bare minimum. I have a single scrollbar in a text box