ItemsControl binding reversing look of items

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>