Develop Reference

WPF XAML Togglebutton trigger event on different target

I've trying to create a navigation panel on the left of my app, I have several ListViews stacked on top of each other, with an invisible ToggleButton on the first item of each list. Then when these ToggleButtons are switched I want to trigger an event on the other ListViews.
I.e. change the height of all other ListViews to just view the first item;
Setter TargetName="ClientItems" Property="Height" Value="40"
And also switch the value of the other ToggleButtons so only one or none ToggleButtons are checked.
Setter TargetName="ClientsTglBtn" Value="ToggleButton.Checked"
<ToggleButton x:Name="ProjectsTglBtn"
Width="190"
Height="40"
VerticalAlignment="Top"
BorderThickness="0"
Background="Transparent"
Style="{StaticResource ToggleButtonStyle}">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="HideProjectItems">
<DoubleAnimation
Storyboard.TargetName="ProjectItems"
Storyboard.TargetProperty="Height"
BeginTime="0:0:0:0"
From="160" To="40"
Duration="0:0:0:0.25">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<Setter TargetName="ClientItems" Property="Height" Value="40"/>
<Setter TargetName="ClientsTglBtn" Value="ToggleButton.Checked"/>
<BeginStoryboard>
<Storyboard x:Name="ShowProjectItems">
<DoubleAnimation
Storyboard.TargetName="ProjectItems"
Storyboard.TargetProperty="Height"
BeginTime="0:0:0:0"
From="40" To="160"
Duration="0:0:0:0.25">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>

Style Triggers being recursivly applied

I have a Style Trigger to expand an image when the mouse is over it (actually a border around the image) and contract when it moves off. This is done via an animated scale transform.
However if the mouse moves off the expanding image but is still within the area it is expanding into, before the mouse over animation has completed, the expand and contract animations get constantly triggered causing the image to flicker between expanding and contracting.
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.5" To="2.5" Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="1.2" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="1.2" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.5" To="1.5" Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="1.2" To="1" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1.2" To="1" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
<Border BorderBrush="{Binding IsSelected, Converter={StaticResource BorderColourConverter}, Mode=OneWay}"
BorderThickness="1.5" Style="{StaticResource ThumbnailScale}">
<Border.Background>
<SolidColorBrush Color="Transparent"/>
</Border.Background>
<Image Source="{Binding ImageSource}" Width="{Binding ThumbnailWidth, Mode=OneWay}"
Height="{Binding ThumbnailHeight, Mode=OneWay}" Stretch="Uniform"/>
</Border>
Is there some way to stop the recursive triggering of the animations and so stop the continual change in the image size?

Just after posting the question I looked at a slow motion video of what was happening and figured out what was happening and how to fix it.
The problem was with the second (and subsequent) invocation of the animation's start point.
They assumed that the previous animation had finished when it hadn't. So by removing the "From" clause in the animations they started from their current scaling and this solved the problem.

C# - WPF Access elements in a DataTemplate from code behind

