Access XAML Control In DataTemplate From CodeBehind?

N

2

I have a control that I am unable to access in the codebehind, and I believe it is because it is defined in a DataTempalte.

The overall control is a slide show carousel. Each slide can be an Image or a MediaElement (video), the contents of which are defined in an ItemSource binding. The carousel is on a timer to switch from one slide to the next. Each time the slide changes I fire an event to that effect.

When I hit a slide with a video I'd like to stop the slide timer (done that) and start the video, which is where I've run into a problem. I can not access the MediaPlayer element Name from my codebehind. My assumption at this point is because it is a DataTemplate.

Is this assumption correct? If so, how can I get access to this control from the codebehind, or (more to the point) have it start playing when the slide comes up?

<ctrl:AutoScrollCarousel ...>
    <ctrl:AutoScrollCarousel.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ctrl:AutoScrollCarousel.ItemsPanel>
    <ctrl:AutoScrollCarousel.ItemTemplate>
        <DataTemplate>
            <Border x:Name="Border" VerticalAlignment="Center"
                    Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type UserControl},Mode=FindAncestor}}">
                <Grid Background="White">
                    ...
                    <Image Source="{Binding ContentImage}" Grid.Row="1" Grid.Column="1" Stretch="UniformToFill"
                            HorizontalAlignment="Center"
                            Visibility="{Binding ContentImage, Converter={StaticResource VisibilityConverter}}" />

                    <MediaElement Name="MediaPlayer" Source="{Binding ContentVideo}" Grid.Row="1" Grid.Column="1" Stretch="UniformToFill" LoadedBehavior="Play"
                                    Visibility="{Binding ContentVideo, Converter={StaticResource VisibilityConverter}}" MediaEnded="MediaPlayer_MediaEnded" />

                    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Title}" Foreground="Black"
                                FontFamily="Segoe UI" FontWeight="Light" HorizontalAlignment="Left" FontSize="75" Margin="0" VerticalAlignment="Center" />

                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ContentHeadline}" Foreground="Black"
                                FontFamily="Segoe UI" FontWeight="Light" HorizontalAlignment="Left" FontSize="50" VerticalAlignment="Center"
                                TextWrapping="Wrap">
                    </TextBlock>
                </Grid>
            </Border>
        </DataTemplate>
    </ctrl:AutoScrollCarousel.ItemTemplate>
</ctrl:AutoScrollCarousel>

Noteworthy answered 31/10, 2012 at 20:11 Comment(0)

M

2

I would normally recommend not to touch UIElements from code... but the MediaElement is a special case... maybe you should wrap the whole template inside a usercontrol (maybe with some custom DepProps) and that will give you better control over the whole thing.

Edit: Another approach would be to create a Behavior with a couple of properties (such as IsPlaying) and manipulate the mediaelement from there. Then you could use this behavior in the XAML of the DataTemplate, with no need for code behind or usercontrols.

Myrica answered 31/10, 2012 at 20:40 Comment(8)

But wouldn't that still be inside the DataTemplate? I'm not seeing where I would separate the template into a UserControl, that wouldn't still cause me to have the need to control something that is inside a DataTemplate. Since my ItemsPanel/ItemsTemplate are bound to a model, I'm not seeing what DependancyProperties I could flag (that I'm not already) to trigger it. – Noteworthy 31/10, 2012 at 20:55

Yep, you would still have your UserControl inside the DataTemplate, but UserControls have code behind by themselves, and you could also declare some dependency properties like bool IsPlaying, and in the changedcallback for that do the mediaelement.play() or stop() and so on – Myrica 31/10, 2012 at 21:3

I understand that part, but how would I flip the IsPlaying flag? I think in this case the question merges to a binding one. The DataTemplate only knows about the data model. Wouldn't I need to somehow grab a value outside the DataTemplate to see if the slide is visible or not? – Noteworthy 31/10, 2012 at 21:16

good question... How were you planning to do it if you had managed to obtain a reference to the MediaElement from code behind? – Myrica 31/10, 2012 at 21:20

From code behind I was just going to run Play(). But with the slideshow setup, I need to bind IsPlaying (as you suggest) to the IsSelected attribute of an ancestor -- because the DataTemplate only has access to the data model. – Noteworthy 31/10, 2012 at 21:44

As I wrote my last reply it got me tinkering and I did figure it out:

IsPlaying="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ctrl:AutoScrollCarouselContainer}, Mode=FindAncestor}}

. My video will only play when visible now, but automatically loops for a few seconds -- setting IsPlaying' in the UserControl` code behind somehow breaks the next playback. Ugh... always something else. – Noteworthy 31/10, 2012 at 21:45

Well, Mode=TwoWay fixed that... but it all blew up when I tried to load more then 1 video. Ugh. Well, this is quickly morphing into something very different. Thank you for the guidance and help. – Noteworthy 31/10, 2012 at 22:14

+1 for the comment "UserControls have code behind by themselves". It got me on the right track. – Privation 6/12, 2012 at 15:43

D

4

WPF provides a simple and straightforward way to access named elements that are generated from DataTemplates. It is explained in the MSDN article How to: Find DataTemplate-Generated Elements.

Assumed that your AutoScrollCarousel is derived from ItemsControl, you would get the ContentPresenter that is the container of an item like this:

AutoScrollCarousel carousel = ...
object item = ...
var contentPresenter =
    carousel.ItemContainerGenerator.ContainerFromItem(item) as ContentPresenter;

From the ContentPresenter you would get the named element in the DataTemplate by means of the FindName method:

var dataTemplate = contentPresenter.ContentTemplate;
var mediaPlayer = dataTemplate.FindName("MediaPlayer", contentPresenter) as MediaElement;

Doubletongue answered 31/10, 2012 at 22:18 Comment(0)

M

2