Different on set UserControl's background

UE4 · 13 Mar 2018, 14:25


  <DataTemplate>
                            <local:TouchButton x:Name="TouchButtonInst" Width="{Binding DrawSize.X}" Height="{Binding DrawSize.Y}"
								noesis:EventToCommand.Event="ButtonAction"
								noesis:EventToCommand.Command="{Binding DataContext.HandleButtonAction, ElementName=SpellPanelControl}"
								noesis:EventToCommand.CommandParameter="{Binding ActionParam, ElementName=TouchButtonInst}" 
								Tag="{Binding SpellName}"
                                
                                			//this line works for WPF, but not NGUI_UE4
                                               <!--Background="{Binding SpellIcon}"-->

                                Canvas.Left="{Binding Offset.X}" Canvas.Top="{Binding Offset.Y}">

                                //this line works for NGUI_UE4, but not WPF
                                <local:TouchButton.Background> <ImageBrush ImageSource="{Binding SpellIcon}"/> </local:TouchButton.Background>

                            </local:TouchButton>

                        </DataTemplate>

14 Mar 2018, 16:01

Hi UE4,

I just tried it, and I can't get the first way to work on Blend. The second way works on both. Here's the XAML and code I've used in blend:

MainWindow.xaml

<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"
		xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
    xmlns:local="clr-namespace:Login"
    x:Class="Login.MainWindow"
    d:DesignWidth="1280" d:DesignHeight="720"
    FontFamily="./#Aero Matics"
    Foreground="#FF488EB5">

	<ItemsControl ItemsSource="{Binding SpellList}">
		<ItemsControl.ItemsPanel>
			<ItemsPanelTemplate>
				<WrapPanel Width="800" Height="200"/>
			</ItemsPanelTemplate>
		</ItemsControl.ItemsPanel>
		<ItemsControl.ItemTemplate>
			<DataTemplate>
				<Button Width="200" Height="200">
					<Button.Background>
						<ImageBrush ImageSource="{Binding Path=SpellIcon, diag:PresentationTraceSources.TraceLevel=High}"/>
					</Button.Background>
				</Button>
			</DataTemplate>
		</ItemsControl.ItemTemplate>
	</ItemsControl>
</UserControl>

MainWindow.xaml.cs

#if UNITY_5_3_OR_NEWER
#define NOESIS
using Noesis;
#else
using System;
using System.Windows;
using System.Windows.Controls;
#endif

namespace Login
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : UserControl
    {
        public MainWindow()
        {
            this.Initialized += OnInitialized;
            this.InitializeComponent();
        }
#if NOESIS
        void InitializeComponent()
        {
            Noesis.GUI.LoadComponent(this, "Assets/NoesisGUI/Samples/Login/MainWindow.xaml");
        }
#endif

        private void OnInitialized(object sender, EventArgs args)
        {
            this.DataContext = new ViewModel();
        }
    }
}

ViewModel.cs

#if UNITY_5_3_OR_NEWER
#define NOESIS
using Noesis;
using UnityEngine;
#else
using System;
using System.Collections.ObjectModel;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
#endif

namespace Login
{
	public class Spell
	{
		public ImageSource SpellIcon { get; set; }
	}
	public class ViewModel : NotifyPropertyChangedBase
	{
		public ViewModel()
		{
			SpellList = new ObservableCollection<Spell>();

			// Should be filled by application
			SpellList.Add(new Spell
			{
				SpellIcon = new BitmapImage(new System.Uri("pack://application:,,,/Login;component/aladin-atlas.png"))
			});
		}

		public ObservableCollection<Spell> SpellList { get; }
	}
}

Note that I've used an ImageSource for the SpellIcon property, which is what happens in Unreal when you use a Texture2D as a property. If you do Background="{Binding SpellIcon}" you're trying to bind an ImageSource to a Brush, which doesn't work. If you try this xaml in blend, you can see the debug output and the binding error:

<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"
		xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
    xmlns:local="clr-namespace:Login"
    x:Class="Login.MainWindow"
    d:DesignWidth="1280" d:DesignHeight="720"
    FontFamily="./#Aero Matics"
    Foreground="#FF488EB5">

	<ItemsControl ItemsSource="{Binding SpellList}">
		<ItemsControl.ItemsPanel>
			<ItemsPanelTemplate>
				<WrapPanel Width="800" Height="200"/>
			</ItemsPanelTemplate>
		</ItemsControl.ItemsPanel>
		<ItemsControl.ItemTemplate>
			<DataTemplate>
				<Button Width="200" Height="200" Background="{Binding Path=SpellIcon, diag:PresentationTraceSources.TraceLevel=High}">
				</Button>
			</DataTemplate>
		</ItemsControl.ItemTemplate>
	</ItemsControl>
</UserControl>

Different on set UserControl's background

Different on set UserControl's background

Re: Different on set UserControl's background

Who is online