Forums | NoesisGUI

<ItemsControl x:Name="BlueTeam" Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Margin="0,0,0,1">
	<ItemsControl.ItemTemplate>
		<DataTemplate>
			<Border Height="25" Margin="1">
				<Border.Background>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<LinearGradientBrush.RelativeTransform>
							<TransformGroup>
								<RotateTransform Angle="-90" CenterY="0.5" CenterX="0.5" />
								<TranslateTransform />
							</TransformGroup>
						</LinearGradientBrush.RelativeTransform>
						<GradientStop Color="#7F1059B2" Offset="0" />
						<GradientStop Offset="1" />
					</LinearGradientBrush>
				</Border.Background>
				<Grid>
					<TextBlock VerticalAlignment="Center" Text="{Binding Name}" TextAlignment="Left" Padding="20,0,0,0" Foreground="#fff" TextWrapping="Wrap" />
				</Grid>
			</Border>
		</DataTemplate>
	</ItemsControl.ItemTemplate>
	<ItemsControl.ItemsPanel>
		<ItemsPanelTemplate>
			<StackPanel />
		</ItemsPanelTemplate>
	</ItemsControl.ItemsPanel>
</ItemsControl>

public class ItemsControlTest : MonoBehaviour
{
    void Start()
    {
        var gui = GetComponent<NoesisGUIPanel>();
        var root = gui.GetRoot<Grid>();
        var itemsControl = root.FindName<ItemsControl>("BlueTeam");
        itemsControl.MouseLeftButtonDown += this.OnMouseLeftButtonDown;
    }

    void OnMouseLeftButtonDown(BaseComponent sender, MouseButtonEventArgs e)
    {
        // Use e.source to know which element in your DataTemplate was clicked

        // You can also get the data item associated by calling GetDataContext() on
        // the DataTemplate root element
    }
}

    [Noesis.Extended]
        public class PlayerData : BaseComponent
        {
                public PlayerData(string name, byte team = 0x0)
                {
                        this._name = name;
                        this.team = team;
                }

                private string _name = "";
                public byte team = 0x0;
                public int _kills = 0;
                public int _deaths = 0;
                public int _assists = 0;
                public int _ping = 0;
                public string hexColor = "#B2000000";
                public string Name
                {
                        get { return _name; }
                        set
                        {
                                if (_name != value)
                                {
                                        _name = value;
                                        NotifyPropertyChanged("Name");
                                }
                        }
                }
}

Noesis.Collection collBlueTeam = new Noesis.Collection();
collBlueTeam.Add(new PlayerData("Jane Smith"));
icBlueTeam = FindName<ItemsControl>("BlueTeam");
icBlueTeam.SetItemsSource(collBlueTeam);


icBlueTeam.MouseLeftButtonUp += icBlueTeam_MouseLeftButtonUp;

 void icBlueTeam_MouseLeftButtonUp(BaseComponent sender, MouseButtonEventArgs e)
 {
 //Not sure how to get access to the underlyin PlayerData.
 }

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ItemsControl x:Name="ic" Width="200" Height="200" Background="WhiteSmoke">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border x:Name="DataItemRoot"
                    Grid.ColumnSpan="2"
                    Background="Silver"
                    BorderBrush="Gray"
                    BorderThickness="1"
                    CornerRadius="2"
                    Padding="2"
                    Margin="1">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Ellipse Width="16" Height="16" Fill="{Binding Color}"/>
                        <TextBlock Grid.Column="1" Text="{Binding DisplayName}" Margin="2,0,0,0" VerticalAlignment="Center"/>
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

using UnityEngine;
using System.Collections;
using Noesis;

[Extended]
public class DataItem : BaseComponent
{
    // I don't add here the NotifyPropertyChange for simplicity
    // because I won't change this properties

    public string DisplayName { get; set; }
    public SolidColorBrush Color { get; set; }
}

public class ItemsControlTest : MonoBehaviour
{
    void Start()
    {
        var gui = GetComponent<NoesisGUIPanel>();
        var root = gui.GetRoot<Grid>();

        var itemsControl = root.FindName<ItemsControl>("ic");
        itemsControl.MouseLeftButtonDown += this.OnMouseLeftButtonDown;

        Collection items = new Collection();
        items.Add(new DataItem { DisplayName = "John", Color = Brushes.Red() });
        items.Add(new DataItem { DisplayName = "Peter", Color = Brushes.Orange() });
        items.Add(new DataItem { DisplayName = "Mike", Color = Brushes.Gold() });
        items.Add(new DataItem { DisplayName = "Andrew", Color = Brushes.GreenYellow() });
        items.Add(new DataItem { DisplayName = "Robert", Color = Brushes.DodgerBlue() });

        itemsControl.SetItemsSource(items);
    }

    void OnMouseLeftButtonDown(BaseComponent sender, MouseButtonEventArgs e)
    {
        // Use e.source to know which element in your DataTemplate was clicked
        FrameworkElement clicked = e.source.As<FrameworkElement>();

        // Find DataTemplate root element
        FrameworkElement root = clicked.FindName<FrameworkElement>("DataItemRoot");
        if (root != null)
        {
            // Get the data item associated by calling GetDataContext() on the root
            DataItem item = root.GetDataContext().As<DataItem>();

            // Do something to item...
            Debug.Log(item.DisplayName);
        }
    }
}