Skip to content

Conversation

@Unrealiter
Copy link

What does the pull request do?

This pull request implements AXAML Source Information support for debug builds and adds a corresponding “Jump to Source” experience in Avalonia’s design-time and diagnostic tooling.

Concretely, it:

  • Extends the AXAML compiler to embed source metadata (file path, line, and column) into the generated output for debug builds.
  • Adds a “Jump to Source” button in the DevTools tree, and a “Jump to Source” overlay in the Designer.

Related feature request: Add AXAML Source Information and “Jump to Source” support for Debug Builds #19962.

What is the current behavior?

Currently, when working with Avalonia in design-time or diagnostics tooling:

  • There is no fast path to navigate from a visual element back to the original .axaml definition.
  • Designer and DevTools can show the visual tree, but lack reliable source mapping (file + line/column) for elements.
  • Debugging complex layouts, inspecting control hierarchies, or exploring large XAML codebases is cumbersome because developers must manually search for the corresponding XAML.

What is the updated/expected behavior with this PR?

With this PR:

  • Debug builds of AXAML views include source metadata (file path, line, and column) for each generated element.
    This is added through an attached property: Avalonia.Markup.Xaml.SourceInfo.Source.SourceInfo.
    In addition, the XAML compiler will add a XamlSourceInfoAttribute to each XAML-backed class, mapping it to the path of the corresponding XAML file.
    Source info generation can be controlled via the AvaloniaXamlCreateSourceInfo project setting, which allows you to explicitly enable or disable SourceInfo creation. If this setting is not specified, it defaults to true for Debug builds and false for non-Debug builds.

  • The Designer allows users to:

    • Select an element on the design surface.
    • Invoke “Jump to Source” to open the corresponding .axaml file at the correct line/column in the configured editor/IDE.
    • Use MouseWheel or Shift+MouseClick (up) / Ctrl+MouseClick (down) to control which element to jump to in the visual tree.
    • Disable the mouse selection highlight with a small option button.
  • The Avalonia.Diagnostics DevTools:

    • Exposes a “Jump to Source” button next to the name of each entry in the tree (similar to the WPF debug tree).
    • Navigates to the source definition for the selected visual element when triggered.
    • Handles the case where navigation is not available (for example, if no source information is present).
  • Supported backends: Visual Studio, Rider, Visual Studio Code

    • Adds a IAvaloniaSourceNavigator interface and a registry so anyone can plug in their own navigator:
public interface IAvaloniaSourceNavigator
{
    // Determines whether this navigator is able to handle navigation.
    bool CanNavigate();

    // Attempts to navigate to the specified file and position.
    Task NavigateToAsync(string filePath, int line, int column);
}

public class SourceNavigatorRegistry
{
    public static void Register(IAvaloniaSourceNavigator navigator) { ... }
}

For example, to open the XAML file in Windows Notepad, one may register the following NotepadNavigator:

class NotepadNavigator : Avalonia.Markup.Xaml.SourceInfo.IAvaloniaSourceNavigator
{
    public bool CanNavigate() => true;

    public async Task NavigateToAsync(string filePath, int line, int column)
    {
        Process.Start("C:\\Windows\\notepad.exe", filePath);
    }
}

Example in Designer:

2025-11-01.00-03-01.mp4

Example in DevTools:

2025-11-01.00-11-21.mp4

Example in Rider + MouseWheel selection at the end:

2025-11-17.17-22-43.mp4

Breaking changes

None.

Obsoletions / Deprecations

None.

Fixed issues

Fixes #19962

@avaloniaui-bot
Copy link

You can test this PR using the following package version. 12.0.999-cibuild0060100-alpha. (feed url: https://nuget-feed-all.avaloniaui.net/v3/index.json) [PRBUILDID]

@cla-avalonia
Copy link
Collaborator

cla-avalonia commented Nov 17, 2025

@kim Henrik,

Please read the following Contributor License Agreement (CLA). If you agree with the CLA, please reply with the following:

@cla-avalonia agree
Contributor License Agreement

Contribution License Agreement

This Contribution License Agreement ( “Agreement” ) is agreed to by the party signing below ( “You” ),
and conveys certain license rights to the AvaloniaUI OÜ ( “AvaloniaUI OÜ” ) for Your contributions to
AvaloniaUI OÜ open source projects. This Agreement is effective as of the latest signature date below.

1. Definitions.

“Code” means the computer software code, whether in human-readable or machine-executable form,
that is delivered by You to AvaloniaUI OÜ under this Agreement.

“Project” means any of the projects owned or managed by AvaloniaUI OÜ and offered under a license
approved by the Open Source Initiative (www.opensource.org).

“Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any
Project, including but not limited to communication on electronic mailing lists, source code control
systems, and issue tracking systems that are managed by, or on behalf of, the Project for the purpose of
discussing and improving that Project, but excluding communication that is conspicuously marked or
otherwise designated in writing by You as “Not a Submission.”

“Submission” means the Code and any other copyrightable material Submitted by You, including any
associated comments and documentation.

2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any
Project. This Agreement covers any and all Submissions that You, now or in the future (except as
described in Section 4 below), Submit to any Project.

3. Originality of Work. You represent that each of Your Submissions is entirely Your
original work. Should You wish to Submit materials that are not Your original work,
You may Submit them separately to the Project if You (a) retain all copyright and
license information that was in the materials as you received them, (b) in the
description accompanying your Submission, include the phrase "Submission
containing materials of a third party:" followed by the names of the third party and any
licenses or other restrictions of which You are aware, and (c) follow any other
instructions in the Project's written guidelines concerning Submissions.

4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else
for whom You are acting in making Your Submission, e.g. as a contractor, vendor, or agent. If Your
Submission is made in the course of Your work for an employer or Your employer has intellectual
property rights in Your Submission by contract or applicable law, You must secure permission from Your
employer to make the Submission before signing this Agreement. In that case, the term “You” in this
Agreement will refer to You and the employer collectively. If You change employers in the future and
desire to Submit additional Submissions for the new employer, then You agree to sign a new Agreement
and secure permission from the new employer before Submitting those Submissions.

5. Licenses.

a. Copyright License. You grant AvaloniaUI OÜ, and those who receive the Submission directly
or indirectly from AvaloniaUI OÜ, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable
license in the Submission to reproduce, prepare derivative works of, publicly display, publicly perform,
and distribute the Submission and such derivative works, and to sublicense any or all of the foregoing
rights to third parties.

b. Patent License. You grant AvaloniaUI OÜ, and those who receive the Submission directly or
indirectly from AvaloniaUI OÜ, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license
under Your patent claims that are necessarily infringed by the Submission or the combination of the
Submission with the Project to which it was Submitted to make, have made, use, offer to sell, sell and
import or otherwise dispose of the Submission alone or with the Project.

c. Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement.
No additional licenses or rights whatsoever (including, without limitation, any implied licenses) are
granted by implication, exhaustion, estoppel or otherwise.

6. Representations and Warranties. You represent that You are legally entitled to grant the above
licenses. You represent that each of Your Submissions is entirely Your original work (except as You may
have disclosed under Section 3 ). You represent that You have secured permission from Your employer to
make the Submission in cases where Your Submission is made in the course of Your work for Your
employer or Your employer has intellectual property rights in Your Submission by contract or applicable
law. If You are signing this Agreement on behalf of Your employer, You represent and warrant that You
have the necessary authority to bind the listed employer to the obligations contained in this Agreement.
You are not expected to provide support for Your Submission, unless You choose to do so. UNLESS
REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, AND EXCEPT FOR THE WARRANTIES
EXPRESSLY STATED IN SECTIONS 3, 4, AND 6 , THE SUBMISSION PROVIDED UNDER THIS AGREEMENT IS
PROVIDED WITHOUT WARRANTY OF ANY KIND, INCLUDING, BUT NOT LIMITED TO, ANY WARRANTY OF
NONINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.

7. Notice to AvaloniaUI OÜ. You agree to notify AvaloniaUI OÜ in writing of any facts or
circumstances of which You later become aware that would make Your representations in this
Agreement inaccurate in any respect.

8. Information about Submissions. You agree that contributions to Projects and information about
contributions may be maintained indefinitely and disclosed publicly, including Your name and other
information that You submit with Your Submission.

9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the Republic of Estonia, and
the parties consent to exclusive jurisdiction and venue in the courts sitting in Talinn,
Estonia. The parties waive all defenses of lack of personal jurisdiction and forum non-conveniens.

10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and
supersedes any and all prior agreements, understandings or communications, written or oral, between
the parties relating to the subject matter hereof. This Agreement may be assigned by AvaloniaUI OÜ.

AvaloniaUI OÜ dedicates this Contribution License Agreement to the public domain according to the Creative Commons CC0 1.

Kim Henrik doesn't seem to be a GitHub user.
Please add the emails used in your commits to your Github account accordingly.

@grokys
Copy link
Member

grokys commented Nov 18, 2025

Hi @Unrealiter - thanks for opening this PR - this is something that I have a POC for myself but I've not had time yet to open a PR.

This PR seems to add 4 separate things:

  1. XamlX changes to include SourceInfo
  2. IAvaloniaSourceNavigator infra in the Avalonia.Markup.Xaml
  3. Old VS extension previewer overlay allowing to click on elements and navigate in the source
  4. Old DevTools button to navigate to the element in the tree

Personally, I'd definitely be interested in item 1 but we'd probably want to discuss whether this repository is the correct place for 2 and 3. I think we'd be able to get 1 merged more speedily if it were separated into a separate PR. Does that sound like a good idea to you?

With regards to 1, I'll leave some comments with my thoughts in the PR for now.

Copy link
Member

@grokys grokys left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just commenting on the XAML source info part for now.

/// <summary>
/// Gets the 1-based column number in the source file where the element is defined.
/// </summary>
public int Column { get; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than the position of the element in the source file, ideally we'd be storing the span of the element in the source file. This would allow us to match elements to source in the opposite direction - that is, when the user moves the caret in the XAML file, we can highlight the relevant control in the preview.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the span strictly necessary in this case?

I’d assume that the IDE/plugin issuing a “source → element selection” query already has a parsed XML tree available (it needs that anyway for things like code completion). Given an arbitrary caret position in the file, it should be able to resolve the corresponding (or nearest) XML node start.

If the Avalonia designer exposed an API like “get all AvaloniaObjects associated with XML node starting at position X”, that should be enough to support the reverse mapping as well, without having to store explicit spans for each element.

/// This struct is typically used to store the line, column, and file path of a control or object
/// to enable navigation or diagnostics (for example, jumping to a definition in Visual Studio).
/// </remarks>
public readonly struct SourceInfo : IEquatable<SourceInfo>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/// This struct is typically used to store the line, column, and file path of a control or object
/// to enable navigation or diagnostics (for example, jumping to a definition in Visual Studio).
/// </remarks>
public readonly struct SourceInfo : IEquatable<SourceInfo>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is more me thinking aloud than anything else, but I'm not sure it's a good idea for this to be a struct? It limits what we can do with this type, and it's going to be boxed anyway if stored in an attached property.

/// </item>
/// </list>
/// </remarks>
public static class Source
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Source is quite a generic name. I'd probably prefer something more descriptive, such as MAUI's VisualDiagnostics or we might even want to consider adding it directly to the existing Design class?

/// Defines the attached <see cref="SourceInfo"/> property that stores the source location
/// information for a control.
/// </summary>
public static readonly AttachedProperty<SourceInfo> SourceInfoProperty =
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My POC also used an attached property, but I know that MAUI uses a ConditionalWeakTable so that non-BindableObject /AvaloniaObjects can also have their source tracked (I assume). I'm not sure what the use-case for this is however.

@drasticactions @jsuarezruiz I'd be interested in your thoughts here.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My main use case was mapping visual elements in the designer to the appropriate XAML location, which is why I chose AvaloniaObject. I think even most of the “non-visual” elements that one might consider for source mapping, like ControlThemes or Styles, inherit from AvaloniaObject.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By keeping the mapping in a separate store instead of an attached property, I could imagine also supporting the reverse operation (e.g., given a span in XAML, find the corresponding AvaloniaObject instances that represent that piece of source code).

/// can map a runtime type back to its originating XAML file.
/// </remarks>
[AttributeUsage(AttributeTargets.Class, Inherited = false)]
public sealed class XamlSourceInfoAttribute : Attribute
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume this is needed because:

// Add [XamlSourceInfoAttribute] to the generated class.
// Used at design time to locate the original .axaml file,
// since the runtime loader substitutes a fake file name.

This feels like a bit of a hack. Is it not possible to make the runtime loader use the correct filename?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don’t know why there is no filename.
The protocol for the designer even has a XamlFileProjectPath:

public class UpdateXamlMessage
{
     public string Xaml { get; set; }
     public string AssemblyPath { get; set; }
     public string XamlFileProjectPath { get; set; }
 }

But for me it was null in both Visual Studio and Rider.

In addition, DesignerWindowLoader.LoadDesignerWindow has:

if (xamlFileProjectPath == null)
    xamlFileProjectPath = "/Fake.xaml";
// Fabricate fake Uri
baseUri =
   new Uri($"avares://{Path.GetFileNameWithoutExtension(assemblyPath)}{xamlFileProjectPath}");

@maxkatz6
Copy link
Member

There is a problem with responsibility which process should "jump to source", from how designer changes are implemented in this PR.
In this PR, previewed app process pings IDE process directly. It is an easier approach and would work well with, for example, devtools.

But this approach will conflict with kinds of deeper integration between previewer and IDE.
For example, we had experimented before with previewer, to select specific control span from start position to end position with new VS extension. That's what also Steven mentioned.

image

For the old previewer, I think, it would make the most sense to extend Previewer protocol API by adding new message ("JumpToSourceRequested"?) and handle this message on the IDE side. You can find existing previewer API here.

@maxkatz6
Copy link
Member

maxkatz6 commented Nov 18, 2025

With old DevTools in this repository, we do not add any new features anymore, but once XAML compiler/source related changes are merged in this PR, I can update new DevTools accordingly. Such feature will be part of free community edition.

@Unrealiter
Copy link
Author

I agree that, for the designer, adding a JumpToSource action is probably the cleanest solution, though it requires changes in the VS Code, Rider, and Visual Studio (closed source) plugin implementations.

This would also probably lead to different implementations in the dev tools (for example, a CLI command in DevTools and an IDE-specific plugin command in the designer), since DevTools is not connected through the designer API, correct?
On the other hand, the IDE-specific plugin command would potentially result in a more robust and performant solution.

@Unrealiter Unrealiter changed the title Jump to source Add Source Navigation Support Across XAML, Previewer, and DevTools Dec 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area-dev-tools area-previewer area-xaml feature needs-api-review The PR adds new public APIs that should be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add AXAML Source Information and “Jump to Source” support for Debug Builds

5 participants