Editing style of selected row in ListBox

Editing style of selected row in ListBox

• Pliers

  Hi Thomas,

  Please try the following and let me know if it worked or not:

  xmlns:System="clr-namespace:System;assembly=mscorlib"

  ....

  <DataTemplate x:Key="itemTemplate">
  <DataTemplate.Resources>
  <Storyboard x:Key="Timeline1">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextBlock">
  <DoubleAnimationUsingKeyFrames.BeginTime>
  <System:TimeSpan>00:00:00</System:TimeSpan>
  </DoubleAnimationUsingKeyFrames.BeginTime>
  <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="0" KeyTime="00:00:01"/>
  </DoubleAnimationUsingKeyFrames>
  </Storyboard>
  </DataTemplate.Resources>
  <DataTemplate.Triggers>
  <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsSelected}" Value="True">
  <DataTrigger.EnterActions>
  <BeginStoryboard Storyboard="{StaticResource Timeline1}">
  
  </BeginStoryboard>
  </DataTrigger.EnterActions>
  </DataTrigger>
  </DataTemplate.Triggers>
  
  <StackPanel x:Name="StackPanel">
  <TextBlock x:Name="TextBlock" Text="{Binding Mode=OneWay, XPath=title}"/>
  </StackPanel>
  </DataTemplate>

  I tried this and it works on the build of WPF I am working on (which will be the next release). However, if it does not work for you, then it means that the feature is busted in the Feb CTP.

  Thanks,
  -Unni

  
  
  

• Yaachiru

  Thanks for your answer. Unfortunately I still don't get it to work. I am using the Expressive Interactive Designer, march CTP, but I still have to edit the xaml-code to add and edit DataTriggers. Or is there another way

  Here is the code for my DataTemplate:

  <DataTemplate x:Key="programmeTemplate">
  <TextBlock Text="{Binding Mode=OneWay, XPath=title}" />
  
  <DataTemplate.Triggers>
  <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsSelected}" Value="True">
  <!-- <Setter Property="Background" Value="Green"/> -->
  <DataTrigger.EnterActions>
  <BeginStoryboard>
  <Storyboard Storyboard.TargetProperty="Opacity">
  <DoubleAnimation To="1" Duration="0:0:0.5" />
  </Storyboard>
  </BeginStoryboard>
  </DataTrigger.EnterActions>
  <DataTrigger.ExitActions>
  <BeginStoryboard>
  <Storyboard Storyboard.TargetProperty="Opacity">
  <DoubleAnimation To="0" Duration="0:0:0.5" />
  </Storyboard>
  </BeginStoryboard>
  </DataTrigger.ExitActions>
  </DataTrigger>
  </DataTemplate.Triggers>
  </DataTemplate>

  I had to decomment the Setter, since this gave error messages (unrecognized member name). I tried several different properties but none of them worked.

  The code above compliles, but there is no effect, nothing happens with the list objects when I select them. What's wrong

  Is it correct to have a textblock in the DataTemplate, or should it be something else

  Thanks,

  Tomas

  
  

• asmana

  You should try and use Microsoft Expression Interactive Designer - http://www.microsoft.com/expression - we make it a bit easy to do this. If all you want to do is to replace the blue highlight, you can specify an ItemContainerStyle.
  
  However, if you wanted to target elements in the DataTemplate when a ListBoxItem was selected, you need to use Data triggers.

  This should help:

  <DataTemplate.Triggers>

  <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsSelected}" Value="True">

  <Setter Property="Fill" TargetName="Rectangle1" Value="Green"/>

  <DataTrigger.EnterActions>

  <!—Your BeginStoryboard will go here a

  </DataTrigger.EnterActions>

  <DataTrigger.ExitActions>

  <!—Your BeginStoryboard will go here a

  </DataTrigger.ExitActions>

  </DataTrigger>

  </DataTemplate.Triggers>

  Thanks,
  -Unni

  
  
  

• JPBlake

  If you want to use Expression Interactive Designer, here is a short sequence of steps.

  a) Draw a ListBox
  b) Right click on the ListBox and add a couple of ListBoxItems
  c) Right click on the ListBox -> Edit Other Styles -> Edit ItemContainerStyle -> Edit a copy of the style
  d) Right click on the root of the tree in the Timeline view -> Edit Template -> Edit Template
  e) At this stage, you will see a bunch of states (represented as tabs in the Timline) that let you alter these.

  If you have more Expression Interactive Designer specific questions, please free to send them to that newsgroup: http://www.microsoft.com/communities/newsgroups/en-us/default.aspx dg=microsoft.public.expression.interactivedesigner&lang=en&cr=US

  Thanks,
  -Unni

  
  
  

• samdalil

  Nope, does not seem to work. Waiting eagerly for the next release :)
  
  /Tomas
  
  

• Rob Hounsell

  Hi Thomas,

  Yes, you are right - we don't allow you to author data triggers in Expression Interactive Designer. However, if you were to create them external to the tool, we will preserve that accurately for you.

  The reason why you can't get the Setter past the parser is that it does not have a TargetName set on it. Try assigning an x:Name to the TextBlock and then setting that as the TargetName property in the Setter.

  As to why the animation are not triggering, I tried as well but could not make it work (I was trying keyframe animation in Interactive Designer). I will go figure it out and let you know tomorrow.

  Thanks,
  -Unni

  
  
  

• sebastian&amp;#42;

  Thanks! Now everything except the animation is working.
  
  

• Russ Monckton

  I've been playing around with the ItemContainerStyle a bit as well. I manage to edit the style of the non-selected items, but not the style of the selected item. How can I do this

  I want to edit the style for the selected item both when the list has focus (default: blue background) and when it doesn't (default: light grey background).

  Can anyone give me some helpful examples

  /Tomas

  
  
• Editing style of selected row in ListBox