Coding Assistance in XAML
Most of JetBrains Rider's coding assistance features are also supported in XAML. You can find the detailed information on these features in the corresponding topics of the Coding assistance section.
In this topic, you can find some examples of using coding assistance features in XAML.
Syntax highlighting
JetBrains Rider highlights classes, fields, properties, events, and so on with different colors, so that they can be distinguished easily.
![JetBrains Rider: Syntax highlighting in XAML JetBrains Rider: Syntax highlighting in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Syntax_Highlighting.png)
You can establish a custom color scheme. For more information, refer to Colors schemes: fonts and colors of IDE text.
Color assistance
JetBrains Rider highlights color usages with corresponding color and shows additional information on the tooltip. You can also press Alt+Enter on a highlighted color usage, choose Pick color from palette and define a color using a visual palette.
![JetBrains Rider: Color assistance in XAML JetBrains Rider: Color assistance in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Highlighting__Tooltip_for_color_value.png)
Inlay hints
Inlay hints are available in XAML for markup property names and DataContext
, as well as for margins and paddings.
You can toggle the following hints for XAML on the
page of JetBrains Rider settings Ctrl+Alt+S:Implicit attribute names
This kind of hints shows implicit attribute names, for example:
![JetBrains Rider: Inlay hints in XAML for implicit attribute names JetBrains Rider: Inlay hints in XAML for implicit attribute names](https://resources.jetbrains.com.cn/help/img/rider/2024.2/inlay_hints_xaml_implicit.png)
Thickness argument
This kind of hints shows Thickness
values (in the arguments of Margin
, Padding
, and so on) to see the correspondence between arguments and values:
![JetBrains Rider: Inlay hints in XAML for margins and padding JetBrains Rider: Inlay hints in XAML for margins and padding](https://resources.jetbrains.com.cn/help/img/rider/2024.2/inlay_hints_xaml.png)
CornerRadius argument
This kind of hints shows parameter names for the CornerRadius
constructor, which is helpful when you use the constructor with 4 parameters to see which corners are TopLeft, TopRight, BottomLeft, BottomRight:
![JetBrains Rider: Inlay hints in XAML for CornerRadius arguments JetBrains Rider: Inlay hints in XAML for CornerRadius arguments](https://resources.jetbrains.com.cn/help/img/rider/2024.2/xaml_inlay_hints_cornerradius.png)
Missing Grid.Row/Column
This kind of hints shows missing Grid.Row
and Grid.Column
attributes:
![JetBrains Rider: Inlay hints in XAML for missing Grid.Row/Column attributes JetBrains Rider: Inlay hints in XAML for missing Grid.Row/Column attributes](https://resources.jetbrains.com.cn/help/img/rider/2024.2/inlay_hints_xaml_missing.png)
DataContext
This kind of hints shows DataContext
types in bindings:
![JetBrains Rider: Inlay hints in XAML for DataContext JetBrains Rider: Inlay hints in XAML for DataContext](https://resources.jetbrains.com.cn/help/img/rider/2024.2/inlay_hints_xaml_datacontext.png)
Typing assistance
JetBrains Rider provides a couple of useful features that can save your efforts on typing. So you write more code with less keystrokes.
synchronous tag editing — any change of the opening tag is simultaneously applied to the closing tag and vice versa
smart slash — as soon as you type the slash at the end of an opening tag, the tag is automatically converted to the empty one
Code completion
JetBrains Rider provides a full set of code completion features as well. So you can complete tags:
![JetBrains Rider: Code completion in XAML JetBrains Rider: Code completion in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Code_Completion_02.png)
And attributes in XAML:
![JetBrains Rider: CCode completion in XAML JetBrains Rider: CCode completion in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Code_Completion_03.png)
Moreover, JetBrains Rider suggests appropriate symbols and actions depending on the context:
![JetBrains Rider: Code completion in XAML JetBrains Rider: Code completion in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Code_Completion_01.png)
Also, you can complete closing tags. JetBrains Rider provides the list of tags that are not closed at the current caret position.
Examples of context actions
JetBrains Rider provides a set of context actions that target XAML code. You can find the full list of these actions in the Editor | Context actions | XAML page of JetBrains Rider Settings. If necessary, you can also disable some of the actions using this page.
As soon as a context action becomes available for the current caret position, JetBrains Rider displays the corresponding action indicator to the left of the caret. Sometimes however, JetBrains Rider provides several contextually available features for the current caret position. In this case, the action indicator corresponding to the action with the highest priority is shown, and all other actions only appear when you expand the action list by clicking on the action indicator or pressing Alt+Enter Context actions have the lowest priority, therefore, they often appear at the bottom of the action list.
Here are some examples of context actions for XAML:
Convert attribute to nested element
If you want to convert an attribute to a nested element, use this context action.
![JetBrains Rider: Convert attribute to nested element context action in XAML JetBrains Rider: Convert attribute to nested element context action in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Context_Actions__convert_attribute_01.png)
After applying this context action, the attribute is converted to a child tag with the same value, so that you can provide a more complex value for the property.
![JetBrains Rider: Convert attribute to nested element context action in XAML JetBrains Rider: Convert attribute to nested element context action in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Context_Actions__convert_attribute_02.png)
Convert tag to an attribute
If the value of a property is simple, there is no need to have it in a separate tag, so you can convert it to an attribute using this context action.
![JetBrains Rider: 'Convert tag to an attribute' context action in XAML JetBrains Rider: 'Convert tag to an attribute' context action in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Context_Actions__convert_tag_01.png)
After applying this context action, the tag is converted to the attribute.
![JetBrains Rider: 'Convert tag to an attribute' context action in XAML JetBrains Rider: 'Convert tag to an attribute' context action in XAML](https://resources.jetbrains.com.cn/help/img/rider/2024.2/ReSharper_by_Language__XAML__Context_Actions__convert_tag_02.png)