如何为 itemTemplate 控件打开垂直和水平边框？答案

【问题标题】：How can I turn on both vertical and horizontal borders for the itemTemplate Control?如何为 itemTemplate 控件打开垂直和水平边框？
【发布时间】：2026-01-24 14:45:02
【问题描述】：

我创建了项目模板控件并在数据模板中设置了它的边框粗细和颜色。这是我的 ItemTemplate 代码：

  <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>

无论堆栈方向如何，如何同时显示垂直和水平边框？

同样的事情发生在另一个 itemTemplate 中，但相反，它的堆栈方向设置为水平。我可以在第二项 Control 中看到垂直边框，但没有看到水平边框。

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.

谢谢。

【问题讨论】：

您真的希望在 Button 和两个 TextBlock 控件之间看到边框吗？
嗯..是的..有可能..不是吗？

标签： wpf xaml border itemscontrol

【解决方案1】：

首先通过这个link to understand how to add border around TextBlock。

你也可以用Label代替TextBlock来添加边框。

现在查看修改后的代码：

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>

【讨论】：

感谢安萨里。我将两个 textBlock 都更改为标签，并将它们的边框设置为以水平内容对齐为中心。效果很好。正是我需要的。再次感谢

【解决方案2】：

WPF Border 控件仅沿其外边缘绘制边框。 [可以通过设置其BorderThickness来翻转一条或多条边。]

如果要在各个控件之间创建边框线，要么必须使用多个边框元素，要么自己手动绘制内部线条。

例如

<Border HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="Green" BorderThickness="2" >
    <Grid Height="24" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Text="Column 1" VerticalAlignment="Center" />
        <TextBlock Grid.Column="2" Text="Column 2" VerticalAlignment="Center" />
        <TextBlock Grid.Column="4" Text="Column 3" VerticalAlignment="Center" />

        <Path Stroke="Red" StrokeThickness="1" Data="M 0,0 M 2,2 M 1,0 L 1,2" Stretch="Fill" Grid.Column="1" />
        <Path Stroke="Red" StrokeThickness="1" Data="M 0,0 M 2,2 M 1,0 L 1,2" Stretch="Fill" Grid.Column="3" />
    </Grid>
</Border>

【讨论】：