A cross-platform implementation of the League of Legends-inspired slider using OpenSilver
OpenSilver RiotSlider is a cross-platform implementation of a custom slider control inspired by League of Legends, built using OpenSilver. This project demonstrates how WPF developers can leverage their existing XAML and C# skills to create web applications using WebAssembly technology.
![](https://private-user-images.githubusercontent.com/52397976/354824919-7d4d9dd5-5858-4a25-a7fc-b449fdb34eb5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTc3NjQsIm5iZiI6MTczOTU5NzQ2NCwicGF0aCI6Ii81MjM5Nzk3Ni8zNTQ4MjQ5MTktN2Q0ZDlkZDUtNTg1OC00YTI1LWE3ZmMtYjQ0OWZkYjM0ZWI1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA1MzEwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNhMDYzOGIzMmYyMmZmNmU1YTM1NjYxZjUwZTdjODJiZDkzMDcyNmQxNmY4YjE3NGVjOGVkYzM2MjIyNjE5YjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.KWjPbk8DV5lAgQEWged1n71p0IbwLJexePsTA8dduI0)
![](https://private-user-images.githubusercontent.com/52397976/354825049-84f8f5d5-f220-4408-bfc6-aa29af6ae1f9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTc3NjQsIm5iZiI6MTczOTU5NzQ2NCwicGF0aCI6Ii81MjM5Nzk3Ni8zNTQ4MjUwNDktODRmOGY1ZDUtZjIyMC00NDA4LWJmYzYtYWEyOWFmNmFlMWY5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA1MzEwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU3NjgyM2QwMTM2YWE0Yjc5MWRhMzZiMTc1ZjRjN2Q4MDNlZjRlZjI4YTg1MmNjOTljNjhjYmU3ZGZmM2YwNDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.PVUm1g6nfyDtP08FaJVHanHrVF-WEY1qRxW01Qekz_k)
- Utilization of OpenSilver for WebAssembly-based web applications
- Seamless transition for WPF developers to web development
- Consistent XAML-based development experience
- Implementation of RiotSlider as a CustomControl
- Use of ControlTemplate for flexible and customizable design
- Demonstration of advanced XAML techniques in a web context
- Leveraging WPF design patterns in web development
- Showcasing the power of MVVM in OpenSilver
- Utilizing DependencyProperties for robust property system
- Efficient rendering tailored for web environments
- Optimized for WebAssembly execution
- Use of OpenSilver Simulator for easier debugging and testing
- Seamless integration with existing .NET development tools
- OpenSilver 2.0+
- .NET 7.0+
- C# 10.0
- XAML
- Visual Studio 2022 or later
- .NET 7.0 SDK or later
- OpenSilver extension for Visual Studio
![](https://private-user-images.githubusercontent.com/52397976/354799051-af70f422-7057-4e77-a54d-042ee8358d2a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTc3NjQsIm5iZiI6MTczOTU5NzQ2NCwicGF0aCI6Ii81MjM5Nzk3Ni8zNTQ3OTkwNTEtYWY3MGY0MjItNzA1Ny00ZTc3LWE1NGQtMDQyZWU4MzU4ZDJhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA1MzEwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAxZjg3MDllMWIyZGU2M2M5MTBkMTkwMWJlODI2ZmZmMGY3OGRkNGMwYWQ3ZTg1MzFhZTFiNmYwMDEyMTM4NTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.zlZ1LfA5TVv9gQRZdNaKyQDBgBHJxl_sJulKmyvS8LA)
![](https://private-user-images.githubusercontent.com/52397976/354825241-f2e8c10f-1690-47a3-b748-cbe54e0d9d72.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTc3NjQsIm5iZiI6MTczOTU5NzQ2NCwicGF0aCI6Ii81MjM5Nzk3Ni8zNTQ4MjUyNDEtZjJlOGMxMGYtMTY5MC00N2EzLWI3NDgtY2JlNTRlMGQ5ZDcyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA1MzEwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc1MGZmYWMwYjg1Y2E0MGM1ODA0NGU5ODI2ZDdjNWUwZjczMGU5ZjlhYTRkZTlmMTA2ZTM1OTM5ZDExYWE4MmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.F01DhGyiJxKSFq4jkVl4_GG-W35fU7cqS_NYfzFGvB0)
![](https://private-user-images.githubusercontent.com/52397976/354825313-227f7522-d30e-4ac7-a3e5-ef264b04fb29.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTc3NjQsIm5iZiI6MTczOTU5NzQ2NCwicGF0aCI6Ii81MjM5Nzk3Ni8zNTQ4MjUzMTMtMjI3Zjc1MjItZDMwZS00YWM3LWEzZTUtZWYyNjRiMDRmYjI5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA1MzEwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFhZjM5ZDk0MzY1ZGU4MjEyZDg5Yjg3OTA2MDIxNmRkOGRlMTQwYWM2ZTNkYzg3ZjY5NjU0ZGRhZGQyYjQ3NzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.mDjMaO2zEbZbIs2AKJqRXNpVc1CQwkMmRXsh9i9A89k)
git clone https://github.com/jamesnet214/riotslider-opensilver.git
- Visual Studio
- Set OpenSilverRiotSlider.Browser as the startup project
- Build and run the project
- For debugging, use OpenSilverRiotSlider.Simulator
This project offers valuable insights for WPF developers transitioning to web development:
- XAML in Web Development: Learn how to use familiar XAML in a web context
- CustomControl in OpenSilver: Understand the nuances of creating custom controls for web
- WebAssembly Integration: Explore how .NET applications can run in browsers via WebAssembly
- Cross-Platform UI Design: Master techniques for creating consistent UIs across platforms
- Performance Optimization: Learn to optimize XAML-based controls for web environments
Contributions to OpenSilver RiotSlider are welcome! Feel free to submit issues, create pull requests, or suggest improvements.
This project is licensed under the MIT License - see the LICENSE file for details.
- Website: https://jamesnet.dev
- Email: [email protected], [email protected]
Explore the possibilities of cross-platform development with OpenSilver RiotSlider!