在项目控件中设置环绕面板时添加边框
Add border when setting wrap panel in an itemscontrol
我正在使用 ItemsControl
,并将 ItemsPanel
设置为 WrapPanel
,因此我可以在多列中显示数据。现在我想为每个项目添加边框,就像DataGrid
。
但边界总是重叠。那么如何设置每个边框粗细为1.0呢?
我尝试将 myBorder
的 BorderThickness
设置为 1 0.5 1 0.5
,它起作用了。但不是最好的方法。
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="myBorder" BorderBrush="Green" BorderThickness="1 1 1 0" Margin="12 0 0 0">
<StackPanel Margin="10" Orientation="Horizontal">
<TextBlock Width="20" Text="{Binding Name}"/>
<TextBox Width="100" Text="{Binding Value}"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
尝试给它们所有的 1 像素边框“1,1”和边距“0,-1,0,0”。这将使它们都有一个完整的边界,但它们会重叠,给人的印象是只有一只蜜蜂出现在接触的脸上。
为了防止第一个元素的顶部消失,您还需要将包装面板的边距设置为“0,1,0,0”
下面的例子
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="myBorder" BorderBrush="Green" BorderThickness="1,1" Margin="0,-1,0,0" Margin="12 0 0 0">
<StackPanel Margin="10" Orientation="Horizontal">
<TextBlock Width="20" Text="{Binding Name}"/>
<TextBox Width="100" Text="{Binding Value}"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" Margin="0,1,0,0"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
我正在使用 ItemsControl
,并将 ItemsPanel
设置为 WrapPanel
,因此我可以在多列中显示数据。现在我想为每个项目添加边框,就像DataGrid
。
但边界总是重叠。那么如何设置每个边框粗细为1.0呢?
我尝试将 myBorder
的 BorderThickness
设置为 1 0.5 1 0.5
,它起作用了。但不是最好的方法。
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="myBorder" BorderBrush="Green" BorderThickness="1 1 1 0" Margin="12 0 0 0">
<StackPanel Margin="10" Orientation="Horizontal">
<TextBlock Width="20" Text="{Binding Name}"/>
<TextBox Width="100" Text="{Binding Value}"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
尝试给它们所有的 1 像素边框“1,1”和边距“0,-1,0,0”。这将使它们都有一个完整的边界,但它们会重叠,给人的印象是只有一只蜜蜂出现在接触的脸上。 为了防止第一个元素的顶部消失,您还需要将包装面板的边距设置为“0,1,0,0” 下面的例子
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="myBorder" BorderBrush="Green" BorderThickness="1,1" Margin="0,-1,0,0" Margin="12 0 0 0">
<StackPanel Margin="10" Orientation="Horizontal">
<TextBlock Width="20" Text="{Binding Name}"/>
<TextBox Width="100" Text="{Binding Value}"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" Margin="0,1,0,0"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>