How to: Find DataTemplate-Generated Elements

[Bahram]

Hi there,

I have a DataTemplate that is added as TitleTemplate to a RadDocumentPane - as you see below. So I need to access to RadToggleButton which is inside my DataTemplate in code behind, can you please tell me how can i do that?

 

    <Window.Resources>

        <DataTemplate x:Key="SyncTemplate">

            <Grid>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="Auto" />

                    <ColumnDefinition />

                </Grid.ColumnDefinitions>

                <ContentPresenter Content="{Binding}" Margin="0,5,0,0"/>

                <telerik:RadToggleButton x:Name="xScrollSync" Grid.Column="1" HorizontalAlignment="Right" Content="XScroll Sync" Width="75" />

            </Grid>

        </DataTemplate>

    </Window.Resources>

 

    <Grid>

<telerik:RadDocking Margin="0 60 0 30" HorizontalAlignment="Stretch" Height="auto"

                            HasDocumentHost="False" Width="auto" VerticalAlignment="Stretch">

<telerik:RadSplitContainer telerik:ProportionalStackPanel.RelativeSize="1000, 200">

<telerik:RadSplitContainer x:Name="ganttViewSplit" InitialPosition="DockedLeft"

                                       HorizontalAlignment="Stretch" Height="auto"

                                       VerticalAlignment="Stretch" telerik:ProportionalStackPanel.RelativeSize="800,200">

        <telerik:RadPaneGroup>

            <telerik:RadDocumentPane x:Name="ganttDoc" TitleTemplate="{StaticResource SyncTemplate}">

             <telerik:RadDocumentPane.Content>

                                <Grid>

                                </Grid>

                      </telerik:RadDocumentPane.Content>

           </telerik:RadDocumentPane>

        </telerik:RadPaneGroup>

   </telerik:RadSplitContainer>

</telerik:RadDocking>

</Grid>


[Martin Ivanov]

Hello Bahram,

Usually, elements that are defined in a DataTemplate are modified using data bindings. So, a way to go is to set the Title property of the pane to an object (like string, or a custom class) and bind to its properties in the DataTemplate. Then, when you need to change something, update the object in the Title.

Another approach would be to use the ChildrenOfType() method. 

var button = this.ganttDoc.ChildrenOfType<RadToggleButton>().FirstOrDefault(x => x.Name == "xScrollSync");

Regards,
Martin Ivanov
Progress Telerik

[Bahram]

Hi Martin,

 

Thank you for giving me these solutions. However, I am not sure what do you mean by using data bindings - the first solution. Can you please provide me an example, I would be appreciate it.

And about the second solution, using  the ChildrenOfType() method, I tried it before and it returns null!

 

Thanks,

Bahram Afsharipoor

[Martin Ivanov]

Hello Bahram,

With the data bindings solution, I meant that you can define a view model for the pane object and assign it to its Title. For example:

// Note that if you want changes in the model to get applied to the UI, 
// you will need to implement the INotifyPropertyChanged interface and raise the PropertyChanged event in the property setters. 
public class MyPaneTitleModel
{
	public string Content { get; set; }
	public ICommand ButtonCommand { get; set; }
	public Brush Background { get; set; }
}

<!-- Note that there are different ways to set the Title property -->
<telerik:RadDocumentPane x:Name="ganttDoc" Title={Binding MyPanelTitleModelInstance} TitleTemplate="{StaticResource SyncTemplate}">

<DataTemplate x:Key="SyncTemplate">
	<Grid Background="{Binding Background}">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition />
		</Grid.ColumnDefinitions>
		<ContentPresenter Content="{Binding Content}" Margin="0,5,0,0"/>
		<telerik:RadToggleButton x:Name="xScrollSync" Grid.Column="1" HorizontalAlignment="Right" Content="XScroll Sync" Width="75" Command="{Binding ButtonCommand}" />
	</Grid>
</DataTemplate>

This way when you change a property in the model (that you have access to), the UI will also change.

this.MyPanelTitleModelInstance.Background = Brushes.Green;

The ChildrenOfType() extension methods would be able to enumerate the children elements only if the visual tree of the control has been loaded. This is why you should call the methods after the Loaded event of the corresponding control was invoked. If you call the method before this, it won't find anything.

Regards,
Martin Ivanov
Progress Telerik

[Bahram]

Hi Martin,

 

Thank you for sending me the sample for the data binding solution, that is exactly what I needed.

 

Thanks,

Bahram Afsharipoor