WPF Different item's margin on ItemsControl

Question

I have the following ItemsControl:

<ItemsControl x:Name="ListResult">
   <ItemsControl.ItemTemplate>
      <DataTemplate>
         <DockPanel>
            <Image Margin="10,0,0,0"
                   Source="{Binding Pic}"/>
            <TextBlock Text={Binding Info}/>
         </DockPanel>
      </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>

I bind the ItemsControl's ItemsSource to a List<>.

Is it possible to put a different margin for each item?

For example:

ListResult[0].Margin="10,0,0,0";
ListResult[1].Margin="50,0,0,0";
ListResult[2].Margin="10,0,0,0";
ListResult[3].Margin="50,0,0,0";

score 3 · Accepted Answer · edited May 23 '17 at 11:47

If you mean to alternate between lines : from : WPF: Alternating colors on a ItemsControl? I changed @biju commant to Margin

<ItemsControl ItemsSource="{Binding ListResult}" AlternationCount="2">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <Image x:Name="image" Source="{Binding Pic}"/>
                <TextBlock Text="{Binding Info}"/>
            </DockPanel>
            <DataTemplate.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                    <Setter Property="Margin" Value="10,0,0,0" TargetName="image"/>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Margin" Value="50,0,0,0" TargetName="image"/>
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Reyn need to set different margins for each item, not for items by alteration index! — EugenSoft, Dec 16 '12 at 12:09
thats why i said if he mean alternate (i did not voted not useful) — ZSH, Dec 16 '12 at 12:21

score -1 · Answer 2 · edited May 17 '13 at 04:47

Yes, you can set margins in your List's elements like:

ListResult[0].Margin = new Thickness(10, 0, 0, 0); // etc... for rest of elements

And then your XAML code needs to be like:

<ItemsControl x:Name="ListResult">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <Image Margin="{Binding Margin}"
                       Source="{Binding Pic}"/>
                <TextBlock Text={Binding Info}/>
           </DockPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

WPF Different item's margin on ItemsControl

2 Answers2