Item spacing in WPF ItemsControl

wpf xaml .net-4.0 itemscontrol
Denys Wessels picture Denys Wessels · Jan 7, 2014 · Viewed 17.1k times · Source

I'm displaying a List<string> collection in an ItemsControl. The problem is that there is no spacing between the list items such as TheyAreAllNextToEachOther.

How can I create some spacing between the items?

<ItemsControl Grid.Column="2" 
         Grid.ColumnSpan="2" 
         ItemsSource="{Binding Path=ShowTimes}"
         BorderThickness="0">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Answer

Rohit Vats picture Rohit Vats · Jan 7, 2014

Provide style to your ItemsControl containers (default ContentPresenter) like this where you can set Margin to say 5:

    <ItemsControl>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="FrameworkElement.Margin" Value="5"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>

Related questions

WPF Controls as StaticResource in Resource Dictionary, used in multiple WPF Windows?

I have a Button control as a resource in Resource Dictionary as below: <!--ButtonResources.xaml file--> <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Button x:…

Read More
WPF WebBrowser - How to Zoom Content?

Trying to test basic browser concepts in a WPF (C#/XAML, .NET 4.0) WebBrowser application. So far, the only problem is programatically zooming. Has anyone had any experience with this? MSDN lists nothing: http://msdn.microsoft.com/en-us/library/system.windows.…

Read More
Why can't I style a control with the Aero theme applied in WPF 4.0?

I recently converted a project from WPF 3.5 to WPF 4.0. Functionally, everything works, but the DataGrid style I was applying on top of the Aero theme has suddenly stopped working. As you can see from the before/after pictures below, my …

Read More