如何打开 itemTemplate 控件的垂直和水平边框?

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

我创建了项目模板控件并在数据模板中设置了它的边框粗细和颜色。这是我的 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 中,但相反,它的堆栈方向设置为 Horizo​​ntal。我可以在第二项控件中看到垂直边框,但没有水平边框。

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.

谢谢。

一个 WPF Border control only draws the border along its outer edges. [It is possible to turn of one or more edges by setting its BorderThickness.]

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

例如

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

首先通过这个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>