Set Target of Storyboard to Button inside a DataTemplate WPF - wpf

Question

We are trying to set Height and Width of the button based on the window size. We want to achieve this using Visual States. We want to set Storyboard Target to a button which is inside a DataTemplate. Directly setting target by name using StoryBoard.TargetName is not possible because of the namescope of DataTemplate. Is there any way to do this in XAML.
Refer to-
XAML:
<UserControl x:Class="ResizeSampleApp.Controls.ResizeUserControl"
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:local="clr-namespace:ResizeSampleApp.Controls"
mc:Ignorable="d"
SizeChanged="CurrentWindow_SizeChanged"
x:Name="DashBoard"
>
<Grid x:Name="grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ResizeStates">
<VisualState x:Name="FirstHorizontalBreakpoint">
<Storyboard >
<DoubleAnimation To="116" Storyboard.TargetName="TargetBtn" Storyboard.TargetProperty="Height"></DoubleAnimation>
<DoubleAnimation To="182" Storyboard.TargetName="TargetBtn" Storyboard.TargetProperty="Width"></DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="MinSize">
<Storyboard>
<DoubleAnimation To="100" Storyboard.TargetName="TargetBtn" Storyboard.TargetProperty="Height"></DoubleAnimation>
<DoubleAnimation To="197" Storyboard.TargetName="TargetBtn" Storyboard.TargetProperty="Width"></DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical">
<Grid Margin="10">
<ItemsControl Name="icTodoList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="TargetBtn" Content="{Binding Title}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</StackPanel>
</Grid>
</UserControl>
C#:
public class TodoItem
{
public string Title { get; set; }
}
public partial class ResizeUserControl : UserControl
{
public ResizeUserControl()
{
InitializeComponent();
List<TodoItem> items = new List<TodoItem>();
items.Add(new TodoItem() { Title = "Testing 1 " });
items.Add(new TodoItem() { Title = "Testing 2" });
items.Add(new TodoItem() { Title = "Testing 3" });
icTodoList.ItemsSource = items;
}
public void CurrentWindow_SizeChanged(object sender, SizeChangedEventArgs sizeChangedEventArgs)
{
if (this.ActualWidth > 847)
{
VisualStateManager.GoToState(this.DashBoard, "FirstHorizontalBreakpoint", false);
}
else
{
VisualStateManager.GoToState(this.DashBoard, "MinSize", false);
}
}
}
Thanks in Advance.

Answer 1

It is not possible to use visual state animations to animate properties inside a DataTemplate. The DataTemplate is just a template, that is not part of the visual tree, the moment the Storyboard is defined. The template will be duplicated for each templated target e.g each item container. This means there will be multiple buttons with the name TargetBtn - when viewed from outside the template's scope. So you would have to move the animations to the DataTemplate scope, which means inside the template.
In addition to the control's visual state definitions, you should add properties to reflect the visual state as object state.
It is best practice and recommended by Microsoft Docs to do this for each state: add properties like IsMouseOver to indicate the MouseOver state or IsFocused which goes in tandem with the Focused state, just to name some framework examples.
This allows your control to express the visual state as real instance state, which can be consumed outside the context of the control's direct content - visual states are only consumable by the VisualStateManager.
You can then use this usually public read-only dependency properties to trigger e.g. a DataTrigger, which you define inside the DataTemplate to animate the template's content:
ResizeUserControl.xaml.cs
public partial class ResizeUserControl : UserControl
{
#region IsExpandedViewEnabled read-only dependency property
protected static readonly DependencyPropertyKey IsExpandedViewEnabledPropertyKey = DependencyProperty.RegisterReadOnly(
"IsExpandedViewEnabled",
typeof(bool),
typeof(ResizeUserControl),
new PropertyMetadata(default(bool)));
public static readonly DependencyProperty IsExpandedViewEnabledProperty = MyControl.IsExpandedViewEnabledPropertyKey.DependencyProperty;
public bool IsExpandedViewEnabled
{
get => (bool) GetValue(MyControl.IsExpandedViewEnabledProperty);
private set => SetValue(MyControl.IsExpandedViewEnabledPropertyKey, value);
}
#endregion IsExpandedViewEnabled read-only dependency property
public ResizeUserControl()
{
InitializeComponent();
}
#region Overrides of FrameworkElement
protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
{
base.OnRenderSizeChanged(sizeInfo);
if (this.ActualWidth > 847)
{
VisualStateManager.GoToState(this, "FirstHorizontalBreakpoint", false);
this.IsExpandedViewEnabled = true;
}
else
{
VisualStateManager.GoToState(this, "MinSize", false);
this.IsExpandedViewEnabled = false;
}
}
}
ResizeUserControl.xaml
<UserControl>
<Grid x:Name="grid">
<StackPanel Orientation="Vertical">
<Grid Margin="10">
<ItemsControl Name="icTodoList"
ItemsSource="{Binding DataItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="TargetBtn" Height="60"
Content="{Binding Title}" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=IsExpandedViewEnabled}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="116" Storyboard.TargetName="TargetBtn" Storyboard.TargetProperty="Height" />
<DoubleAnimation To="182" Storyboard.TargetName="TargetBtn" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="100" Storyboard.TargetName="TargetBtn" Storyboard.TargetProperty="Height" />
<DoubleAnimation To="197" Storyboard.TargetName="TargetBtn" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</StackPanel>
</Grid>
</UserControl>