Question

enter image description here

请看一下上面的图片。

我希望我的xaml页面背景如此。每一行都应该有边框。我已经使用itemControl实现了目标并转储了一个虚拟列表。虽然我得到了我想要的东西，但它看起来多余，所以我试图看看是否有更好的方法。请不要建议我创建一个看起来像这样的图像并将其用作背景。

以下是我的所作所为：

<ItemControl DataContext="{Binding [someViewmodel]}" BorderThickness="0,0,1,0" BorderBrush="#E6E6E6"
    ItemSource="{Binding DummyList}">
    <ItemsControl.ItemTempalte>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="#E6E6E6" Background="White">
                <StackPanel Height="50">
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemControl>

在我的viewmodel中：

for(int i=0;i<10;i++)
{
     Object haha = new Object();
     this.DummyList.add(haha);
}

Answer 1

再次编辑：如果它只是一个背景，你可以根据屏幕的高度添加线条，并为代码隐藏中的每个x像素添加一条线。如果你想在线上使用像你一样使用你选择的项控件的数据模板。当然，为此创建自己的控件，这样你就不会破坏页面的代码隐藏:)

如果您可以使用图像，请使用矢量图像，这样线条既美观又清晰，背景透明。将图像裁剪为屏幕尺寸，裁剪溢出，或将图像放置在ViewBox中，然后将其拉伸到屏幕大小。有很多选择，这取决于你和你需要什么。

编辑： Anoyher的方法是手动绘制线条（如果使用网格）。摘要这是你自己的控制

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
   </Grid.RowDefinitions>
    <Line Grid.Row="1" X1="0" Y1="0" X2="1" Y2="0" Stroke="DarkSlateBlue" StrokeThickness="3" Stretch="Uniform" VerticalAlignment="Top"/>
    <Line Grid.Row="2" X1="0" Y1="0" X2="1" Y2="0" Stroke="DarkSlateBlue" StrokeThickness="3" Stretch="Uniform" VerticalAlignment="Top"/>
    <Line Grid.Row="3" X1="0" Y1="0" X2="1" Y2="0" Stroke="DarkSlateBlue" StrokeThickness="3" Stretch="Uniform" VerticalAlignment="Top"/>
</Grid>

enter image description here

我假设您要使用网格，因为您说过行？以下是如何使用网格，简单设置ShowGridLines为true。（注意虚线）

代码

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
   </Grid.RowDefinitions>
</Grid>

图像： enter image description here

Answer 2

您需要做的就是不绘制Border的所有四个方面。您可以通过调整Border.BorderThickness property来实现。试试这个：

<ItemControl DataContext="{Binding [someViewmodel]}" BorderThickness="0,0,1,0" 
    BorderBrush="#E6E6E6"
    ItemSource="{Binding DummyList}">
    <ItemsControl.ItemTempalte>
        <DataTemplate>
            <Border BorderThickness="0,0,0,1" BorderBrush="#E6E6E6" Background="White">
                <StackPanel Height="50">
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemControl>

如果您希望行进一步扩展，只需将一些空项添加到数据绑定集合中。

如果我误解了您的问题（很可能因为您的问题不明确），那么请让我知道详细信息 ... 它看起来多余，所以我试图看到如果有更好的方法 非常具有描述性，将帮助任何人了解您的问题。

即使没有数据，如何创建每行都有边框的背景？

2 个答案: