Forum Xamarin.Forms

Change a source of image in a controltemplate

mariemarie Member ✭✭

Hi everyone,

I'm starting with Xamarin and I didn't find how to change a source of image in controltemplate. I want to change the image when the Wi-Fi state change.
I didn't use the MVVM model.
I attach my code of my controltemplate in App.xaml.

<ControlTemplate x:Key="State"> <Grid ColumnSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="11*"/> </Grid.ColumnDefinitions>

                <BoxView Grid.Column="0" Style="{DynamicResource boxviewStyle}"/>
                <ContentPresenter Grid.Column="1" />

                <Grid Grid.Column="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Button x:Name="ButtonHome" Grid.Column="0" Grid.Row="0" Style="{DynamicResource buttonStyle}" Image="home_48x46.png" Clicked="onClickedButtonHome"/>
                    <Label x:Name="LabelBattery" Grid.Column="0" Grid.Row="1" Style="{DynamicResource labelStyle}" TextColor="White" Text="100 %" VerticalOptions="Center" HorizontalOptions="Start" Margin="5"/>
                    <Image x:Name="Battery" Grid.Column="0" Grid.Row="1" Source="battery_icon_100_40px.png" VerticalOptions="Center" HorizontalOptions="End" Margin="5"/>
                    <Label x:Name="LabelTime" Grid.Column="0" Grid.Row="2" Style="{DynamicResource labelStyle}" HorizontalOptions="Center" Text="08:35"/>
                    <Button x:Name="ButtonGPS" Grid.Column="0" Grid.Row="3" Style="{DynamicResource buttonStyle}" Image="gps_icon_pos_70px.png" Clicked="onClickedButtonGPS"/>
                    <Image x:Name="ImageWIFI" Grid.Column="0" Grid.Row="4" Source="wifi_off_70px.png" HorizontalOptions="Center"/>
                    <Button x:Name="ButtonMore" Grid.Column="0" Grid.Row="6" Style="{DynamicResource buttonStyle}" Image="trois_points_70px.png" Clicked="onClickedButtonMore"/>
                </Grid>
            </Grid>
        </ControlTemplate>`

Thank you very much,

Best Answer

Answers

  • AsurAsur USMember ✭✭✭

    Shouldn't it be possible if you use binding for source ? . OR you can have two images for same grid cell and show hide based on a variable . There are a lot of ways to achieve what you want depending on what's easy for you

  • mariemarie Member ✭✭

    Thank you Asur for your answer.

    I tried to use binding for source but I didn't succeed.
    Maybe it is me. I tried to use it in my code behind of app. But I don't see how to do it. I want to change this image in my all pages use this controltemplate.
    I am trying to create two images and hide one of them like you say, but in my code-behind I can't hide or show my image and I don't know why.

  • jezhjezh Member, Xamarin Team Xamurai

    @marie
    Could you please post a basic demo when you trying to create two images and hide one of them ?

  • mariemarie Member ✭✭
    edited April 2019

    Yes, I can

    There is my App.xaml

    <?xml version="1.0" encoding="utf-8" ?>
    <Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Example.App">
    <Application.Resources>
    <ResourceDictionary>
    <ControlTemplate x:Key="BandeauEtat">
    <Grid ColumnSpacing="0">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="11*"/>
    </Grid.ColumnDefinitions>

                    <ContentPresenter Grid.Column="1" />
    
                    <Grid Grid.Column="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
    
                        <Button x:Name="ButtonHome" Grid.Column="0" Grid.Row="0" Image="home_48x46.png" Clicked="onClickedButtonHome"/>
                        <Image x:Name="ImageWIFIOn" Grid.Column="0" Grid.Row="4" Source="wifi_off_70px.png" HorizontalOptions="Center"/>
                        <Image x:Name="ImageWIFIOff" Grid.Column="0" Grid.Row="4" Source="wifi_on_70px.png" HorizontalOptions="Center" IsVisible="False"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </ResourceDictionary>
    
    </Application.Resources>
    

    `

    And my App.xaml.cs

    `using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;

    [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
    namespace Example
    {
    public partial class App : Application
    {

        public App()
        {
            InitializeComponent();
    
            MainPage = new MainPage();
        }
    
        protected override void OnStart()
        {
            // Handle when your app starts
        }
    
        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }
    
        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    
        private void onClickedButtonHome(object sender, EventArgs args)
        {
            Image imagewifion = ImageWIFIOn;
            Image imagewifioff = ImageWIFIOff;
    
            if (imagewifion.IsVisible)
            {
                imagewifion.IsVisible = false;
                imagewifioff.IsVisible = true;
            }
            else
            {
                imagewifion.IsVisible = true;
                imagewifioff.IsVisible = false;
            }
        }
    }
    

    }`

    When I want use my image I write Image imagewifion = ImageWIFIOn;, but ImageWIFIOn didn't recognize in Visual Studio and I don't understand why.

    Thank you very for your help

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post the whole code of App.xaml ?

  • mariemarie Member ✭✭

    I edited my post.
    I thought that I posted the whole code sorry.

  • mariemarie Member ✭✭

    So if I understand I can't create a button or an image shared with all my pages and change their properties for all pages ?

  • jezhjezh Member, Xamarin Team Xamurai
    edited April 2019

    I'm really sorry, that's not what I meant. I have updated my reply.
    I mean we can't reference to the Image or Button by x:Name directly.
    We might get a reference to the control by iterating through the elements of the file one layer by layer, but this is complicated. So I recommend that you implement this by using binding.

  • mariemarie Member ✭✭

    Thank you jezh,

    I tried to create a DataTemplate like you recommend me but I don't know how to use it for me, I understood that I can use it with listview in specific page. Or I want button, image, label shared with all pages and when I change an image or a label is the same things in all pages, that's why I choose to wrote in App.xaml.

    Thank you again,

  • jezhjezh Member, Xamarin Team Xamurai

    @marie
    You can reuse the DataTemplate in all your pages.

  • mariemarie Member ✭✭

    Hi jezh,

    Thank you very much. I succeed :)

  • jezhjezh Member, Xamarin Team Xamurai

    Great. Congrats on solving the problem.

Sign In or Register to comment.