How can I turn on both vertical and horizontal borders for the itemTemplate Control?

Question

I created the item template control and set its border thickness and color in Data Template. This is my ItemTemplate code:

  <ItemsControl  x:Name="VimshottariDasha" Margin="-10,83,-124,-267" FontSize="16" Grid.ColumnSpan="3" BorderThickness="0">
                            <ItemsControl.ItemTemplate>

                                <DataTemplate>
                                    <Border BorderThickness="1" BorderBrush="DimGray">

                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition SharedSizeGroup="Col1" />
                                                <ColumnDefinition SharedSizeGroup="Col2" />
                                                <ColumnDefinition SharedSizeGroup="Col3" />
                                            </Grid.ColumnDefinitions>

                                            <Button Background="Transparent" BorderThickness="0" x:Name="DashaButton" Grid.Column="0" Content="{Binding rulerName}" Command="{Binding SelectedDasha}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}"/>
                                            <TextBlock Grid.Column="1" Text="{Binding rulerStartDate, StringFormat=dd-MMM-yyyy HH:mm:ss}"  />
                                            <TextBlock Grid.Column="2" Text="{Binding rulerEndDate, StringFormat=dd-MMM-yyyy HH:mm:ss}"/>
                                        </Grid>
                                    </Border>
                                </DataTemplate>

                            </ItemsControl.ItemTemplate>

How do I show both vertical and horizontal borders regardless of stack orientation?

The same thing happens in another itemTemplate but in reverse, whose stack orientation is set to Horizontal. I can see vertical borders in the second item Control but no Horizontal borders.

This is the current Output, it has horizontal Borders inside but no vertical ones(Stack orientation is vertical by default)

This is second ItemControl with horizontal stack orientation it is missing horizontal borders.

Thanks.

Answer 1

First go through this link to understand how to add border around TextBlock.

You can also use Label instead of TextBlock to add border.

Now look into modified code:

ItemsControl Grid.Row="0" x:Name="VimshottariDasha" Margin="10" FontSize="16" Grid.ColumnSpan="3" >
        <ItemsControl.ItemTemplate>

            <DataTemplate>
                <!--<Border BorderThickness="1" BorderBrush="DimGray">-->

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="Col1" />
                            <ColumnDefinition SharedSizeGroup="Col2" />
                            <ColumnDefinition SharedSizeGroup="Col3" />
                        </Grid.ColumnDefinitions>

                        <Button Background="Transparent" BorderThickness="1" x:Name="DashaButton" Grid.Column="0" Content="{Binding rulerName}" />
                        <Border Grid.Column="1" BorderThickness="1" BorderBrush="Blue">
                            <TextBlock   Text="{Binding rulerStartDate, StringFormat=dd-MMM-yyyy HH:mm:ss}"  />
                        </Border>
                        
                        <Label BorderThickness="1" BorderBrush="Bisque" Grid.Column="2" Content="{Binding rulerEndDate, StringFormat=dd-MMM-yyyy HH:mm:ss}"/>
                    </Grid>
                <!--</Border>-->
            </DataTemplate>

        </ItemsControl.ItemTemplate>
    </ItemsControl>