Storyboard in DataTemplate - wpf

I have a ToggleButton that open a popup, and have a ItemsControl in Popup.
I want to hide popup when click on items in items control.
<ToggleButton Content="?????" x:Name="LeaveButton" Style="{StaticResource ToggleButtonImageStyle}" Padding="13"/>
<Popup
KeyDown="UIElement_OnKeyDown"
Opened="SubMenuPopup_OnOpened"
IsOpen="{Binding IsChecked, ElementName=LeaveButton}"
StaysOpen="False"
x:Name="LeavePopup"
AllowsTransparency="True"
PopupAnimation="Fade"
PlacementTarget="{Binding ElementName=LeaveButton}"
Placement="Right">
<StackPanel Orientation="Horizontal" Margin="15">
<Polygon Points="15 15,0 30,15 45" Fill="{DynamicResource HeaderBackgroundBrush}" />
<StackPanel Width="250">
<ItemsControl ItemsSource="{Binding WorkshopList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Content="{Binding Name}"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.LeaveCommand}"
CommandParameter="{Binding Id}"
Style="{StaticResource ButtonImageTextStyle}"
Padding="20">
<Button.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click">
<BeginStoryboard Storyboard="{StaticResource HideLeavePopup}" />
</EventTrigger>
</Button.Triggers>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</Popup>
and set a story for this.
<Storyboard x:Key="HideLeavePopup" Storyboard.TargetName="LeaveButton" Storyboard.TargetProperty="IsOpen">
<BooleanAnimationUsingKeyFrames>
<DiscreteBooleanKeyFrame KeyTime="00:00:00.1" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
but when I use this, I get following error
LeaveButton name can not be found in the name scope of type 'System.Windows.Control.Button'

Did you try this?
Inside of your storyboard, Instead of
Storyboard.TargetName="LeaveButton"
use
Storyboard.Target="{Binding ElementName=LeaveButton}"

It depends where Storyboard is defined so I'll assume it's in Window.Resources or something alike. You use TargetName as LeaveButton and TargetProperty as IsOpen. You want either LeaveButton and IsChecked or LeavePopup and IsOpen. Also try changing TargetName to Target and use binding:
<Storyboard x:Key="HideLeavePopup"
Storyboard.Target="{Binding ElementName=LeaveButton}"
Storyboard.TargetProperty="IsChecked">
<BooleanAnimationUsingKeyFrames>
<DiscreteBooleanKeyFrame KeyTime="00:00:00.1" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>

Related

WPF Popup in a DataGrid only closes when clicking on the datagrid header but not when clicking elsewhere

I'm working on a WPF User Interface. I have a Popup in a DataGrid which is opened on the "MouseLeftButtonDown" event of a TextBlock and asks if the user is sure to delete the row. Until then it all works fine.
The problem is that the Popup only closes if I click on the header row of the datagrid. If I click elsewhere the popup does not close. The Property "StaysOpen" is already set false.
If I use the same XAML Code outside a Datagrid everything works fine.
How can I achieve that the popup closes?
btw I'm using MVVM pattern, so it would be great if solution is integrated in XAML Code.
My XAML Code:
<UserControl.Resources>
<ResourceDictionary>
<Storyboard
x:Key="OpenDeleteReadingPopup"
BeginTime="0:0:0">
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="DeleteReadingChoicesPopup"
Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame
KeyTime="00:00:00"
Value="true" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</UserControl.Resources>
<StackPanel x:Name="OuterElement">
<toolkit:DataGrid
ItemsSource="{Binding Readings}"
SelectedItem="{Binding SelectedReading}"
IsReadOnly="False">
<toolkit:DataGrid.Columns>
<!-- other column-->
<toolkit:DataGridTemplateColumn>
<toolkit:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<TextBlock
x:Name="DeleteReadingTextBlock"
Margin="0 1 0 0"
FontFamily="Marlett"
Text="r"
HorizontalAlignment="Right"
VerticalAlignment="Stretch">
<TextBlock.Triggers>
<EventTrigger
RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard
Storyboard="{StaticResource OpenDeleteReadingPopup}" />
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
<Popup
AllowsTransparency="True"
x:Name="DeleteReadingChoicesPopup"
StaysOpen="False"
Placement="Top"
PlacementTarget="{Binding ElementName=DeleteReadingTextBlock}">
<StackPanel
Background="{DynamicResource WindowBackgroundColorBrush}"
HorizontalAlignment="Center">
<Button
x:Name="Button"
cal:Action.TargetWithoutContext="{Binding ElementName=OuterElement, Path=DataContext}"
Style="{DynamicResource DeleteButtonStyle}"
cal:Message.Attach="DeleteReading($dataContext)"
Content="{lex:Loc Sure}"/>
</StackPanel>
</Popup>
</StackPanel>
</DataTemplate>
</toolkit:DataGridTemplateColumn.CellTemplate>
</toolkit:DataGridTemplateColumn>
</toolkit:DataGrid.Columns>
</toolkit:DataGrid>
</StackPanel>

