Help with ItemsControl Event Handler
I'm not sure how to go about having an event handler on a child item of an ItemsControl using a DataTemplate.
For example how could I make it where when a user clicks an item in the stackpanel it fires off an event.
Here is my xaml for the ItemsControl:
For example how could I make it where when a user clicks an item in the stackpanel it fires off an event.
Here is my xaml for the ItemsControl:
Code: Select all
<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>
-
-
sfernandez
Site Admin
- Posts: 3203
- Joined:
Re: Help with ItemsControl Event Handler
Hi,
You can add an event handler to your ItemsControl.MouseLeftButtonDown event:
You can add an event handler to your ItemsControl.MouseLeftButtonDown event:
Code: Select all
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
}
}
Re: Help with ItemsControl Event Handler
Hmm I'm not quite following I setup the event handler for the mouse click but I'm still not sure how to get the underlying BaseComponent.
Inside the event handler I tried things like e.source.As<PlayerData>() but that just returns null. How do I go about getting the underlyine PlayerData thanks in advance.
Code: Select all
[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.
}
-
-
sfernandez
Site Admin
- Posts: 3203
- Joined:
Re: Help with ItemsControl Event Handler
The following example finds the associated data item when clicking in an ItemsControl item:
Hope this helps 
Code: Select all
<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>
Code: Select all
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);
}
}
}

Who is online
Users browsing this forum: Ahrefs [Bot] and 15 guests