Accessing XAML element inside of ResponsiveView Templates

[kazo0]

Question from community:

I have the following XAML (MainPage.xaml):

<utu:ResponsiveView.NarrowTemplate>
    <DataTemplate>
        <Grid>
                <TextBlock x:Uid="txtClaim" x:Name="txtClaim"  FontSize="14" FontWeight="SemiBold" Text="This is a sample text." HorizontalAlignment="Center" />
        </Grid>        
    </DataTemplate>
</utu:ResponsiveView.NarrowTemplate>

I can't reach txtClaim to change the Text property from code-behind, like:

txtClaim.Text = "Text put from code behind.";
VS2022 states that txtClaim does not exist. What am I doing wrong?

[kazo0]

Since the item is inside of a DataTemplate, it's usually more tricky to be able to reference it from code-behind. If it's a very simple change you need to have between something like a Wide and Narrow breakpoint, there's also the Respsonive Markup Extension that you can use instead of the full ResponseView with templates. So it could look something like:

I have a sample project attached that demonstrates the difference

XAML

<Grid utu:SafeArea.Insets="VisibleBounds"
	  RowDefinitions="*,*">
	<Grid Background="Red">
		<utu:ResponsiveView HorizontalAlignment="Center"
							VerticalAlignment="Center">
			<utu:ResponsiveView.WideTemplate>
				<DataTemplate>
					<TextBlock HorizontalAlignment="Center"
							   x:Name="wideText"
							   Text="Wide!" />
				</DataTemplate>
			</utu:ResponsiveView.WideTemplate>
			<utu:ResponsiveView.NarrowTemplate>
				<DataTemplate>
					<TextBlock HorizontalAlignment="Center"
							   x:Name="narrowText"
							   Text="Narrow!" />
				</DataTemplate>
			</utu:ResponsiveView.NarrowTemplate>
		</utu:ResponsiveView>
	</Grid>
	<Grid Background="Green"
		  Grid.Row="1">
		<TextBlock x:Name="myRespText"
				   HorizontalAlignment="Center"
				   VerticalAlignment="Center"
				   Text="{utu:Responsive Narrow='Narrow!', Wide='Wide!'}" />
	</Grid>
</Grid>

Code Behind

public sealed partial class MainPage : Page
{
	public MainPage()
	{
		this.InitializeComponent();

		var text = myRespText.Text;

		// These don't work while in a DataTemplate
		//var text2 = narrowText.Text;
		//var text3 = wideText.Text;
	}
}

Recording.2025-04-13.101443.mp4

TestResponsive.zip

[Xiaoy312]

data-templated content are not accessible via xName as an exposed local field/property
for the obvious reason that said template can be used anywhere, and multiple times, so how do you reference an element in "them"(plural)
you can still find them on the visual tree, once the template has been materialized
we have addressed this problem in toolkit before with the SamplePageLayout, the gist was wait until the page is .Loaded and then crawl the visual tree
for ResponsiveView, this will be a little more tricky because we did have to monitor for additional dynamic layout changes

[Xiaoy312]

because we would need to perform a such setup everytime the data-template is reloaded (cant have them reset, whenever the user resized it), we should expose a ResponsiveLayoutChanged(long name to distinguish from LayoutUpdated) event for this
impl-wise, we just need to raise this event in ResponsiveView::UpdateTemplate, once the content is set, the subtree is readily available for access.