Accessing Elements Inside DataTemplate

Question

I'm trying to access controls inside a DataTemplate from the code behind. I'm using C# and UWP (Universal Windows Platform). The DataTemplate is for a Syncfusion control (TileView). My XAML code is:

                <layout:SfTileView Grid.Row="1" x:Name="tileView" Margin="12, 12, 12, 12" MinimizedItemsOrientation="Left" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding TileViewItems}" SelectedIndex="0" ItemWidth="250" ItemHeight="160">

                    <layout:SfTileView.MaximizedItemTemplate>

                        <DataTemplate>
                            <Border Background="#122544">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="150"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <Grid  Grid.ColumnSpan="2" Background="{Binding HeaderColor}" Tapped="Restore">
                                        <TextBlock Text="{Binding VideoTitle}" FontSize="25" Margin="20" Foreground="White"/>
                                    </Grid>

                                    <Grid Width="100" Height="100" Background="White" Grid.Row="1" Margin="0 20 0 0" Grid.Column="0">
                                        <Image Source="{Binding VideoThumbnail}" Stretch="UniformToFill" Width="100" Height="100"/>
                                    </Grid>

                                    <StackPanel x:Name="DetailsStack" Orientation="Horizontal" Margin="0 20 0 0" Grid.Row="1" Grid.Column="1">

                                        <Grid VerticalAlignment="Top">
                                            <Grid.Resources>
                                                <Style TargetType="TextBlock">
                                                    <Setter Property="FontSize" Value="14"/>
                                                    <Setter Property="Foreground" Value="White"/>
                                                </Style>
                                            </Grid.Resources>

                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="25"/>
                                                <RowDefinition Height="25"/>
                                                <RowDefinition Height="25"/>
                                                <RowDefinition Height="25"/>
                                            </Grid.RowDefinitions>

                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="150"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>

                                            <TextBlock Text="Title "/>
                                            <TextBlock Text="{Binding VideoTitle}" Grid.Column="1"/>
                                            <TextBlock Text="Uploaded By " Grid.Row="1"/>
                                            <TextBlock Text="{Binding VideoCreator}" Grid.Row="1" Grid.Column="1"/>
                                            <TextBlock Text="Video ID " Grid.Row="2"/>
                                            <TextBlock x:FieldModifier="Public" x:Name="IdString" Text="{Binding VideoId}" Grid.Row="2" Grid.Column="1"/>
                                            <TextBlock Text="Views " Grid.Row="3"/>
                                            <TextBlock Text="{Binding VideoViews}" Grid.Row="3" Grid.Column="1"/>

                                        </Grid>

                                    </StackPanel>

                                    <TextBlock Text="{Binding VideoDescription}" MaxLines="10" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" TextWrapping="Wrap" Margin="20" FontSize="14" FontWeight="Light" Foreground="White" />

                                    <StackPanel VerticalAlignment="Center" Margin="20 0" Orientation="Horizontal" Grid.Row="3" Grid.RowSpan="4" Grid.ColumnSpan="2">
                                        <Grid>
                                            <Grid.Resources>
                                                <Style TargetType="TextBlock">
                                                    <Setter Property="FontSize" Value="14"/>
                                                    <Setter Property="Foreground" Value="White"/>
                                                </Style>
                                            </Grid.Resources>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE890;" Margin="5 0"/>
                                            <TextBlock Text="{Binding VideoViews}" Grid.Column="1" Margin="5 0" VerticalAlignment="Center"/>
                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8E1;" Grid.Column="2" Margin="5 0" />
                                            <TextBlock Text="{Binding VideoLikes}" Grid.Column="3" Margin="5 0" VerticalAlignment="Center"/>
                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8E0;" Grid.Column="4" Margin="5 0" />
                                            <TextBlock Text="{Binding VideoDislikes}" Grid.Column="5" Margin="5 0" VerticalAlignment="Center"/>
                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE90A;" Grid.Column="6" Margin="5 0" />
                                            <TextBlock Text="{Binding VideoComments}" Grid.Column="7" Margin="5 0" VerticalAlignment="Center"/>
                                        </Grid>
                                        <StackPanel x:Name="ButtonsStack" Orientation="Horizontal">
                                            <TextBlock x:Name="HiddenID" Text="{Binding VideoId}" Visibility="Collapsed" />
                                            <Button x:Name="WatchVideo" Content="Watch Video" Tapped="WatchVideo_Tapped" />
                                            <Button x:Name="DownloadVideo" Content="Download MP4" />
                                        </StackPanel>
                                    </StackPanel>

                                </Grid>
                            </Border>
                        </DataTemplate>
                    </layout:SfTileView.MaximizedItemTemplate>
                    <layout:SfTileView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Notification:SfHubTile Width="250" Height="160" Foreground="White" ScaleDepth="0.9" RotationDepth="10" Padding="2" Background="{Binding TileColor}">

                                    <Notification:SfHubTile.Content>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <Image Source="{Binding VideoThumbnail}" Stretch="UniformToFill" Width="250"/>
                                            <Grid Background="{Binding HeaderColor}" Grid.Row="1">
                                                <TextBlock Text="{Binding VideoTitle}" FontSize="14" Margin="8" TextWrapping="Wrap" HorizontalAlignment="Stretch"/>
                                            </Grid>
                                        </Grid>
                                    </Notification:SfHubTile.Content>

                                </Notification:SfHubTile>
                            </Grid>
                        </DataTemplate>
                    </layout:SfTileView.ItemTemplate>
                </layout:SfTileView>

The control I need to access is a hidden TextBlock named "HiddenID" (which is located inside a StackPanel called "ButtonsStack").

Does anyone have any idea how I can access the controls inside the DataTemplate? I've tried everything I can think of :)

Thanks in advance.

Durga S · Answer 1 · 2018-02-15T10:32:15.407

2

Normally elements from DataTemplate can be retrieved using VisualTreeHelper. I have created a sample and uploaded here Please let me know if that helps.

Note : I work for Syncfusion.

edited Feb 15 '18 at 10:32

answered Feb 15 '18 at 10:21

Durga S

285
1
8

score 0 · Answer 2 · answered Feb 15 '18 at 03:24

The answer for this question can be found here on a different question. The reason you can't access the control is because you creating multiple instances of this data template where the names of the controls would conflict with each other.

To solve it, you have to use a method that gets all of the children and then searches for the control that you are attempting to access. The full solution can be found in the link posted above.

Accessing Elements Inside DataTemplate

2 Answers2