Convert Nested Element to Attribute/Attribute to Nested Element

• Aug 03, 2020

Purpose

Extracts an attribute from a XAML tag and makes it a child element. You can also perform the reversed operation — inline a child element as an attribute of the parent tag. This refactoring may increase readability if you have too many attributes or a too deep nesting level.

Availability

• Convert Tag to Attribute is available when the caret is on a tag that has a parent tag.
• Attribute to Nested Element is available when the caret is on an attribute.

Usage

1. Place the caret on an attribute

   Note

   The blinking cursor shows the caret’s position at which the Refactoring is available.

   XAML

   <TextBlock Width="100" Foreground="Blue">
       <TextBlock.Background│>
           <Binding Path="Foreground">
               <Binding.RelativeSource>
                   <RelativeSource Mode="Self" />
               </Binding.RelativeSource>
           </Binding>
       </TextBlock.Background>
   </TextBlock>
   

2. Press the Ctrl + . or Ctrl + ~ shortcut to invoke the Code Actions menu.
3. Select Convert Nested Element to Attribute from the menu (Convert Attribute to Nested Element if you need to extract an attribute).

After execution, the Refactoring inlines the element along with all its child elements as an attribute of the patent tag.

XAML

<TextBlock Width="100" Foreground="Blue" Background="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=Self}}">
</TextBlock>