Focusing Listbox item when a control is clicked inside datatemplate

I have a button and on click of button a popup opens up which has a listbox. The items inside the listbox is templated and the template contains a date picker and 2 textboxes to enter date, the hour and minute.
The issue I'm facing with this is this - what ever I do on my datepicker or textboxes, the listbox item does't get focus unless I somehow explicitly click on the spaces btw the controls. Question is-how do i set the listbox item to be the selected item when any of the controls inside the datatemplate is clicked/focused? Please note that I follow MVVM.
Code:
ListBox:
<ListBox x:Name="AsOfList" SelectedItem="{Binding SelectedAsOfDate}" ItemsSource="{Binding Path=AsOfDates}"/>
DataTemplate:
<DataTemplate DataType="{x:Type Domain:UserDefinedDate}">
<DatePicker DockPanel.Dock="Left" Name="AsOfDate" Width="115" SelectedDate="{Binding SelectedDate,
UpdateSourceTrigger=PropertyChanged}" SelectedDateFormat="Short" FirstDayOfWeek="Monday" />
</DataTemplate>
Button:
<Button Grid.Row="1" Grid.Column="1" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center" Name="SelectedDate" Click="SelectedDate_Click"
ToolTip="{Binding Path=AsOfDateViewModel.ToolTip}">
<Button.Content>
<DockPanel>
<TextBlock Text="{Binding Path=AsOfDateViewModel.DisplayText}" />
<Image Height="10" Width="10" Source="Down.png" />
</DockPanel>
</Button.Content>
</Button>
Popup:
<Popup x:Name="DateSelectorPopUp" PlacementTarget="{Binding ElementName=SelectedDate}" StaysOpen="False"
IsOpen="{Binding Path=AsOfDateViewModel.IsOpen}" >
<Views:AsOfDateSelector Width="Auto" DataContext="{Binding Path=AsOfDateViewModel}"/>
</Popup>
You can start BooleanAnimationUsingKeyFrames animation to set IsSelected when GotKeyboardFocus is triggered on ListBoxItem:
<ListBox x:Name="AsOfList" SelectedItem="{Binding SelectedAsOfDate}" ItemsSource="{Binding Path=AsOfDates}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<EventTrigger RoutedEvent="GotKeyboardFocus">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsSelected">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
</ListBox.ItemTemplate>
</ListBox>

Close popup from child button's press?

