c# - Name cannot be found in the name scope of 'System.Windows.Controls.Button'

Question

I have the following Template for my Button

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <DockPanel Width="Auto">
            <Button DockPanel.Dock="Top">                                           
                <Button.Template>
                    <ControlTemplate >
                        <Image  Source="{Binding image}"/>
                    </ControlTemplate>
                </Button.Template>                    
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <local:GridLengthAnimation
                                    Storyboard.TargetName="col1"
                                    Storyboard.TargetProperty="Width"
                                    LeftGridWidth="*" RightGridWidth="1*" Duration="0:0:2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </DockPanel>
    </DataTemplate>
</Window.Resources>

<Grid>
     ...
     ...
     <Grid Grid.Row="2" >

        <Grid.ColumnDefinitions>
            <ColumnDefinition Name="col1" Width="{Binding ElementName=root, Path=DataContext.gla.LeftGridWidth}" />
            <ColumnDefinition Name="col2" Width="{Binding ElementName=root, Path=DataContext.gla.RightGridWidth}" />
        </Grid.ColumnDefinitions>

        <Grid x:Name="LeftGrid" Grid.Row="2" Grid.Column="0" >
              <Border BorderThickness="1" BorderBrush="Red">
                  <ItemsControl ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding ElementName=root, Path=DataContext._movies}">
                      <ItemsControl.ItemsPanel>
                          <ItemsPanelTemplate>
                              <UniformGrid Columns="5"/>
                          </ItemsPanelTemplate>
                      </ItemsControl.ItemsPanel>
                  </ItemsControl>
              </Border>
        </Grid>
     </Grid>
</Grid>

The issue is that col1 is not being picked up by Storyboard.TargetName="col1". I receive the error:

An unhandled exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll

Additional information: 'col1' name cannot be found in the name scope of 'System.Windows.Controls.Button'.

I think it may have to do with the fact that I'm using Items Control... I thought that col1 would be tried to be found in any containing elements. I'm not sure how to resolve this issue.

Any help would be greatly appreciated!

Answer 1

The problem is indeed caused by the ItemsControl which makes the Button and its resources in a different scope.

A simple fix would be, instead of using Storyboard.TargetName, use Storyboard.Target binding instead, something like this -

Storyboard.Target="{Binding ElementName=col1}"