bubdm / displaying-xaml

This library is for display the XAML code of theme library for WPF (e.g. MaterialDesignInXamlToolkit)

Displaying-XAML

This library is for display the XAML code of theme library for WPF (e.g. MaterialDesignInXamlToolkit/MahApps)

Why is this library written ?

Because the demo app for the theme library I'm using (MaterialDesignInXamlToolkit) is too hard to use.
For example, when I want to use a control in the demo, I have to search through its GitHub repo for the code. Obviously, this is a pain, therefore I wrote this library, so that the code can be displayed besides each control.

Demo

How to use this library ?

1. Install from nuget

Install-Package XamlDisplayerPackage -Version 1.0.3

2. Call the XamlDisplayerPanel initializer at the app startup

        private void App_OnStartup(object sender, StartupEventArgs e) {
            XamlDisplayerPanel.Initialize(
                source:
                    XamlDisplayerPanel.SourceEnum.LoadFromLocal ,
                defaultLocalPath:
                    @"C:\Users\User\Source\Repos\Displaying-XAML\XamlDisplayer\Demo\" ,
                defaultRemotePath:
                    "https://raw.githubusercontent.com/wongjiahau/Displaying-XAML/master/XamlDisplayer/Demo/" ,
                attributesToBeRemoved:
                  new List<string>()
                  {
                    "xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"" ,
                    "xmlns:materialDesign=\"http://materialdesigninxaml.net/winfx/xaml/themes\"" ,
                    "xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\""
                  }
            );
        }

• source determine where you want to load the XAML source file (either from local(your computer) or remote(e.g. GitHub)
• defaultLocalPath determine where the files shall be loaded by default if you set source as LoadFromLocal
• defaultRemotePath determine where the files shall be loaded by default if you set source as LoadFromRemote
• attributesToBeRemoved specifies the attributes that should be filetered out when displaying the code for each control Refer here to learn more about App_OnStartup method

3. At the place where all the pages are hosted (usually MainWindow.xaml), place in the XamlDisplayerHost

<Window x:Class="DisplayXamlDemo.MainWindow">    
        <codeDisplayer:XamlDisplayerHost x:Name="XamlDisplayerHost"/>        
</Window>

The XamlDisplayerHost is actually a Frame, so you can call the Navigate method using it.

4. For each of the page that is going to be navigated, surround all the controls with XamlDisplayerPanel

<UserControl x:Class="XamlDisplayerDemo.Page1">  
    <codeDisplayer:XamlDisplayerPanel>
        <!--All the controls here-->
    </codeDisplayer:XamlDisplayerPanel>                    
</UserControl>     

Note : The XamlDisplayerPanel can be placed on any level of depth

5. Navigate to each pages by calling Navigate method of XamlDisplayerHost

        public MainWindow() {
            InitializeComponent();
            XamlDisplayerHost.Navigate(new Page1());
        }

Actually, you can also use binding to bind its Content, because XamlDisplayerHost is inherited directly from Frame