I have a Popup that contains a "close" button. The popup is opened by a toggle button (its IsOpen property is bound to a ToggleButton as provided by this answer). How can I close the popup when the button is pressed? This is my XAML:
<Canvas x:Name="LayoutRoot">
<ToggleButton x:Name="ToggleButton"
Style="{DynamicResource ToggleButtonStyle}" Height="51" Canvas.Left="2.999" Width="50.333" IsHitTestVisible="{Binding ElementName=Popup, Path=IsOpen, Mode=OneWay, Converter={StaticResource BoolInverter}}"/>
<Popup x:Name="Popup" IsOpen="{Binding IsChecked, ElementName=ToggleButton}" StaysOpen="False" AllowsTransparency="True">
<Canvas Height="550" Width="550">
<Grid Height="500" Width="500" Canvas.Left="25" Canvas.Top="25" d:LayoutOverrides="Width, Height, Margin">
<Grid.Effect>
<DropShadowEffect BlurRadius="15" ShadowDepth="0"/>
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition Height="0.132*"/>
<RowDefinition Height="0.868*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="Background" Fill="#FFF4F4F5" Margin="0" Stroke="Black" RadiusX="6" RadiusY="6" Grid.RowSpan="2"/>
<Border x:Name="TitleBar" BorderThickness="1" Height="70" VerticalAlignment="Top" Margin="0,0.5,0,0" CornerRadius="5">
<DockPanel>
<TextBlock TextWrapping="Wrap" Text="FOOBAR POPUP TITLE" FontSize="24" FontFamily="Arial Narrow" Margin="17,0,0,0" d:LayoutOverrides="Height" VerticalAlignment="Center" FontWeight="Bold"/>
<Button x:Name="CloseButton" Content="Button" VerticalAlignment="Center" DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="0,0,13,0" Style="{DynamicResource CloseButtonStyle}"/>
</DockPanel>
</Border>
<Border BorderThickness="1" Height="413" Grid.Row="1" Background="#FF2F2F2F" Margin="12">
<Rectangle Fill="#FFF4F4F5" RadiusY="6" RadiusX="6" Stroke="Black" Margin="12"/>
</Border>
</Grid>
</Canvas>
</Popup>
</Canvas>
A better approach than code behind is to use an event trigger on the button click event:
<Button>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="ToggleButton">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Disclaimer: I haven't run this code through VS so it might have a typo or 2
Other answers didn't work for me, because I was using a DataTemplate for the buttons inside the popup. After lot's of searching I found that I should use Storyboard.Target instead of Storyboard.TargetName. Otherwise the x:Name was not found and there was some namespace exception.
<ToggleButton x:Name="MyToggleButtonName" Content="{Binding MyToggleButtonString}"/>
And later inside the Popup that has a ListBox which is populated from some ItemsSource:
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name, Mode=OneWay}"
Command="{StaticResource MyCommandThatTakesAParameter}"
CommandParameter="{Binding Name}">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsChecked" Storyboard.Target="{Binding ElementName=MyToggleButtonName}">
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
This way it is possible to get a somewhat working ComboBox which can execute commands with the buttons inside it. (A normal ComboBox can't launch commands for some odd reason.)
One way of doing it is to add event handler for your CloseButton:
<Button x:Name="CloseButton" Click="OnButtonClick" Content="Button" VerticalAlignment="Center" DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="0,0,13,0" Style="{DynamicResource CloseButtonStyle}"/>
And in OnButtonClick event handler set state of your
TuggleButton.IsChecked = false;
I have't tested code in VS, so there might be some typos

Items collection must be empty before using ItemsSource in Silverlight

Inside custom control I'm trying to bind my ItemsControl.ItemsSource and get error. Here is how template looks:
<Style TargetType="controls:IdattFilterBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:IdattFilterBox">
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
<ItemsControl x:Name="PART_ItemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Caption}" />
<ComboBox Grid.Column="1">
<ComboBoxItem Content="Contains" />
<ComboBoxItem Content="Begins with" />
<ComboBoxItem Content="Ends with" />
</ComboBox>
<TextBox Grid.Column="2" Text="{Binding FieldFilter1, Mode=TwoWay}" />
<TextBox Grid.Column="3" Text="{Binding FieldFilter2, Mode=TwoWay}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<Border Grid.ColumnSpan="2" x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12">
<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="1,3,0,0"/>
<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="1,3,0,0"/>
</Grid>
</Border>
</ItemsControl>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In code I' trying to set this PART's ItemSource:
this.WrapperItemsControl.ItemsSource = filterData;
On this line I get error(error message in subject). Why can't I set ItemsSource and what this error means? I want controls in DataTemplate to bind to objects that stored in filterData.
EDIT:
PART_ItemsControl is what my WrapperItemsControl
this.WrapperItemsControl = GetTemplateChild(PartItemsControl) as ItemsControl;
EDIT2:
Screenshot showing that there is one item (Border?) Where does it come from?!
EDIT3
DOH! I placed validation border in a wrong spot
You can't use ItemsSource if you manually add items to your ItemsControl. For example, you would get an error if you tried this:
<ItemsControl ItemsSource="{Binding MyItems}">
<ListBoxItem>Item1</ListBoxItem>
<ListBoxItem>Item2</ListBoxItem>
</ItemsControl>
You may think you're not doing that, but you actually are. You're adding a single item to your ItemsControl, and that item is of type DataTemplate. Look:
<ItemsControl ...>
<DataTemplate ... />
That syntax means "create a DataTemplate and add it to the ItemsControl's Items property". (Items is the default property for ItemsControl, so any elements you nest under ItemsControl, if you don't otherwise specify, get added to Items.)
I think you intended to assign that DataTemplate to the ItemsControl's ItemTemplate property, rather than adding it to Items. Try this instead:
<ItemsControl ...>
<ItemsControl.ItemTemplate>
<DataTemplate ... />
</ItemsControl.ItemTemplate>
</ItemsControl>

How to make a listboxitem expand on selection?

I have a situation where I want the user to make choices in a certain order (first I want the user to select the database, then I want him to tell me his credentials).
To do this I have challenged myself with the task of making a listbox that expands the item on selection.
To make it expand is not difficult (something like
Visibility="{Binding Path=IsSelected
, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}
, Converter={StaticResource VisibilityOfBool}
, ConverterParameter=False}"
will do the trick).
The problem is that the transition is instantaneous; it is hard for the user to see what happened. What I should like to do is an animated expansion of the hidden panel...
Here is a page to demonstrate what I mean:
<Page
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"
xmlns:system="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="SlidingExpansionOnSelected">
<!--x:Class="TorsSandBox.Pages.SlidingExpansionOnSelected"-->
<Page.Resources>
<DataTemplate x:Key="daItemTemplate">
<StackPanel Margin="10">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="ListBoxItem.Selected">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="daTransform"
Storyboard.TargetProperty="ScaleY"
To="1.0" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Unselected">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="daTransform"
Storyboard.TargetProperty="ScaleY"
To="0" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<TextBlock x:Name="Header" Text="{Binding}"/>
<Border x:Name="daBorder"
BorderThickness="3" BorderBrush="DarkOrange" CornerRadius="5"
HorizontalAlignment="Stretch"
Margin="20 10 10 10"
MinHeight="100"
>
<Border.LayoutTransform>
<ScaleTransform x:Name="daTransform" ScaleX="1" ScaleY="0"/>
</Border.LayoutTransform>
<TextBlock Text="Hide this until selected"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</StackPanel>
</DataTemplate>
</Page.Resources>
<ListBox
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource daItemTemplate}"
>
<system:String>First row</system:String>
<system:String>Second row</system:String>
<system:String>Third row</system:String>
<system:String>Last row</system:String>
</ListBox>
</Page>
The triggers doesn't work, but that's because I can't make them fire...Anybody knows how to make this happen?
Regards
Tor Thorbergsen
This stuff is way too complicated...
What's wrong with your approach is that the animation only affects elements lower on the VisualTree, that means the container is not affected as far as i know.
Specifying the property path in animations is a major pain, i say. I could not access the border inside the StackPanel because its Children property is not a dependency property and the whole syntax is rather unusual.
Anyway, here's a hacky solution, that works:
<Style TargetType="ListBoxItem">
<Style.Resources>
<Storyboard x:Key="OnSelected1"/>
</Style.Resources>
<Setter Property="Tag">
<Setter.Value>
<sys:Double>0</sys:Double>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel x:Name="stackPanel" Margin="10">
<TextBlock x:Name="Header" Text="{Binding}"/>
<Border x:Name="daBorder"
BorderThickness="3" BorderBrush="DarkOrange" CornerRadius="5"
HorizontalAlignment="Stretch"
Margin="20 10 10 10"
MinHeight="100">
<Border.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=Tag}"/>
</Border.LayoutTransform>
<TextBlock Text="Hide this until selected" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="ListBoxItem.Selected">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(ListBoxItem.Tag)"
Storyboard.TargetName="{x:Null}"
To="1.0" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard Storyboard="{StaticResource OnSelected1}"/>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Unselected">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(ListBoxItem.Tag)"
Storyboard.TargetName="{x:Null}"
To="0" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
I've tried to extract the ScaleTransform and reference it both in the animation and in the Border but that did not work for whatever reason.
EDIT:
Ok, I've figure it out. I've created an attached property for this (instead of using Tag).
public static class ListBoxHelper
{
public static readonly DependencyProperty ScaleYAnimationProperty =
DependencyProperty.RegisterAttached("ScaleYAnimation", typeof(double), typeof(ListBoxHelper), new FrameworkPropertyMetadata(0d));
public static double GetScaleYAnimation(UIElement element)
{
return (double)element.GetValue(ScaleYAnimationProperty);
}
public static void SetScaleYAnimation(UIElement element, double value)
{
element.SetValue(ScaleYAnimationProperty, value);
}
}
<ListBox ItemsSource="{Binding Contacts}" HorizontalContentAlignment="Stretch">
<ListBox.Resources>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="controls:ListBoxHelper.ScaleYAnimation" Value="0"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<controls:CircleContentControl Grid.Column="0" Width="40" Height="40">
<Image Source="{Binding Image}"/>
</controls:CircleContentControl>
<TextBlock Text="{Binding FullName}" Grid.Column="1" Margin="10,0,5,0" VerticalAlignment="Center"/>
<TextBlock Text="{Binding PhoneNumber}" Grid.Column="2" VerticalAlignment="Center" FontStyle="Italic">
<TextBlock.LayoutTransform>
<ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
</TextBlock.LayoutTransform>
</TextBlock>
<StackPanel Orientation="Horizontal" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button cal:Message.Attach="Call($dataContext)" Width="30" Height="30" Style="{StaticResource ContactDialButtonStyle}">
<Rectangle Width="10" Height="10" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_phone}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</StackPanel>
</Grid>
<Border x:Name="daBorder"
BorderThickness="3" BorderBrush="DarkOrange" CornerRadius="5"
HorizontalAlignment="Stretch"
Margin="20 10 10 10"
MinHeight="100">
<Border.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=(controls:ListBoxHelper.ScaleYAnimation)}"/>
</Border.LayoutTransform>
<TextBlock Text="Hide this until selected" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="ListBoxItem.Selected">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(controls:ListBoxHelper.ScaleYAnimation)"
Storyboard.TargetName="{x:Null}"
To="1.0" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Unselected">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(controls:ListBoxHelper.ScaleYAnimation)"
Storyboard.TargetName="{x:Null}"
To="0.0" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
</ListBox>
I'm using #H.B solution. It works the first time the list is loaded. However, if I expand one listboxitem, switch to another tab and go back to the tab where listbox is, an exception is thrown:
System.Windows.Data Error: 23 : Cannot convert '<null>' from type '<null>' to type 'System.Double' for 'en-US' culture with default conversions; consider using Converter property of Binding. NotSupportedException:'System.NotSupportedException: DoubleConverter não pode ser convertido de (nulo).
em System.ComponentModel.TypeConverter.GetConvertFromException(Object value)
em System.ComponentModel.TypeConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value)
em System.ComponentModel.BaseNumberConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value)
em MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o, Type destinationType, DependencyObject targetElement, CultureInfo culture, Boolean isForward)'
System.Windows.Data Error: 6 : 'ObjectSourceConverter' converter failed to convert value '<null>' (type '<null>'); fallback value will be used, if available. BindingExpression:Path=Tag; DataItem='ListBoxItem' (Name=''); target element is 'ScaleTransform' (HashCode=48000142); target property is 'ScaleY' (type 'Double') NotSupportedException:'System.NotSupportedException: DoubleConverter não pode ser convertido de (nulo).
em MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o, Type destinationType, DependencyObject targetElement, CultureInfo culture, Boolean isForward)
em MS.Internal.Data.ObjectSourceConverter.Convert(Object o, Type type, Object parameter, CultureInfo culture)
em System.Windows.Data.BindingExpression.ConvertHelper(IValueConverter converter, Object value, Type targetType, Object parameter, CultureInfo culture)'
Anyone having this too?
You should not need the ListBoxItem prefix on your events, just use "Selected" and "Unselected".
Another alternative to try is a property trigger:
https://web.archive.org/web/20120225232943/http://en.csharp-online.net/WPF_Styles_and_Control_Templates%E2%80%94Property_Triggers

Resources