ItemsControl привязка реверсивный вид предметов - PullRequest
Новая
       23

ItemsControl привязка реверсивный вид предметов

0 голосов
/ 30 декабря 2011

Итак, у меня есть itemsControl, который расположен вдоль нижней части моего экрана, как строка состояния. У меня есть свой собственный usercontrol под названием «Messenger», который добавляется в itemsControl. ItemsControl использует обертку с FlowDirection RightToLeft, поэтому, когда я добавляю свой пользовательский контроль 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" отображаются в обратном порядке. Я имею в виду, что текстовые блоки отображаются справа, а кнопка X - слева. Так что это зеркальное отражение. Я знаю, что, возможно, это как-то связано с оберткой, но я не могу этого понять. Я надеюсь, что это имеет смысл

1 Ответ

2 голосов
/ 01 августа 2012

У меня та же проблема, что изображения в моем пользовательском элементе управления меняются местами. Мой упрощенный код 

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