2012-07-02 2 views
0

У меня есть ItemControl с ItemTemplate, привязанным к элементу данных. ItemTemplate довольно сложный, и я добавил к нему какое-то визуальное состояние, чтобы я мог изменить его внешний вид.Настройка VisualState на ItemsControl item Шаблоны

Я хочу иметь возможность переключать все элементы VisualState в другое состояние по своему выбору в случае, которое происходит вне элемента ItemsControl.

Как я могу это сделать? Я попытался использовать VisualStateManager.SetState, но это зависит от элемента управления, а не от шаблона, который, кажется, все, что я могу получить через WaveItems.ItemContainerGenerator.ContainerFromIndex (i).

С уважением

Тристан

Edit:

Вот мой шаблон данных для отдельных элементов. Если вы заметили триггеры, которые я установил, он обрабатывает MouseEnter/MouseLeave самого шаблона. Я хотел бы связать их с ItemControl MouseEnter/MouseLeave, не набирая никакого кода. Есть ли способ сделать это?

<DataTemplate x:Key="LineTemplate"> 
    <Grid x:Name="LineGrid" HorizontalAlignment="Left" Height="500" VerticalAlignment="Center" Width="3"> 

     <VisualStateManager.CustomVisualStateManager> 
      <ei:ExtendedVisualStateManager/> 
     </VisualStateManager.CustomVisualStateManager> 

     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="VisualStateGroup"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Expanded"> 
        <Storyboard> 
         <DoubleAnimation Duration="0:0:1" By="-100" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineTop"/> 
         <DoubleAnimation Duration="0:0:1" By="100" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineBottom"/> 
         <DoubleAnimation Duration="0:0:1" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/> 
         <DoubleAnimation Duration="0:0:1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Normal"> 
        <Storyboard> 
         <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/> 
         <DoubleAnimation Duration="0:0:1" To="{Binding BottomValue}" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/> 
         <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/> 
         <DoubleAnimation Duration="0:0:1" To="0.495" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="ExpandedHighlight"/> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <i:Interaction.Triggers> 
      <i:EventTrigger EventName="MouseEnter" > 
       <ei:GoToStateAction x:Name="Expand" StateName="Expanded"/> 
      </i:EventTrigger> 
      <i:EventTrigger EventName="MouseLeave"> 
       <ei:GoToStateAction x:Name="Collapse" StateName="Normal"/> 
      </i:EventTrigger> 
     </i:Interaction.Triggers> 

     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 

     <Line Grid.Row="0" x:Name="lineTop" VerticalAlignment="Bottom" StrokeThickness="3" Stroke="{Binding Brush}" Y1="{Binding TopValue}" Y2="0" RenderTransformOrigin="0.5,0.5"> 
      <Line.RenderTransform> 
       <CompositeTransform ScaleY="1"/> 
      </Line.RenderTransform> 
     </Line> 

     <Line Grid.Row="1" x:Name="lineBottom" VerticalAlignment="Top" StrokeThickness="3" Stroke="{Binding Brush}" Y1="0" Y2="{Binding BottomValue}" RenderTransformOrigin="0.5,0.5" Opacity="0.5"> 
      <Line.RenderTransform> 
       <CompositeTransform ScaleY="1"/> 
      </Line.RenderTransform> 
     </Line> 
    </Grid> 
</DataTemplate> 

Я также попытался использовать следующие привязки: SourceObject = "{Binding RelativeSource = {RelativeSource FindAncestor, AncestorType = {х: Тип ItemsControl}}}"

Но это выводит сообщение: " Тип не поддерживается в проекте silverlight ».

+1

Вы бы лучше предоставить некоторый код. – HichemSeeSharp

ответ

0

В Thomas Danemar's Blog приведен пример класса для удержания и переключения VisualState. Он реализуется путем привязки VisualState к прикрепленному свойству внутри вашего ViewModel, и они просто устанавливают его в желаемое значение. Вы можете даже связать его TwoWay режиме.

+0

Хорошо, похоже, что это сработает, но это далеко не идеальное, так как я действительно не хочу напрямую обращаться к элементам. Я надеялся использовать событие туннелирования, связанное с триггером. – Tristan

+0

Сообщение в блоге, похоже, сосредоточено на реализации этого для UserControl. У меня просто шаблон. – Tristan

0

Исправлено:

  <i:Interaction.Triggers> 
      <i:EventTrigger 
       SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}" 
       EventName="MouseEnter"> 
       <ei:GoToStateAction x:Name="Expand" StateName="Expanded"/> 
      </i:EventTrigger> 
      <i:EventTrigger 
       SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}" 
       EventName="MouseLeave"> 
       <ei:GoToStateAction x:Name="Collapse" StateName="Normal"/> 
      </i:EventTrigger> 
     </i:Interaction.Triggers> 
Смежные вопросы