c# wpf styling HierarchicalDataTemplate to represent as key value pair link

Question

I am representing a XML as a tree view in WPF. The nodes are styled using HierarchicalDataTemplate to represent the Xml Attribute and its value as below.

<HierarchicalDataTemplate DataType="Field" ItemsSource="{Binding XPath=./*}">
    <StackPanel Orientation="Horizontal" Margin="2"  >
        <Border BorderBrush="White" Background="{DynamicResource AccentColorBrush}" BorderThickness="2" CornerRadius="3" Margin="2,0,0,0">
            <TextBlock   Foreground="White"   Margin="3" Text="Field" />
        </Border>
        <Border BorderBrush="White" Background="WhiteSmoke" BorderThickness="2" CornerRadius="3" Margin="2,0,0,0">
            <TextBlock  Margin="3" Text="{Binding XPath=@FieldName}" />
        </Border>
    </StackPanel>
</HierarchicalDataTemplate>

I want them to be represented as a tag/key value pair indicated with some sort of link/equal to etc., as below image How to achieve this through xaml changes. I need some other ways than to introduce a image of "link" between the pair to show them as linked.

Answer 1

Are you looking for something like this?

If so, you can achieve using Separator.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0" BorderBrush="Black" Background="Green" BorderThickness="2" 
            CornerRadius="3" Margin="2,0,0,0">
        <TextBlock VerticalAlignment="Center" Foreground="White" Margin="10,0,10,0" Text="Field" />
    </Border>
    <Border Grid.Column="2" BorderBrush="Black" Background="LightGray" BorderThickness="2" 
            CornerRadius="3" >
        <TextBlock Margin="10,0,10,0" Text="Test1" />
    </Border>
    <Border Grid.Column="1" Margin="-6" Background="White" Height="5" CornerRadius="2">
        <Separator Background="Black" Margin="2,0,2,0"/>
    </Border>
</Grid>