I tried to create a card game in WPF.
My Problem is that I want to flip a card at a certain time.
I created two storyboards in a datatemplate, one for each flip (back and front). But when I tried to access and start it from the code behind I got an error, because it can't access the grid, which contains the new card image, inside the datatemplate.
So my question is, how can I access the grid inside the datatemplate from code behind, to get my storyboard run?
Here is my code:
XAML:
<Window x:Class="KartenQuartett.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:KartenQuartett"
mc:Ignorable="d"
ResizeMode="NoResize"
Title="{Binding Title}" Height="510" Width="670" WindowStartupLocation="CenterScreen">
<Window.Resources>
<DataTemplate x:Key="RotatingItemTemplate">
<DataTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="grid1">
<EasingInt32KeyFrame KeyTime="0" Value="0"/>
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="1"/>
</Int32AnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="image">
<EasingInt32KeyFrame KeyTime="0" Value="1"/>
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="1"/>
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="0"/>
</Int32AnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard1_reversed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
<SplineDoubleKeyFrame KeyTime="0" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="grid1">
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="1"/>
<SplineInt32KeyFrame KeyTime="0:0:0.5" Value="0"/>
<SplineInt32KeyFrame KeyTime="0:0:1" Value="0"/>
</Int32AnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="image">
<SplineInt32KeyFrame KeyTime="0:0:0.5" Value="0"/>
<SplineInt32KeyFrame KeyTime="0:0:0.5" Value="1"/>
<SplineInt32KeyFrame KeyTime="0:0:1" Value="1"/>
</Int32AnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<Grid x:Name="grid">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5"/>
<SkewTransform CenterX="0.5" CenterY="0.5"/>
<RotateTransform CenterX="0.5" CenterY="0.5"/>
<TranslateTransform/>
</TransformGroup>
</Grid.LayoutTransform>
<Grid x:Name="grid1">
<Image x:Name="image1" Source="{Binding ImageFront}" Stretch="Fill" />
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.LayoutTransform>
</Grid>
<Image x:Name="image" Source="{Binding Image}" Stretch="Fill" />
<Button x:Name="Bdrehen" Content="Drehen" HorizontalAlignment="Left" Margin="119,407,0,0" VerticalAlignment="Top" Width="75" Click="Bdrehen_Click"/>
</Grid>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="Bdrehen">
<BeginStoryboard x:Name="Storyboard1_BeginStoryboard1" Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="grid1">
<StopStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard1"/>
<BeginStoryboard x:Name="Storyboard1_reversed_BeginStoryboard" Storyboard="{StaticResource Storyboard1_reversed}"/>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"></ColumnDefinition>
<ColumnDefinition Width=".5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="gridOne">
<Image x:Name="cardFront" Source="Bilder/card_front.png" Stretch="Fill">
</Image>
<StackPanel x:Name="stack1" Margin="25">
</StackPanel>
</Grid>
<Grid Grid.Column="1" x:Name="gridTwo">
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ItemsControl ItemsSource="{Binding MyImages}"
ItemsPanel="{DynamicResource ItemsPanelTemplate1}"
ItemTemplate="{DynamicResource RotatingItemTemplate}">
<ItemsControl.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.Resources>
</ItemsControl>
</ScrollViewer>
<StackPanel x:Name="stack2" Margin="25">
</StackPanel>
</Grid>
</Grid>
So "grid" and "grid1" are the elements, which can't accessed.
For tests i created a button "Bdrehen" to check, if I can access the flip from a button. This works perfect, it also works by left-clicking on it with the mouse. But not by code.
Heres the code, where I try to start it from code behind:
DataTemplate dt = (DataTemplate)FindResource("RotatingItemTemplate");
Storyboard sb = dt.Resources["Storyboard1_reversed"] as Storyboard;
BeginStoryboard(sb);
After starting I got an error, that the "grid" can't be found in the namespace of "KartenQuartett.MainWindow".
I can find my storyboards, but not my grids inside the datatemplate.
Anyone got an idea to fix it?

Here is your answer Calling Storyboard inside DataTemplate.
But keep in mind that doing that is not a good idea. Accessing any UI Element from your code behind is not a great idea, because it creates a tight coupling between your code and your UI.
I would suggest you to use MVVM instead, and to bind a boolean to run your storyboard as explained here: How to play Storyboard in ViewModel?

WPF Popup follow mouse in DataTemplate

I'm fighting with making popup follow mouse within DataTemplate
I have following DataTemplate:
<DataTemplate>
<StackPanel x:Name="MyPanel">
<Popup x:Name="MyPopup" Visibility="Visible" AllowsTransparency="True" Placement="MousePoint">
something here
</Popup>
<controls1:ImageLoader x:Name="MyImage" Margin="10,10,0,0" Source="{Binding ImageUri}" Width="100" Height="100">
</controls1:ImageLoader>
</StackPanel>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="MyImage.MouseEnter" >
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="MyPopup"
Storyboard.TargetProperty="IsOpen"
Duration="0:0:0.5">
<DiscreteBooleanKeyFrame Value="True" KeyTime="100%"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MyPanel.MouseLeave" >
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="MyPopup"
Storyboard.TargetProperty="IsOpen"
Duration="0:0:0.01">
<DiscreteBooleanKeyFrame Value="False" KeyTime="100%"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
Right now popup is working : I mean it shows after 500ms and hides (almost correctly)
I'm trying to make a popup follows my mouse pointer while moving around MyImage control.
How to do it?

Custom Border with scaletransform not working properly

I am using the template below to render a semi-transparent 'label' to display certain data. as you can see the the display is elliptical (i'm using Border.CornerRadius for this). I am now trying to popout and contract the label when based on mouse enter/exist. this works, but the problem is, when popped out, the text displayed appears in rectanble, not elipse..and furthermore it seems that while the text itself is expanded, the border is not, making causing some of the text to become cut off. So to summarize...how can i make get the pop out to also show as an elipse and not cut any text off?
<DataTemplate x:Key="LabelTmplt" >
<Border Name="myBorder" BorderThickness="0" CornerRadius="9" RenderTransformOrigin="0.5,0.5" >
<Border.Background>
<SolidColorBrush Opacity=".3" Color="Red"/>
</Border.Background>
<TextBlock Text="{Binding Path=Text}" Padding="5,1,5,1.5" Margin="0,0,0,0"/>
<Border.RenderTransform>
<ScaleTransform />
</Border.RenderTransform>
<Border.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="myBorder">
<DoubleAnimation Duration="0:0:0.25" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude="2" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.25" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude="2" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard TargetName="myBorder">
<DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
</DataTemplate>

If you don't mind the text actually shrinking and growing with the popup you could put it inside a ViewBox
<Viewbox Margin="0,0,0,0">
<TextBlock Text="{Binding Path=Text}" Padding="5,1,5,1.5"/>
</Viewbox>