{"id":573,"date":"2011-04-21T05:21:00","date_gmt":"2011-04-21T05:21:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vbteam\/2011\/04\/21\/silverlight-4-firestarter-series-3-how-to-work-with-panels-xaml-and-controls-in-silverlight\/"},"modified":"2024-07-05T12:39:57","modified_gmt":"2024-07-05T19:39:57","slug":"silverlight-4-firestarter-series-3-how-to-work-with-panels-xaml-and-controls-in-silverlight","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/vbteam\/silverlight-4-firestarter-series-3-how-to-work-with-panels-xaml-and-controls-in-silverlight\/","title":{"rendered":"Silverlight 4 Firestarter Series #3: How to work with Panels, XAML, and Controls in Silverlight"},"content":{"rendered":"

I am back with details on how to work with Panels, XAML, and Controls in Silverlight. In this walkthrough, we will see how to work with Panels, XAML, and Controls to create a Data-Driven Silverlight Interface. <\/span><\/p>\n

During this walkthrough we will cover the following topics: <\/span><\/p>\n

    \n
  1. How to use the Visual Studio 2010 Silverlight Designer, Cider <\/span><\/li>\n
  2. How to work with XAML, Panels, and Controls <\/span><\/li>\n
  3. The difference between a Grid and a StackPanel <\/span><\/li>\n
  4. How to add controls and XML Namespaces <\/span><\/li>\n
  5. How to create a UserControl <\/span><\/li>\n<\/ol>\n

    Before you begin, you need to download the <\/span><\/i>offline kit<\/span><\/i><\/a> from the Firestarter Labs to use the existing applications.<\/span><\/i><\/p>\n

    To work with Panels, XAML, and Controls follow these three simple steps:<\/span><\/p>\n

    Step 1: Create a Data-Driven Interface
    Step 2: Create a Form Entry to edit the Interface Details
    Step 3: Add a Menu using the StackPanel<\/span><\/p>\n

    Step 1: Create a Data-Driven Interface<\/b><\/h3>\n

    In this step, we will see how to work with XAML, work with controls by adding a DataGrid, and work with the visual editor, known as the Cider editor, in Visual Studio. To create a Data-Driven Interface, follow these steps:<\/span><\/p>\n

      \n
    1. Open Visual Studio 2010, and from the File menu, select Open Project. The Open Project dialog box is displayed. <\/span><\/li>\n
    2. Open the following Visual Studio Solution file from the downloaded offline kit:
      “FirestarterLabs\u00003 – XAML and ControlsSourceStarting PointVB PanelsControlsLab.sln” <\/span><\/li>\n
    3. Open the MainPage.xaml page. <\/span><\/li>\n
    4. To define rows in the grid, add the following XAML code in the “LayoutRoot” grid tag: \n
      \n

      <<\/span>Grid<\/span> x<\/span>:<\/span>Name<\/span>=”LayoutRoot”<\/span> Background<\/span>=”White”><\/span><\/span><\/p>\n

           <\/span><\/span><<\/span>Grid.RowDefinitions<\/span>><\/span><\/span><\/p>\n

               <\/span><\/span><<\/span>RowDefinition<\/span> Height<\/span>=”Auto”\/><\/span><\/span><\/p>\n

               <\/span><\/span><<\/span>RowDefinition<\/span> Height<\/span>=”Auto” \/><\/span><\/span><\/p>\n

           <\/span><\/span><\/<\/span>Grid.RowDefinitions<\/span>><\/span><\/p>\n

      <\/<\/span>Grid<\/span>><\/span><\/span><\/p>\n<\/div>\n

      <\/span><\/li>\n

    5. To add an application title, add a TextBlock control to the design view. <\/span><\/li>\n
    6. Specify the row placement by using the Grid.Row attribute inside the TextBlock tag, as shown in the following XAML code: \n
      \n

      <<\/span>Grid<\/span> x<\/span>:<\/span>Name<\/span>=”LayoutRoot”<\/span> Background<\/span>=”White”><\/span><\/span><\/p>\n

          <\/span><\/span><<\/span>Grid.RowDefinitions<\/span>><\/span><\/span><\/p>\n

              <\/span><\/span><<\/span>RowDefinition<\/span> Height<\/span>=”Auto”\/><\/span><\/span><\/p>\n

              <\/span><\/span><<\/span>RowDefinition<\/span> Height<\/span>=”Auto” \/><\/span><\/span><\/p>\n

          <\/span><\/span><\/<\/span>Grid.RowDefinitions<\/span>><\/span><\/span><\/p>\n

          <\/span><<\/span>TextBlock<\/span> Height<\/span>=”Auto”<\/span> Width<\/span>=”Auto”<\/span> Grid.Row<\/span>=”0″><\/span><\/p>\n

               <\/span>Contact Details<\/span><\/p>\n

          <\/span><\/<\/span>TextBlock<\/span>><\/span><\/p>\n

      <\/<\/span>Grid<\/span>><\/span><\/p>\n<\/div>\n

      Note: The rows are indexed from the top of the panel to the bottom, beginning with zero.<\/i> <\/span><\/li>\n

    7. Drag and drop the DataGrid control from the Toolbox onto the design view below the header.
      Note: An xmlns (XML Namespace) declaration is automatically added in the XAML code. This addition is necessary if you want to use the DataGrid because it is part of the Silverlight Toolkit and not of the native runtime.<\/i> \n
      \n

      xmlns<\/span>:<\/span>sdk<\/span>=”http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\/sdk”><\/span><\/span><\/p>\n<\/div>\n

      <\/span><\/li>\n

    8. Add data to the DataGrid control. To populate the DataGrid control with the Sample Data Collection generated from the Expression Blend, add the following XAML code. By setting the Height and the Width to “Auto”, the grid dynamically resizes itself based on the size of the content:\n
      \n

      <<\/span>UserControl.Resources<\/span>><\/span><\/span><\/p>\n

             <\/span><\/span><<\/span>DataTemplate<\/span> x<\/span>:<\/span>Key<\/span>=”ImageTemplate”><\/span><\/span><\/p>\n

                    <\/span><\/span><<\/span>StackPanel<\/span>><\/span><\/span><\/p>\n

                           <\/span><\/span><<\/span>Image<\/span> Source<\/span>=”{<\/span>Binding<\/span> Image<\/span>}”<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Height<\/span>=”64″<\/span> Width<\/span>=”64″\/><\/span><\/span><\/p>\n

                    <\/span><\/span><\/<\/span>StackPanel<\/span>><\/span><\/span><\/p>\n

             <\/span><\/span><\/<\/span>DataTemplate<\/span>><\/span><\/span><\/p>\n

      <\/<\/span>UserControl.Resources<\/span>><\/span><\/span><\/p>\n

       <\/span><\/p>\n

      <<\/span>Grid<\/span> x<\/span>:<\/span>Name<\/span>=”LayoutRoot”<\/span> Background<\/span>=”White”<\/span> DataContext<\/span>=”{<\/span>Binding<\/span> Source<\/span>={<\/span>StaticResource<\/span> Contacts<\/span>}}”><\/span><\/span><\/p>\n

             <\/span><\/span><<\/span>Grid.RowDefinitions<\/span>><\/span><\/span><\/p>\n

                 <\/span><\/span><<\/span>RowDefinition<\/span> Height<\/span>=”Auto”\/><\/span><\/span><\/p>\n

                 <\/span><\/span><<\/span>RowDefinition<\/span> Height<\/span>=”Auto” \/><\/span><\/span><\/p>\n

             <\/span><\/span><\/<\/span>Grid.RowDefinitions<\/span>><\/span><\/span><\/p>\n

             <\/span><\/span><<\/span>TextBlock<\/span> Height<\/span>=”Auto”<\/span> Width<\/span>=”Auto”<\/span> Grid.Row<\/span>=”0″<\/span> FontSize<\/span>=”24″<\/span> HorizontalAlignment<\/span>=”Left”<\/span> VerticalAlignment<\/span>=”Top”<\/span> Margin<\/span>=”8,8,0,0″><\/span>Contact Details<\/span><\/<\/span>TextBlock<\/span>><\/span><\/span><\/p>\n

              <\/span><\/span><<\/span>sdk<\/span>:<\/span>DataGrid<\/span> AutoGenerateColumns<\/span>=”False”<\/span> Grid.Row<\/span>=”1″<\/span> Height<\/span>=”Auto”<\/span> <\/span><\/p>\n

                           <\/span> <\/span>Width<\/span>=”Auto”<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Margin<\/span>=”0,16,0,0″<\/span> <\/span><\/p>\n

                           <\/span> <\/span>x<\/span>:<\/span>Name<\/span>=”ContactsDataGrid”<\/span> VerticalAlignment<\/span>=”Top”<\/span> ItemsSource<\/span>=”{<\/span>Binding<\/span> Collection<\/span>}”><\/span><\/span><\/p>\n

              <\/span>      <\/span><\/span><<\/span>sdk<\/span>:<\/span>DataGrid.Columns<\/span>><\/span><\/span><\/p>\n

              <\/span>             <\/span><\/span><<\/span>sdk<\/span>:<\/span>DataGridTextColumn<\/span> Binding<\/span>=”{<\/span>Binding<\/span> Name<\/span>}”<\/span> Header<\/span>=”Name”\/><\/span><\/span><\/p>\n

              <\/span>             <\/span><\/span><<\/span>sdk<\/span>:<\/span>DataGridTemplateColumn<\/span> CellTemplate<\/span>=”{<\/span>StaticResource<\/span> ImageTemplate<\/span>}”<\/span> Header<\/span>=”Image”\/><\/span><\/span><\/p>\n

              <\/span>             <\/span><\/span><<\/span>sdk<\/span>:<\/span>DataGridTextColumn<\/span> Binding<\/span>=”{<\/span>Binding<\/span> Address<\/span>}”<\/span> Header<\/span>=”Address”\/><\/span><\/span><\/p>\n

              <\/span>             <\/span><\/span><<\/span>sdk<\/span>:<\/span>DataGridTextColumn<\/span> Binding<\/span>=”{<\/span>Binding<\/span> Email<\/span>}”<\/span> Header<\/span>=”Email”\/><\/span><\/span><\/p>\n

              <\/span>             <\/span><\/span><<\/span>sdk<\/span>:<\/span>DataGridTextColumn<\/span> Binding<\/span>=”{<\/span>Binding<\/span> PhoneNumber<\/span>}”<\/span> Header<\/span>=”PhoneNumber”\/><\/span><\/span><\/p>\n

              <\/span>             <\/span><\/span><<\/span>sdk<\/span>:<\/span>DataGridTextColumn<\/span> Binding<\/span>=”{<\/span>Binding<\/span> WebSite<\/span>}”<\/span> Header<\/span>=”WebSite”\/><\/span><\/span><\/p>\n

              <\/span>      <\/span><\/span><\/<\/span>sdk<\/span>:<\/span>DataGrid.Columns<\/span>><\/span><\/span><\/p>\n

              <\/span><\/span><\/<\/span>sdk<\/span>:<\/span>DataGrid<\/span>><\/span><\/span><\/p>\n

      <\/<\/span>Grid<\/span>><\/span><\/span><\/p>\n<\/div>\n

      <\/span><\/li>\n

    9. The user interface should look like the following:
      <\/span><\/li>\n<\/ol>\n

      Step 2: Create a Form Entry to Edit the Interface Details<\/b><\/h3>\n

      Now let’s create a form entry to edit the interface details. In this step, we will see how to create a new UserControl and create a data entry form. To create a new UserControl, follow these steps: <\/span><\/p>\n

        \n
      1. To add a new UserControl, right-click the PanelsControlsLab project, select add, and then select New Item. The Add New Item dialog box opens. <\/span><\/li>\n
      2. Browse to the “Silverlight” node, and select the “Silverlight User Control” template.
        <\/span><\/li>\n
      3. Enter the name of the UserControl as “EditContacts.xaml”, and click “Add”. <\/span><\/li>\n
      4. Create the form entries for each field in the DataGrid (Name, Image, Address, Email, Phone number, and Website). To create all the fields and edit the Text property of each field, add the following XAML code: \n
        \n

        <<\/span>TextBox<\/span> Height<\/span>=”23″<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Margin<\/span>=”12,16,0,0″<\/span> Name<\/span>=”textBox1″<\/span> VerticalAlignment<\/span>=”Top”<\/span> Width<\/span>=”348″<\/span> Text<\/span>=”Name” \/><\/span><\/span><\/p>\n

        <<\/span>TextBox<\/span> Height<\/span>=”23″<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Margin<\/span>=”12,46,0,0″<\/span> Name<\/span>=”textBox2″<\/span> VerticalAlignment<\/span>=”Top”<\/span> Width<\/span>=”348″<\/span> Text<\/span>=”Image Location”\/><\/span><\/span><\/p>\n

        <<\/span>TextBox<\/span> Height<\/span>=”23″<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Margin<\/span>=”12,74,0,0″<\/span> Name<\/span>=”textBox3″<\/span> VerticalAlignment<\/span>=”Top”<\/span> Width<\/span>=”348″<\/span> Text<\/span>=”Address”\/><\/span><\/span><\/p>\n

        <<\/span>TextBox<\/span> Height<\/span>=”23″<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Margin<\/span>=”12,104,0,0″<\/span> Name<\/span>=”textBox4″<\/span> VerticalAlignment<\/span>=”Top”<\/span> Width<\/span>=”348″<\/span> Text<\/span>=”Email”\/><\/span><\/span><\/p>\n

        <<\/span>TextBox<\/span> Height<\/span>=”23″<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Margin<\/span>=”10,134,0,0″<\/span> Name<\/span>=”textBox5″<\/span> VerticalAlignment<\/span>=”Top”<\/span> Width<\/span>=”350″<\/span> Text<\/span>=”Phone Number”\/><\/span><\/span><\/p>\n

        <<\/span>TextBox<\/span> Height<\/span>=”23″<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Margin<\/span>=”10,164,0,0″<\/span> Name<\/span>=”textBox6″<\/span> VerticalAlignment<\/span>=”Top”<\/span> Width<\/span>=”350″<\/span> Text<\/span>=”Website”\/><\/span><\/span><\/p>\n<\/div>\n


        <\/span><\/li>\n

      5. Build the project, so that the UserControl can appear in the Toolbox. <\/span><\/li>\n
      6. Open the MainPage.xaml page. <\/span><\/li>\n
      7. Open the Toolbox. You will be able to see EditContacts (PanelControlsLab) as a new control in the Toolbox.

        Note: The EditContacts (PanelControlsLab) control will not appear in the Toolbox list, if you are currently working on the EditContacts.xaml page.<\/i> <\/span><\/li>\n
      8. Drag and drop the EditContacts (PanelControlsLab) control onto the design view.
        <\/span><\/li>\n
      9. A new xmlns (XML Namespace) declaration is automatically added in the XAML code. This represents the current project, and lets the runtime know where to find the control. \n
        \n

        xmlns<\/span>:<\/span>my<\/span>=”clr-namespace:PanelsControlsLab”<\/span><\/p>\n<\/div>\n

        <\/span><\/li>\n

      10. At the top of the page, add a button to enable the user to open the Add Contact interface. To add the button, drag and drop the ToggleButton control onto the design view.
        Note: If you cannot see the ToggleButton control in the Toolbox, add it by clicking the Toolbox and clicking Choose Items from the popup menu. The Choose Items dialog box will be displayed. Select the ToogleButton checkbox and click OK. The ToogleButton control will get added to the Toolbox.<\/i>
        <\/span><\/li>\n
      11. Change the Content property of the ToggleButton control to “Add new contact”. <\/span><\/li>\n
      12. Change the Visibility property of the EditContacts (PanelControlsLab) control to “Collapsed”. The property is set to Collapsed so that the EditContacts UserControl is visible only when the ToggleButton is checked and doesn’t open by default.
        <\/span><\/li>\n
      13. Add the event handlers for the Checked and UnChecked events of the ToggleButton to hide and show the EditContacts (PanelControlsLab) control, respectively. To add the event handlers, open the Main.Page.vb page and add the following code: \n
        \n

        Namespace<\/span> PanelsControlsLab<\/span><\/p>\n

        Partial<\/span> Public<\/span> Class<\/span> MainPage<\/span><\/span><\/p>\n

               <\/span>       <\/span>Inherits<\/span> UserControl<\/span><\/p>\n

                      <\/span>Public<\/span> Sub<\/span> New<\/span>()<\/span><\/p>\n

                             <\/span>InitializeComponent()<\/span><\/p>\n

                      <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

         <\/span><\/p>\n

                      <\/span>Private<\/span> Sub<\/span> AddContactButton_Checked(ByVal<\/span> sender As<\/span> Object<\/span>, ByVal<\/span> e As<\/span> System.Windows.RoutedEventArgs)<\/span><\/p>\n

                             <\/span>Me<\/span>.AddContactPanel.Visibility = System.Windows.Visibility.Visible<\/span><\/p>\n

                      <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

         <\/span><\/p>\n

                      <\/span>Private<\/span> Sub<\/span> AddContactButton_Unchecked(ByVal<\/span> sender As<\/span> Object<\/span>, ByVal<\/span> e As<\/span> RoutedEventArgs)<\/span><\/p>\n

                             <\/span>Me<\/span>.AddContactPanel.Visibility = System.Windows.Visibility.Collapsed<\/span><\/p>\n

                      <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

               <\/span>End<\/span> Class<\/span><\/span><\/p>\n

        End<\/span> Namespace<\/span><\/span><\/p>\n<\/div>\n

        Note: There’s a shortcut to add an Event Handler. Select Checked in the Events property of the CheckBox control. Double-click the event to automatically generate the event handler (AddContactButton_Checked) for the CheckBox. Repeat this step for the UnChecked event and the AddContactButton_UnChecked event handler will be generated. In the AddContactButton_Checked handler, set the visibility of the EditContacts (PanelControlsLab) control to System.Windows.Visibility.Visible and in the AddContactButton_UnChecked handler, set it to System.Windows.Visibility.Collapsed.<\/i> <\/span><\/li>\n

      14. Open the EditContacts.xaml page. <\/span><\/li>\n
      15. Drag and drop a Button control from the Toolbox onto the design view. <\/span><\/li>\n
      16. Change the Text property of the Button control to “Add Contact”. This button will add the data entered in these fields into the DataGrid. <\/span><\/li>\n
      17. To add the border to the Edit Contacts window, add the following XAML code: \n
        \n

        <<\/span>Border<\/span> BorderThickness<\/span>=”1″<\/span> Height<\/span>=”227″<\/span> HorizontalAlignment<\/span>=”Left”<\/span> Name<\/span>=”border1″<\/span> VerticalAlignment<\/span>=”Top”<\/span> Width<\/span>=”372″><\/span><\/span><\/p>\n

         <\/span>   <\/span><\/span><<\/span>Border.BorderBrush<\/span>><\/span><\/span><\/p>\n

                <\/span><\/span><<\/span>LinearGradientBrush<\/span> EndPoint<\/span>=”1,0.5″<\/span> StartPoint<\/span>=”0,0.5″><\/span><\/span><\/p>\n

                    <\/span><\/span><<\/span>GradientStop<\/span> Color<\/span>=”Black”<\/span> Offset<\/span>=”0″ \/><\/span><\/span><\/p>\n

                    <\/span><\/span><<\/span>GradientStop<\/span> Color<\/span>=”#FF443B3B”<\/span> Offset<\/span>=”1″ \/><\/span><\/span><\/p>\n

                <\/span><\/span><\/<\/span>LinearGradientBrush<\/span>><\/span><\/span><\/p>\n

            <\/span><\/span><\/<\/span>Border.BorderBrush<\/span>><\/span><\/span><\/p>\n

        <\/<\/span>Border<\/span>><\/span><\/p>\n<\/div>\n

        <\/span><\/li>\n

      18. The user interface will look like the following:
        <\/span><\/li>\n<\/ol>\n

        Step 3: Add a Menu using the StackPanel<\/b><\/h3>\n

        Now let’s add a menu using the StackPanel. In the StackPanel, the contained elements can be organized either vertically or horizontally by changing the Orientation property appropriately. In this case, we are going to add two more menu items (edit contacts and help) along with the Add new contact button and align the StackPanel horizontally. To add the menu items, follow these steps:<\/span><\/p>\n

          \n
        1. Add a ToggleButton control for editing the contacts and a Button control for opening the help page. Place the items next to the Add new contact button. Set the margins and HorizontalAlignment of each button. <\/span><\/li>\n
        2. Create a StackPanel and move the three controls inside the panel. To create a StackPanel, add the following XAML code: \n
          \n

          <<\/span>StackPanel<\/span> HorizontalAlignment<\/span>=”Right”<\/span> Margin<\/span>=”0,8,8,11″<\/span> Orientation<\/span>=”Horizontal”><\/span><\/span><\/p>\n

                <\/span><\/span><\/span><<\/span>ToggleButton<\/span> x<\/span>:<\/span>Name<\/span>=”AddContactButton”<\/span> Content<\/span>=”Add new contact”<\/span> Checked<\/span>=”AddContactButton_Checked”<\/span> Unchecked<\/span>=”AddContactButton_Unchecked” <\/span>Height<\/span>=”24″<\/span> Margin<\/span>=”0,0,5,0″ \/><\/span><\/span><\/p>\n

                <\/span><\/span><\/span><<\/span>ToggleButton<\/span> x<\/span>:<\/span>Name<\/span>=”EditContactButton”<\/span> Content<\/span>=”Edit contact”<\/span> Checked<\/span>=”AddContactButton_Checked”<\/span> Unchecked<\/span>=”AddContactButton_Unchecked”<\/span> Height<\/span>=”24″<\/span> Margin<\/span>=”0,0,5,0″ \/><\/span><\/span><\/p>\n

               <\/span>  <\/span><\/span><<\/span>Button<\/span> x<\/span>:<\/span>Name<\/span>=”HelpButton”<\/span> Content<\/span>=”Help”\/><\/span><\/span><\/p>\n

          <\/<\/span>StackPanel<\/span>><\/span><\/p>\n<\/div>\n

          <\/span><\/li>\n

        3. The menu will look like the following:
          <\/span><\/li>\n<\/ol>\n

          Summary<\/b><\/h3>\n

          In this walkthrough, you have learned how to create a Data-Driven Silverlight Interface using Panels, XAML, and Controls . You have now successfully added a data entry form to the existing project and created a menu using the StackPanel. <\/span><\/p>\n

          You can find the full source code for the application <\/span>here<\/span><\/a>. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

          I am back with details on how to work with Panels, XAML, and Controls in Silverlight. In this walkthrough, we will see how to work with Panels, XAML, and Controls to create a Data-Driven Silverlight Interface. During this walkthrough we will cover the following topics: How to use the Visual Studio 2010 Silverlight Designer, Cider […]<\/p>\n","protected":false},"author":260,"featured_media":8818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[195],"tags":[137,138,167,177],"class_list":["post-573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-basic","tag-silverlight","tag-silverlight-4-firestarter","tag-vb2010","tag-wcf"],"acf":[],"blog_post_summary":"

          I am back with details on how to work with Panels, XAML, and Controls in Silverlight. In this walkthrough, we will see how to work with Panels, XAML, and Controls to create a Data-Driven Silverlight Interface. During this walkthrough we will cover the following topics: How to use the Visual Studio 2010 Silverlight Designer, Cider […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/users\/260"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/comments?post=573"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media\/8818"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media?parent=573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/categories?post=573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/tags?post=573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}