CODEWITHSUNDEEP
wpfitemscontrolwrappanel
Vincent
Vincent

Reputation: 3304

Add border when setting wrap panel in an itemscontrol

I'm using ItemsControl, and set ItemsPanel to WrapPanel, so I can show the data in multi-columns. Now I want to add a border to each item, just like DataGrid. But the border always overlapping. So how to set each border thickness to 1.0?

I tried to set myBorder's BorderThickness to 1 0.5 1 0.5, it works. But not the best way.

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

enter image description here enter image description here

Upvotes: 2

Views: 403

Answers (1)

Denis Schaf
Denis Schaf

Reputation: 2739

Try giving them all border of one px "1,1" and a margin of "0,-1,0,0". This will make them all have a full border but they will overlap giving the impression of just a single one beeing present at the touching faces. To prevent the top part of the first element to disappear you'll also need to set the margin of the wrappanel to "0,1,0,0" Example below

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

Upvotes: 4

Related Questions