TriggerAction on ListBoxItem custom Template

Question

Hello,

I working in a Silverlight 4 project and I just download a custom behaviour (http://gallery.expression.microsoft.com/ShowHideWithFlip) that I am trying to use.

One of the "flips" I must perform is when the user clicks on a buton I added in a custom ListBoxItem template. So In my Listbox tere will be serveral items, and every item has a button used for showing more details, that will be placed in another panel. So this button click will trigger the flipping action.

My question is how can I set the SourceName, SourceObject and EventName of the trigger on my ListBoxItem.

This is how the style is defined:

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
			<Setter Property="Padding" Value="3"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="TabNavigation" Value="Local"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<Grid Background="{TemplateBinding Background}">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="0.865*"/>
								<ColumnDefinition Width="0.135*"/>
							</Grid.ColumnDefinitions>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected">
										<Storyboard>
											<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unfocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
							<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
							<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="3,3,0,3"/>
							<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
							<Grid Grid.Column="1" >
								<Button Margin="0,1" Click="Button_Click"  BorderThickness="1">
									<i:Interaction.Triggers>
						<i:EventTrigger EventName="Click">
							<StyleGrid:ShowHideWithFlip HideElementName="ProjectsGrid" ShowElementName="PartsGrid"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
									<ed:BlockArrow Orientation="Right" Stroke="#FF6DBDD1" StrokeThickness="1" UseLayoutRounding="False"  Height="12" Width="16.205"/>
								</Button>
							</Grid>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

When I run the app and click on the button created in the list box, nothing happens...

Any toughts?

Igor.

Answer 1

Well that's a cool one, I haven't played with it yet but looks like I'm going to have to!

Anyway, luckily it's not horribly difficult, something like this should do you right (not tested);

<Button Content="FlipYourThingy">
    <interactivity:Interaction.Triggers>
        <interactivity:EventTrigger 
                EventName="Click">
            <local:ShowHideWithFlip 
                TargetName="ThingyToFlip"/>
        </interactivity:EventTrigger>
    </interactivity:Interaction.Triggers>
</Button>

These should help you quite a bit;

http://www.silverlightshow.net/items/Behaviors-and-Triggers-in-Silverlight-3.aspx

http://www.slideshare.net/EyalV/triggers-actions-behaviors-in-xaml

---

Check out the Gooroovster Windows Phone App! Also, please mark answers as helpful when used, and answered when completed.

Answer 2

Hello,

Thank you for the reply, but "TargetName" is not a valid property of the ShowHideWithFlip.

HideElementName and ShowElementName are the properties you set what will be hidden and shown when the trigger happens...

Any other toughts?

Thank you,

Igor.

---

Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

Answer 3

So can you just replace TargetName with ShowElementName?

---

Check out the Gooroovster Windows Phone App! Also, please mark answers as helpful when used, and answered when completed.

Answer 4

If you look in my code, you will see ShowElementName and HideElementName set. The thing is this is not working.

I have a feeling that ProjectsGrid and PartsGrid are not "Visible" from the style, since this controls are not part of the style, but they are panels in my windows. Do you think I should be using some kind of "ancestor" access?

Thank you,

Igor.

---

Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas