dl_studios
Topic Author
Posts: 13
Joined: 24 Sep 2014, 00:31

[Unity] Button Imagesource not Binding to Datacontext

24 Sep 2014, 01:10

I've recently been experiencing some difficulty while trying to create a button with a background image. The tooltip on the button is getting the datacontext, but for some reason i just can't get it do display a image. i've been able to get an image (as opposed to a button) to display an image using datacontext bind, but unable to get similar results on the button's background imagesource databind. Any thoughts would be appreciated. thanks for your continued support of this great product.
<Grid
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Name="UserControl"
	d:DesignWidth="640" d:DesignHeight="480">
	<Grid.Resources>
		<DataTemplate x:Key="DataTemplate1">
			<Grid>
				<TextBlock HorizontalAlignment="Left" Height="20" Margin="0,0,-125.54,0" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top" Width="176"/>
			</Grid>
		</DataTemplate>
		<DataTemplate x:Key="IconTemplate">
			<Grid>
				<Rectangle HorizontalAlignment="Left" Height="32.667" Margin="6.333,15.333,-39,-28" Stroke="Black" VerticalAlignment="Top" Width="52.667">
					<Rectangle.Fill>
						<ImageBrush ImageSource="{Binding Image}"/>
					</Rectangle.Fill>
				</Rectangle>
			</Grid>
		</DataTemplate>
		<DataTemplate x:Key="iconstemplate">
			<Grid d:DesignWidth="204.75" d:DesignHeight="184.792">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="161*"/>
					<ColumnDefinition Width="43*"/>
				</Grid.ColumnDefinitions>
				<Grid.RowDefinitions>
					<RowDefinition Height="176*"/>
					<RowDefinition Height="0*"/>
					<RowDefinition Height="9*"/>
				</Grid.RowDefinitions>
				<Button Content="Button" HorizontalAlignment="Left" Height="129" Margin="10,6.333,0,0" VerticalAlignment="Top" Width="132.667" ToolTip="{Binding ToolTip}">

//Start of the problem bindings here////////////////////////////////////Non of these work while the above 
//ToolTip ="{Binding ToolTip works}" works fine. Hence the confusion.

					<Button.Foreground>
						<ImageBrush ImageSource="{Binding Image}"/>
					</Button.Foreground>
					<Button.Background>
						<ImageBrush ImageSource="{Binding Image}"/>
					</Button.Background>
					<Button.BorderBrush>
						<ImageBrush ImageSource="{Binding Image}"/>
					</Button.BorderBrush>
//End of problem Bindings ********************************************************************
		

		</Button>
			</Grid>
		</DataTemplate>
	</Grid.Resources>
	<Grid.Background>
		<ImageBrush/>
	</Grid.Background>
	<ComboBox x:Name="comboBox" HorizontalAlignment="Left" Height="27.333" Margin="32,30.667,0,0" VerticalAlignment="Top" Width="203.667" ItemsSource="{Binding Animals}" ItemTemplate="{DynamicResource DataTemplate1}"/>
	<Image HorizontalAlignment="Left" Height="187.333" Margin="29.333,93,0,0" VerticalAlignment="Top" Width="256.667" Source="{Binding SelectionBoxItem.Image, ElementName=comboBox}" ToolTip="{Binding ToolTip}"/>
	<Button x:Name="Button1" Content="{Binding SelectionBoxItem.OtherName, ElementName=comboBox}" HorizontalAlignment="Left" Height="27.333" Margin="240.667,30.667,0,0" VerticalAlignment="Top" Width="65" ToolTip="{Binding SelectionBoxItem.ToolTip, ElementName=comboBox}"/>
	<ListBox HorizontalAlignment="Left" Height="377" Margin="291,93,0,0" VerticalAlignment="Top" Width="339" ItemTemplate="{DynamicResource iconstemplate}" ItemsSource="{Binding Animals}"/>

</Grid>
	
	

And here is the unity side of things. It's basically the noesis databinding video tutorial with a couple additions.
using UnityEngine;
using System.Collections;
using Noesis;

public class TestBind : MonoBehaviour {



	// Use this for initialization
	void Start () {
	

		var tex1 = new TextureSource(Resources.Load("dixonPic") as Texture2D);
		var tex2 = new TextureSource(Resources.Load("cylinders") as Texture2D);

		var dixon = new Animal{Name = "Thing", Image = tex1, OtherName = "SillyWillyPants", ToolTip = "blah blah blah."};
		var blueprint= new Animal{Name = "Blueprint", Image = tex2, OtherName = "GreenPumpkins", ToolTip = "That's right, Green!"};
		var another = new Animal{Name = "Another", Image = tex2, OtherName = "thing", ToolTip = "Very much a thing"};


		var noesisPanel = GetComponent<NoesisGUIPanel>();

		var root= noesisPanel.GetRoot<Grid>();
		var viewModel = new ViewModel();

		Button _button = root.FindName<Button>("Button1");

		_button.Click += HandleClick;
		viewModel.Animals.Add(dixon);
		viewModel.Animals.Add(blueprint);
		viewModel.Animals.Add(another);

		root.SetDataContext(viewModel);
	}

	void HandleClick (BaseComponent sender, RoutedEventArgs e)
	{
		Button button = sender.As<Button>();
		Debug.LogError(button.GetName() + " was clicked!!");
	}
	
	// Update is called once per frame
	void Update () {
	
	}
}

[Noesis.Extended]
public class Animal: BaseComponent{


	private string _Name;
	private string _OtherName;
	private string _ToolTip;

	public string ToolTip {
		get {
			return _ToolTip;
		}
		set {_ToolTip = value;
			NotifyPropertyChanged("ToolTip");
		}
	}

	public string OtherName{
		get{return _OtherName;}
		set{_OtherName = value;
			NotifyPropertyChanged("OtherName");}

	}




	public string Name {
		get {
			return _Name;
		}
		set {
			_Name = value;

			NotifyPropertyChanged("Name");
		}
	}

	private ImageSource _Image;

	public ImageSource Image {
		get {
			return _Image;
		}
		set {
			_Image = value;
			NotifyPropertyChanged("Image");

		}
	}
}



[Noesis.Extended]
public class ViewModel: BaseComponent{

	public ViewModel(){

		_Animals = new Collection();

	}


	private Collection _Animals;

	public Collection Animals {
		get {
			return _Animals;
		}
		set {
			_Animals = value;

			NotifyPropertyChanged("Animals");

		}
	}
}
Thank you for taking a look at this!
 
dl_studios
Topic Author
Posts: 13
Joined: 24 Sep 2014, 00:31

Re: [Unity] Button Imagesource not Binding to Datacontext

24 Sep 2014, 22:34

I got a button to display an image in the background if I place the datacontext Image1 on ViewModel. But the template buttons of the listbox still are not setting their background image with data context. Heres the current code.
<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Name="UserControl"
	d:DesignWidth="640" d:DesignHeight="480">
	<UserControl.Resources>
		<DataTemplate x:Key="iconbuttons">
			<Grid d:DesignWidth="342" d:DesignHeight="172" Height="78" Width="169">
				<Button Content="Button" HorizontalAlignment="Left" Height="72" Margin="0" VerticalAlignment="Top" Width="169" ToolTip="{Binding ToolTip}">
//The Binding ToolTip IS working.
					<Button.Background>
//Binding Image is the bind that is NOT working 
						<ImageBrush ImageSource="{Binding Image}"/>
					</Button.Background>
				</Button>
			</Grid>
		</DataTemplate>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot">
		<Button x:Name="Button1" Content="Button" HorizontalAlignment="Left" Height="199" Margin="70,46,0,0" VerticalAlignment="Top" Width="466">
			<Button.Background>
//This binding is working fine
				<ImageBrush ImageSource="{Binding Image1}"/>
			</Button.Background>
		</Button>
		<ListBox HorizontalAlignment="Left" Height="201" Margin="48,258,0,0" VerticalAlignment="Top" Width="529" ItemTemplate="{DynamicResource iconbuttons}" ItemsSource="{Binding Animals}"/>
	</Grid>
</UserControl>



Here's the Unity Code
using UnityEngine;
using System.Collections;
using Noesis;

public class TestBind : MonoBehaviour {

	public Texture2D assetsSavedScreen;

	// Use this for initialization
	void Start () {
	

		var tex1 =  new TextureSource( assetsSavedScreen);
		var tex2 = new TextureSource( assetsSavedScreen);//new TextureSource(Resources.Load("cylinders") as Texture2D);

		var dixon = new Animal{Name = "Bear", Image = tex1, OtherName = "OtherName", ToolTip = "blah blah blah."};
		var blueprint= new Animal{Name = "Blueprint", Image = tex2, OtherName = "GreenPumpkins", ToolTip = "That's right, Green!"};
		var another = new Animal{Name = "Another", Image = tex2, OtherName = "thing", ToolTip = "A very much a thing"};


		var noesisPanel = GetComponent<NoesisGUIPanel>();

		var root= noesisPanel.GetRoot<UserControl>();
		var viewModel = new ViewModel();

		Button _button = root.FindName<Button>("Button1");

		_button.Click += HandleClick;
		viewModel.Animals.Add(dixon);
		viewModel.Animals.Add(blueprint);
		viewModel.Animals.Add(another);
		viewModel.Image1 = tex1;
		root.SetDataContext(viewModel);
	}

	void HandleClick (BaseComponent sender, RoutedEventArgs e)
	{
		Button button = sender.As<Button>();
		Debug.LogError(button.GetName() + " was clicked!!");
	}
	
	// Update is called once per frame
	void Update () {
	
	}
}

[Noesis.Extended]
public class Animal: BaseComponent{


	private string _Name;
	private string _OtherName;
	private string _ToolTip;

	public string ToolTip {
		get {
			return _ToolTip;
		}
		set {_ToolTip = value;
			NotifyPropertyChanged("ToolTip");
		}
	}

	public string OtherName{
		get{return _OtherName;}
		set{_OtherName = value;
			NotifyPropertyChanged("OtherName");}

	}




	public string Name {
		get {
			return _Name;
		}
		set {
			_Name = value;

			NotifyPropertyChanged("Name");
		}
	}

	private ImageSource _Image;

	public ImageSource Image {
		get {
			return _Image;
		}
		set {
			_Image = value;
			NotifyPropertyChanged("Image");

		}
	}
}



[Noesis.Extended]
public class ViewModel: BaseComponent{

	public ViewModel(){

		_Animals = new Collection();

	}

	private ImageSource _Image1;

	public ImageSource Image1{

		get{return _Image1;}
		set{_Image1 = value;
			NotifyPropertyChanged("Image1");}
	}

	private Collection _Animals;

	public Collection Animals {
		get {
			return _Animals;
		}
		set {
			_Animals = value;

			NotifyPropertyChanged("Animals");

		}
	}
}
 
User avatar
sfernandez
Site Admin
Posts: 3203
Joined: 22 Dec 2011, 19:20

Re: [Unity] Button Imagesource not Binding to Datacontext

25 Sep 2014, 21:51

Could you please create a ticket in our bugtracker, and we will try to fix it for 1.1.12 version.

Who is online

Users browsing this forum: Baidu [Spider] and 11 guests