How to access element inside ControlTemplate? - xamarin

Question

I have a requirement like ActivityIndicator will appear while API call is executing. This will same for all the pages. so I have created BasePage and put activity indicator in the BasePage.xaml.
BasePage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="XamarinFormDemo.Base.BasePage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ContentPage.ControlTemplate>
<ControlTemplate x:Name="baseTemplate">
<AbsoluteLayout
AbsoluteLayout.LayoutBounds="1,1,1,1"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<ContentPresenter AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" />
<StackLayout
x:Name="stackProgress"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="#8C000000"
HorizontalOptions="FillAndExpand"
IsVisible="False"
Orientation="Vertical"
VerticalOptions="FillAndExpand">
<ActivityIndicator
x:Name="indicatorProgress"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
HorizontalOptions="Center"
IsRunning="True"
VerticalOptions="FillAndExpand"
Color="White" />
</StackLayout>
</AbsoluteLayout>
</ControlTemplate>
</ContentPage.ControlTemplate>
</ContentPage>
I have created few methods to handle ActivityIndicator status like visible and Invisible when needed.
BasePage.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BasePage : ContentPage
{
public BasePage()
{
InitializeComponent();
}
/*
* Show progress dialog
*/
public void ShowProgress()
{
if (!stackProgress.IsVisible)
{
stackProgress.IsVisible = true;
}
}
/*
* Hide progress dialog
*/
public void HideProgress()
{
stackProgress.IsVisible = false;
}
}
Now I have created LoginPage.xaml and add BasePage as root control.so that I can access indicator. same thing I have done for other pages.
LoginPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<base:BasePage
x:Class="XamarinFormDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:base="clr-namespace:XamarinFormDemo.Base"
xmlns:local="clr-namespace:XamarinFormDemo.Controls"
BackgroundColor="#2b3d53"
NavigationPage.HasNavigationBar="False">
<ScrollView>
<StackLayout
Padding="24"
HorizontalOptions="FillAndExpand"
Orientation="Vertical"
VerticalOptions="FillAndExpand">
<Image
Margin="0,32,0,32"
HeightRequest="100"
Source="ai_logo.jpg"
VerticalOptions="Center"
WidthRequest="100" />
<local:CustomEntry
x:Name="entryEmail"
Margin="0,0,0,8"
DrawableImage="email_hover_icon"
FontSize="Small"
IsSpellCheckEnabled="False"
Keyboard="Email"
Placeholder="Email"
PlaceholderColor="Gray"
Text="peter#klaven.com"
TextColor="Black" />
<local:CustomEntry
x:Name="entryPassword"
Margin="0,0,0,8"
DrawableImage="password_hover_icon"
FontSize="Small"
IsPassword="True"
IsSpellCheckEnabled="False"
Placeholder="Password"
PlaceholderColor="Gray"
Text="cityslicka"
TextColor="Black" />
<Button
x:Name="buttonLogin"
Margin="0,16,0,16"
BackgroundColor="#009999"
Clicked="ButtonLogin_ClickedAsync"
FontSize="Small"
Text="Login"
TextColor="White" />
<Label
FontSize="Small"
HorizontalOptions="Center"
Text="OR"
TextColor="White" />
<Button
x:Name="buttonSignUp"
Margin="0,16,0,16"
BackgroundColor="#009999"
Clicked="NavigateToSignUp"
FontSize="Small"
Text="SignUp"
TextColor="White" />
</StackLayout>
</ScrollView>
</base:BasePage>
In LoginPage.xaml.cs file I have code for making a call for login and handling activity indicator using ShowProgress(); and HideProgress();
these methods belong to BasePage.xaml.cs.
LoginPage.xaml.cs
namespace XamarinFormDemo
{
public partial class MainPage : BasePage
{
public MainPage()
{
InitializeComponent();
}
private async Task ButtonLogin_ClickedAsync(object sender, EventArgs e)
{
ShowProgress();
// API Call
HideProgress();
}
}
}
I want output like below. Please have a look into images.
View should be like this when the ActivityIndicator is hidden
View should be like this when calling API
The issue is, I am not able to access "stackProgress" in code behind. because it is ControlTemplate. it is saying that
The name "stackProgress" does not exist in the current context.
Is there any other way to achieve the same thing? or
Can someone tell me what I have done wrong?
How can I fix it?

Answer 1

I would recommend that you use TemplateBinding.
So basically you can reuse IsBusy property - in your control-template:
<ControlTemplate x:Name="baseTemplate">
<AbsoluteLayout ..>
<ContentPresenter AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" />
<StackLayout
x:Name="stackProgress"
...
IsVisible="{TemplateBinding IsBusy}"
...>
<ActivityIndicator
...
IsRunning="{TemplateBinding IsBusy}"
IsVisible="{TemplateBinding IsBusy}"
Color="White" />
</StackLayout>
</AbsoluteLayout>
</ControlTemplate>
Now you can either bind this IsBusy property using MVVM, or update your methods in code-behind:
/*
* Show progress dialog
*/
public void ShowProgress()
{
if (!IsBusy)
{
IsBusy = false;
}
}
/*
* Hide progress dialog
*/
public void HideProgress()
{
IsBusy = false;
}

Answer 2

Try this code please :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="XamarinFormDemo.Base.BasePage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ContentPage.Content>
<AbsoluteLayout
x:Name="dd"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<ContentView x:Name="baseTemplate">
<StackLayout
x:Name="stackProgress"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="#8C000000"
HorizontalOptions="FillAndExpand"
Orientation="Vertical"
VerticalOptions="FillAndExpand">
</StackLayout>
</ContentView>
<StackLayout Padding="12" x:Name="DisplayLoading"
IsVisible="False"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<ActivityIndicator Color="#d7813e" IsRunning="True"/>
<Label Text="Loading..." TextColor="#d7813e" FontSize="Small"/>
</StackLayout>
<ContentPage.Content>
Try CS Code like :
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BasePage : ContentPage
{
public BasePage()
{
InitializeComponent();
}
/*
* Show progress dialog
*/
public void ShowProgress()
{
DisplayLoading.IsVisible = true;
}
/*
* Hide progress dialog
*/
public void HideProgress()
{
DisplayLoading.IsVisible = false;
}
}