Question

所以，我有一个itemsControl，它像一个状态栏一样放在我的屏幕底部。我有自己的名为“Messenger”的usercontrol，它被添加到itemsControl中。 ItemsControl使用一个带有RightToLeft的FlowDirection的wrappanel，所以当我添加我的Messager用户控件时，它们从屏幕的右侧开始。

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

当我手动将“Messenger”用户控件添加到我的itemsControl时，例如

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

        iControl.Items.Add(m);

一切正常如预期。但是，如果我将ItemsControl itemsource属性数据绑定到某个ObservableCollection并将项添加到ObservableCollection，那么“Messenger”用户控件将显示为反转。我的意思是，textBlocks出现在右边，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>

ItemsControl绑定反转项目的外观

1 个答案: