ItemsControl binding reversing look of items - wpf

Question

So, I have a itemsControl which is placed along the bottom of my screen like a status bar.
I have my own usercontrol called "Messenger" which are added to the itemsControl.
The ItemsControl uses a wrappanel with a FlowDirection of RightToLeft so when I add my Messager usercontrol , they start at the right hand side of the screen.
<ItemsControl x:Name="iControl" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="50" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel FlowDirection="RightToLeft" IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
The messenger looks like the following
<UserControl x:Class="Tester.Messenger"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
x:Name="myUserControl"
>
<UserControl.Resources>
<Geometry x:Key="X">M0,0 L1,1 M0,1 L1,0</Geometry>
<Style x:Key="XButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard Storyboard.TargetName="MouseOverRectangle" Storyboard.TargetProperty="Opacity">
<DoubleAnimation To="1" Duration="00:00:.2"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="path" Margin="2" Data="M0,0 L1,1 M0,1 L1,0" Stroke="LightBlue" Width="10" Height="10" Stretch="Fill"/>
<Rectangle x:Name="MouseOverRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="White" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Grid.RenderTransform>
<TranslateTransform x:Name="translate" Y="50"/>
</Grid.RenderTransform>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="translate" Storyboard.TargetProperty="Y">
<DoubleAnimationUsingKeyFrames>
<LinearDoubleKeyFrame KeyTime="00:00:00" Value="50"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="1" Springiness="9" EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle MinWidth="100" MinHeight="50" Fill="{Binding ElementName=myUserControl,Path=Fill}" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
<Button x:Name="btnClose" Grid.Column="1" VerticalAlignment="Top" Style="{StaticResource XButtonStyle}" Margin="3,3" Click="btnClose_Click"/>
<TextBlock Text="{Binding ElementName=myUserControl,Path=Header, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Foreground="LightGray" FontSize="11" Margin="3,3,0,-3"/>
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding ElementName=myUserControl,Path=Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Foreground="White" FontSize="16" Margin="3,-5"/>
</Grid>
When I add "Messenger" usercontrols to my itemsControl manually such as
essenger m = new Messenger();
m.Height = 50;
m.Width = 135;
m.Header = "Kate";
m.Message = "Download File ?";
iControl.Items.Add(m);
everything works fine as expected. But if I databind the ItemsControl itemsource property to some ObservableCollection and add items to the ObservableCollection, then the "Messenger" usercontrols appear reversed. What I mean, is that the textBlocks appear on the right and the X button is on the left. So its a mirror image. I know its probably got something to do with the wrappanel, But I can't figure it out. I hope this makes sense

Answer 1

I have the same problem in that the images in my user control are reversed. My simplified code
<UserControl x:Class="MyApp.Wpf.MainModule.Controls.ButtonImages"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModels="clr-namespace:TheAA.Road.Dispatch.Eva.App.Wpf.MainModule.ViewModels"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate x:Key="ButtonImageTemplate" DataType="{x:Type ViewModels:ButtonImageViewModel}">
<Image Source="{Binding ButtonProperty.ImageUri}" />
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<WrapPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft" >
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource ButtonImageTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</WrapPanel>
</UserControl>