ItemsControlバインディングの逆見方

Question

私はステータスバーのように画面の下部に配置されたitemsControlを持っています。 itemsControlに追加された "Messenger"という独自のusercontrolがあります。 ItemsControlは、FlowDirectionがRightToLeftのラッパーパネルを使用しているので、Messagerのusercontrolを追加すると、画面の右側に表示されます。私は手動で、そのような期待通りすべてが正常に動作

essenger m = new Messenger(); 
     m.Height = 50; 
     m.Width = 135; 
     m.Header = "Kate"; 
     m.Message = "Download File ?"; 

     iControl.Items.Add(m); 

としての私のItemsControlに "メッセンジャー" のUserControlを追加すると

<ItemsControl x:Name="iControl" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="50" > 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel FlowDirection="RightToLeft" IsItemsHost="True" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 

メッセンジャーは、次の

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

のように見えます。しかし、もし私がいくつかのObservableCollectionにItemsControl itemsourceプロパティをデータバインドし、ObservableCollectionにアイテムを追加すると、 "Messenger"のusercontrolsが反転したように見えます。つまり、テキストブロックが右側に表示され、Xボタンが左側に表示されます。だからその鏡像。私はおそらくラッパネルと何か関係があると知っていますが、私はそれを理解できません。私はこれが意味をなすことを願っています

Answer 1

私のユーザーコントロールのイメージが逆になるという点で同じ問題があります。私の簡略化したコード

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