Get value of a string Variable from MainPage.xaml.cs file to MainPage.xaml file in Windows Phone

Question

I have created a project in which the MainPage.xaml.cs is like the following:

using System;
using System.Collections.Generic;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace DemoApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        public string ImagePath = "/Images/Flower.png";

        public StartPage()
        {
            InitializeComponent();

        }
    }
}

And I have created the MainPage.xaml like the following:

<phone:PhoneApplicationPage
    x:Class="DemoApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">      

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Image x:Name="ImageShow" Source=""/>   
    </Grid>

</phone:PhoneApplicationPage>

Now my question is, is there any way to get the value of the ImagePath (string) to the Image called ImageShow as Source? Is there any way to do it from MainPage.xaml and using DataBinding in this case without creating any new class?

Answer 1

You need to convert ImagePath into property as you are cannot bind to fields

public partial class MainPage : PhoneApplicationPage
{
    public string ImagePath { get; set; } 

    public MainPage()
    {
        ImagePath = "/Images/Flower.png";
        InitializeComponent();
    }
}

give page some name and bind Image.Source to ImagePath property

<phone:PhoneApplicationPage ... x:Name="myPage">          
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Image x:Name="ImageShow" Source="{Binding ElementName=myPage, Path=ImagePath}"/>   
    </Grid>
</phone:PhoneApplicationPage>

Answer 2

Use DataContext in your codeBehind

public string ImagePath = "/Images/Flower.png";

    public StartPage()
    {
        InitializeComponent();
        this.DataContext=this;

    }

Then you use in your .xaml you binding

<Image x:Name="ImageShow" Source="{Binding ImagePath}"/>   

Answer 3

You should create DependencyProperty

public string ImagePath
{
    get { return (string) GetValue(ImagePathProperty); }
    set { SetValue(ImagePathProperty, value); }
}

public static readonly DependencyProperty ImagePathProperty =
        DependencyProperty.Register("ImagePath", typeof(string), typeof(MainPage), new PropertyMetadata(""));

This will create property available for binding, after this You can bind to it in Image:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Image x:Name="ImageShow" Source="{Binding Path=ImagePath, RelativeSource={RelativeSource AncestorType=PhoneApplicationPage}}"/>   
</Grid>

Answer 4

Add your variable as a resource from codebehind:

myWindow.Resources.Add("ImagePath", "/Images/Flower.png");

myWindow.DataContext = ImagePath;

Access in XAML:

<Image x:Name="ImageShow" Source={Binding Path=ImagePath}"/>