C＃-來自后面代碼的WPF訪問DataTemplate中的元素

Question

我試圖在WPF中創建紙牌游戲。 我的問題是我想在特定時間翻轉卡片。 我在一個數據模板中創建了兩個情節提要板，每個翻轉（前后）都一個。 但是，當我嘗試從后面的代碼訪問並啟動它時，出現了一個錯誤，因為它無法訪問數據模板內部包含新卡圖像的網格。 所以我的問題是，如何從后面的代碼訪問數據模板內部的網格，以使故事板運行？

這是我的代碼：

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>

因此，“ grid”和“ grid1”是無法訪問的元素。

對於測試，我創建了一個按鈕“ Bdrehen”以檢查是否可以通過按鈕訪問該鍵盤蓋。 這很完美，也可以通過用鼠標左鍵單擊來工作。 但不是通過代碼。

這是代碼，我嘗試從后面的代碼開始：

DataTemplate dt = (DataTemplate)FindResource("RotatingItemTemplate");            
    Storyboard sb = dt.Resources["Storyboard1_reversed"] as Storyboard;
    BeginStoryboard(sb);

啟動后，我得到一個錯誤，即在“ KartenQuartett.MainWindow”的命名空間中找不到“網格”。 我可以在數據模板中找到我的情節提要，但找不到我的網格。

有人知道要解決嗎？

Answer 1

這是您的答案在DataTemplate內部調用Storyboard 。

但是請記住，這樣做不是一個好主意。 從您的代碼后面訪問任何UI元素不是一個好主意，因為它在代碼和UI之間建立了緊密的聯系。

我建議您改用MVVM ，並綁定一個布爾值以運行故事板，如此處所述： 如何在ViewModel中播放故事板？