Image inside ListBox.ItemTemplate how to change opacity on tap - c#

I have created the following Listbox.Itemtemplate:
<ListBox.ItemTemplate>
<DataTemplate>
<Image Name="ChannelImage" Source="{Binding ImageUrl}" Width="56" Height="56" Margin="0,0,28,0" Tap="ChannelImage_Tap" Opacity="0.5"/>
</DataTemplate>
</ListBox.ItemTemplate>
By default the image inside the ItemTemplate should have opacity 0.5, now I want to "Highlight" (set opacity to 1.0) the image when the user taps the image.
I made this with the following code (Tap="ChannelImage_Tap"):
private void ChannelImage_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
((Image)sender).Opacity = 1.0;
}
But I don't know how to set the image back to opacity 0.5 when the user taps another image.

Do the following code in ListBox selection_change event instead image_tap
//I assume your listbox selection changed is ListBoxImage_Selectionchange
//ListBoxImage is your ListBox name
// LastSelectedIndex define globally
int LastSelectedIndex =0;
private void ListBoxImage_Selectionchange(object sender, SelectionChangedEventArgs e)
{
if (ListBoxImage.SelectedIndex == -1)
return;
if(LastSelectedIndex>0)
{
ListBoxItem lastItem =this.ListImage.ItemContainerGenerator.ContainerFromIndex(LastSelectedIndex) as ListBoxItem;
Image lastImage = FindFirstElementInVisualTree<Image>(lastItem);
lastImage.Opacity = 0.5;
}
ListBoxItem selectedItem = this.ListImage.ItemContainerGenerator.ContainerFromIndex(ListImage.SelectedIndex) as ListBoxItem;
Image selectedImage = FindFirstElementInVisualTree<Image>(selectedItem);
selectedImage.Opacity = 1.0;
LastSelectedIndex = ListBoxImage.SelectedIndex;
ListImage.SelectedIndex = -1;
}
private T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
var count = VisualTreeHelper.GetChildrenCount(parentElement);
if (count == 0)
return null;
for (int i = 0; i < count; i++)
{
var child = VisualTreeHelper.GetChild(parentElement, i);
if (child != null && child is T)
{
return (T)child;
}
else
{
var result = FindFirstElementInVisualTree<T>(child);
if (result != null)
return result;
}
}
return null;
}

Related

How to get ToolTip from WPF Data Grid Column Header (DataGridTemplateColumn) in code?

I set Tooltip for a DataGridTemplateColumn like this:
<DataGridTemplateColumn.Header>
<TextBlock Text="Current" ToolTip="Price" ToolTipService.InitialShowDelay="0" ToolTipService.Placement="Top" ToolTipService.ShowDuration="999999" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
</DataGridTemplateColumn.Header>
How can I get the tooltip data in code?
Put the TextBlock in the HeaderTemplate of the column:
<DataGridTemplateColumn x:Name="col">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<TextBlock Text="Current" ToolTip="Price" ToolTipService.InitialShowDelay="0" ToolTipService.Placement="Top"
ToolTipService.ShowDuration="999999" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
</DataGridTemplateColumn>
...and find it in using the VisualTreeHelper:
private void Button_Click(object sender, RoutedEventArgs e)
{
var columns = FindVisualChildren<System.Windows.Controls.Primitives.DataGridColumnHeader>(dataGrid)?
.ToArray();
if (columns != null)
{
int columnIndex = 1;
if (columns.Length > columnIndex)
{
var textBlock = FindVisualChildren<TextBlock>(columns[columnIndex])?
.FirstOrDefault();
if (textBlock != null)
{
string tooltip = textBlock.ToolTip?.ToString();
//...
}
}
}
}
private static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
if (child is T t)
yield return t;
foreach (T childOfChild in FindVisualChildren<T>(child))
yield return childOfChild;
}
}
My guess from your comment on #mm8 answer:
private void DataGrid_Sorting( object sender, DataGridSortingEventArgs e )
{
var myHeaderItem = e.Column.Header as TextBlock;
Console.WriteLine(myHeaderItem?.ToolTip.ToString());
}

ListView - Set focus on a control in a new row (UWP)

I have a ListView backed by an ObservableCollection. The user can add a new row, where in code I add a new object to the collection: array.Add(obj).
Now what I'd like to do is give focus to a TextBox in the new row. The problem is that I believe I need to wait until the UI is created, and I don't know of an event that will let me know when the new row is ready.
I've tried getting the new container and a reference to TextBox in ListView_SelectionChanged, but I was getting null return values on the new row.
I've tried using ListViewItem.Loaded, but this doesn't seem to be called for recycled rows.
I also tried ListViewItem.GotFocus, but this wasn't called after adding a new row in code.
If I knew when the controls on the ListViewItem were ready, I could then find the TextBox and set its focus.
Maybe I'm making this harder than it needs to be, but I'm not sure how to proceed.
I'm answering my own question. Below is what I came up with.
Xaml: (add two event handlers to Grid)
<DataTemplate x:Key="MyTemplate" x:DataType="model:Card">
<Grid GotFocus="ListViewGrid_GotFocus" DataContextChanged="ListViewGrid_DataContextChanged">
<StackPanel Orientation="Horizontal">
<TextBox Name="Text1" Text="{x:Bind Text1}" />
</StackPanel>
</Grid>
</DataTemplate>
Code:
MyListView.Items.VectorChanged += ListViewItems_VectorChanged; // in constructor
private void AddRow_Click(object sender, RoutedEventArgs e) {
card = ....
_newRowCard = card;
_array.Add(card);
}
private void ListViewItems_VectorChanged(IObservableVector<object> sender, IVectorChangedEventArgs #event) {
// If new row added, at this point we can safely select and scroll to new item
if (_newRowCard != null) {
MyListView.SelectedIndex = MyListView.Items.Count - 1; // select row
MyListView.ScrollIntoView(MyListView.Items[MyListView.Items.Count - 1]); // scroll to bottom; this will make sure new row is visible and that DataContextChanged is called
}
}
private void ListViewGrid_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args) {
// If new row added, at this point the UI is created and we can set focus to text box
if (_newRowCard != null) {
Grid grid = (Grid)sender;
Card card = (Card)grid.DataContext; // might be null
if (card == _newRowCard) {
TextBox textBox = FindControl<TextBox>(grid, typeof(TextBox), "Text1");
if (textBox != null) textBox.Focus(FocusState.Programmatic);
_newRowCard = null;
}
}
}
private void ListViewGrid_GotFocus(object sender, RoutedEventArgs e) {
// If user clicks on a control in the row, select entire row
MyListView.SelectedItem = (sender as Grid).DataContext;
}
public static T FindControl<T>(UIElement parent, Type targetType, string ControlName) where T : FrameworkElement {
if (parent == null) return null;
if (parent.GetType() == targetType && ((T)parent).Name == ControlName) return (T)parent;
int count = VisualTreeHelper.GetChildrenCount(parent);
for (int i = 0; i < count; i++) {
UIElement child = (UIElement)VisualTreeHelper.GetChild(parent, i);
T result = FindControl<T>(child, targetType, ControlName);
if (result != null) return result;
}
return null;
}

Wp8:Not able to get checkBox in listbox

I am not able to find checkbox in listbox xaml:
<ListBox x:Name="my_list" Grid.Row="0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<CheckBox x:Name="cbx_state" Tag="{Binding}"/>
<TextBlock x:Name="txt_string" Text="{Binding}" VerticalAlignment="Center" FontSize="34" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
I am trying to get cbk_state so that i can set its checked property.The function i used to get the checkbox is
private void GetItemsRecursive(DependencyObject lb)
{
var childrenCount = VisualTreeHelper.GetChildrenCount(lb);
for (int i = 0; i < childrenCount; i++)
{
var child = VisualTreeHelper.GetChild(lb, i);
if (child is ListBoxItem)
{
MessageBox.Show(child.GetType().ToString());
return;
}
GetItemsRecursive(child);
}
}
The problem is that i am getting ChildrenCount as zero everytime.
I have gone through several methods but no as such of use.Also tried
this
but here i am not getting ItemContainerGenerator for listBox.
I am new to wp8 programming plz help.Thanks
Are you asking about getting the Checked property of the Checkbox?
Is this the one you were looking for?. Sample code to find the Children control within a Parent using VisualTreeHelper:
private ChildControl FindVisualChild<ChildControl>(DependencyObject DependencyObj)
where ChildControl : DependencyObject
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(DependencyObj); i++)
{
DependencyObject Child = VisualTreeHelper.GetChild(DependencyObj, i);
if (Child != null && Child is ChildControl)
{
return (ChildControl)Child;
}
else
{
ChildControl ChildOfChild = FindVisualChild<ChildControl>(Child);
if (ChildOfChild != null)
{
return ChildOfChild;
}
}
}
return null;
}
Hi got the solution here. there is no need to set virtualization property its simple.
private void GetItemsRecursive(DependencyObject lb)
{
var childrenCount = VisualTreeHelper.GetChildrenCount(lb);
for (int i = 0; i < childrenCount; i++)
{
DependencyObject child = VisualTreeHelper.GetChild(lb, i);
if (child is CheckBox) // specific/child control
{
CheckBox targeted_element = (CheckBox)child;
targeted_element.IsChecked = true;
if (targeted_element.IsChecked == true)
{
return;
}
}
GetItemsRecursive(child);
}
}
just a bit change at DependencyObject child = VisualTreeHelper.GetChild(lb, i); instead of var child

VisualTreeHelper.GetChildrenCount return 0?

I'm using VisualTreeHelper.GetChildrenCount() to find child controls, but it always return 0.
Here is my code
<ScrollViewer x:Name="scrollViewerChannelsRecordTimeData">
<StackPanel x:Name="channelsRecordTimeData">
<ItemsControl x:Name="channelRecordTimeItems" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="hoursLines">
//Some Controls here
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
C# code:
channelRecordTimeItems.ItemContainerGenerator.StatusChanged += ChannelRecordTimeItemsStatusChangedEventHandler;
private void ChannelRecordTimeItemsStatusChangedEventHandler(Object sender, EventArgs e)
{
if (channelRecordTimeItems.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
{
if (channelRecordTimeItems.HasItems)
{
DependencyObject dependencyObject = null;
Grid gridHighlightRecordData = null;
for (int i = 0; i < channelRecordTimeItems.Items.Count; i++)
{
dependencyObject = channelRecordTimeItems.ItemContainerGenerator.ContainerFromIndex(i); //dependencyObject != null
if (dependencyObject != null)
{
Grid hoursLines = FindElement.FindChild<Grid>(dependencyObject, "hoursLines"); //hoursLines = null
}
}
}
}
}
public static T FindChild<T>(DependencyObject parent, string childName)
where T : DependencyObject
{
// Confirm parent and childName are valid.
if (parent == null) return null;
T foundChild = null;
int childrenCount = VisualTreeHelper.GetChildrenCount(parent); //Return 0 here
for (int i = 0; i < childrenCount; i++)
{
var child = VisualTreeHelper.GetChild(parent, i);
// If the child is not of the request child type child
T childType = child as T;
if (childType == null)
{
// recursively drill down the tree
foundChild = FindChild<T>(child, childName);
// If the child is found, break so we do not overwrite the found child.
if (foundChild != null) break;
}
else if (!string.IsNullOrEmpty(childName))
{
var frameworkElement = child as FrameworkElement;
// If the child's name is set for search
if (frameworkElement != null && frameworkElement.Name == childName)
{
// if the child's name is of the request name
foundChild = (T)child;
break;
}
}
else
{
// child element found.
foundChild = (T)child;
break;
}
}
return foundChild;
}
VisualTreeHelper.GetChildrenCount() always return 0,
The code for constructing for items here
List<ChannelRecordTimeItemData> listChannelRecordTimeItemData = new List<ChannelRecordTimeItemData>();
for(int i = 0; i < 5; i++)
{
ChannelRecordTimeItemData item = new ChannelRecordTimeItemData();
listChannelRecordTimeItemData.Add(ChannelRecordTimeItemData);
}
channelRecordTimeItems.ItemsSource = listChannelRecordTimeItemData;
channelRecordTimeItems.Items.Refresh();
I have searched on forum and internet, but i can not solve it, someone can help me?
Many thanks!
T&T
The problem is that when the ItemContainerGenerator signals the ContainersGenerated status, the container (a ContentPresenter) has been created, but not yet loaded. Especially the data template has not yet been applied to the ContentPresenter, hence there is nothing in the visual tree.
You may get around this by adding a Loaded event handler when looping over the generated containers.
private void ItemContainerGeneratorStatusChanged(object sender, EventArgs e)
{
if (itemsControl.ItemContainerGenerator.Status
== GeneratorStatus.ContainersGenerated)
{
var containers = itemsControl.Items.Cast<object>().Select(
item => (FrameworkElement)itemsControl
.ItemContainerGenerator.ContainerFromItem(item));
foreach (var container in containers)
{
container.Loaded += ItemContainerLoaded;
}
}
}
private void ItemContainerLoaded(object sender, RoutedEventArgs e)
{
var element = (FrameworkElement)sender;
element.Loaded -= ItemContainerLoaded;
var grid = VisualTreeHelper.GetChild(element, 0) as Grid;
...
}
If your using Caliburn.Micro this will help you.
For your Viewmodel the base Class should be Screen then only VisualTreeHelper.GetChildrenCount() give no.of childs.(because Screen will Activate all childs
or
otherwise (FrameworkElement)YourParent).ApplyTemplate() method

How to access a specific item in a Listbox with DataTemplate?

I have a ListBox including an ItemTemplate with 2 StackPanels.
There is a TextBox in the second StackPanel i want to access.
(Change it's visibility to true and accept user input)
The trigger should be the SelectionChangedEvent. So, if a user clicks on an ListBoxItem, the TextBlock gets invisible and the TextBox gets visible.
XAML CODE:
<ListBox Grid.Row="1" Name="ContactListBox" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ItemsSource="{Binding Contacts}" Margin="0,36,0,0" SelectionChanged="ContactListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Edit Contact" Click="ContactMenuItem_Click"/>
<toolkit:MenuItem Header="Delete Contact" Click="ContactMenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<Grid>
<Rectangle Fill="{StaticResource PhoneAccentBrush}"
Width="72" Height="72">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Images/defaultContactImage.png" Stretch="UniformToFill"/>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<StackPanel>
<TextBox Text="{Binding Name}" TextWrapping="Wrap" Visibility="Collapsed"/>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" />
<TextBlock Text="{Binding Number}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextAccentStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I guess there are several ways to solve this, but nothing I tried worked.
My current approach looks like this
private void ContactListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBoxItem listBoxItem = ContactListBox.SelectedItem as ListBoxItem;
DataTemplate listBoxTemplate = listBoxItem.ContentTemplate;
// How to access the DataTemplate content?
StackPanel outerStackPanel = listBoxTemplate.XXX as StackPanel;
StackPanel innerStackPanel = outerStackPanel.Children[1] as StackPanel;
TextBox nameBox = innerStackPanel.Children[0] as TextBox;
TextBlock nameBlock = innerStackPanel.Children[1] as TextBlock;
nameBox.Visibility = System.Windows.Visibility.Visible;
nameBlock.Visibility = System.Windows.Visibility.Collapsed;
}
Thank you for your help guys!! Finally i got it. Solved the problem with the VisualTreeHelper. What a great function ^^
private void ContactListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (ContactListBox.SelectedIndex == -1)
return;
currentSelectedListBoxItem = this.ContactListBox.ItemContainerGenerator.ContainerFromIndex(ContactListBox.SelectedIndex) as ListBoxItem;
if (currentSelectedListBoxItem == null)
return;
// Iterate whole listbox tree and search for this items
TextBox nameBox = helperClass.FindDescendant<TextBox>(currentSelectedListBoxItem);
TextBlock nameBlock = helperClass.FindDescendant<TextBlock>(currentSelectedListBoxItem);
helperFunction
public T FindDescendant<T>(DependencyObject obj) where T : DependencyObject
{
// Check if this object is the specified type
if (obj is T)
return obj as T;
// Check for children
int childrenCount = VisualTreeHelper.GetChildrenCount(obj);
if (childrenCount < 1)
return null;
// First check all the children
for (int i = 0; i < childrenCount; i++)
{
DependencyObject child = VisualTreeHelper.GetChild(obj, i);
if (child is T)
return child as T;
}
// Then check the childrens children
for (int i = 0; i < childrenCount; i++)
{
DependencyObject child = FindDescendant<T>(VisualTreeHelper.GetChild(obj, i));
if (child != null && child is T)
return child as T;
}
return null;
}
With this edited function you can also search for control by name (its converted from VB.NET):
public T FindDescendantByName<T>(DependencyObject obj, string objname) where T : DependencyObject
{
string controlneve = "";
Type tyype = obj.GetType();
if (tyype.GetProperty("Name") != null) {
PropertyInfo prop = tyype.GetProperty("Name");
controlneve = prop.GetValue((object)obj, null);
} else {
return null;
}
if (obj is T && objname.ToString().ToLower() == controlneve.ToString().ToLower()) {
return obj as T;
}
// Check for children
int childrenCount = VisualTreeHelper.GetChildrenCount(obj);
if (childrenCount < 1)
return null;
// First check all the children
for (int i = 0; i <= childrenCount - 1; i++) {
DependencyObject child = VisualTreeHelper.GetChild(obj, i);
if (child is T && objname.ToString().ToLower() == controlneve.ToString().ToLower()) {
return child as T;
}
}
// Then check the childrens children
for (int i = 0; i <= childrenCount - 1; i++) {
string checkobjname = objname;
DependencyObject child = FindDescendantByName<T>(VisualTreeHelper.GetChild(obj, i), objname);
if (child != null && child is T && objname.ToString().ToLower() == checkobjname.ToString().ToLower()) {
return child as T;
}
}
return null;
}
I can't give you a complete answer...
But I think you can use the VisualTreeHelper to iterate through the children of any control
http://blogs.msdn.com/b/kmahone/archive/2009/03/29/visualtreehelper.aspx
However, for the effect you are looking for, then I think using the SelectedItem Style might be a better solution - e.g. see this article - http://joshsmithonwpf.wordpress.com/2007/07/30/customizing-the-selected-item-in-a-listbox/
Use ItemContainerGenerator.
private void ContactListBox_SelectionChanged
(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count == 1)
{
var container = (FrameworkElement)ContactListBox.ItemContainerGenerator.
ContainerFromItem(e.AddedItems[0]);
StackPanel sp = container.FindVisualChild<StackPanel>();
TextBox tbName = (TextBox) sp.FindName("tbName");
TextBlock lblName = (TextBlock)sp.FindName("lblName");
TextBlock lblNumber = (TextBlock)sp.FindName("lblNumber");
}
}
Since DataTemplate is a generic template that could be used many times in the code, there is no way to access it by name (x:Name="numberTextBox").
I solved similar problem to this by making a collection of Controls - while Listbox was populating I add Textbox control to the collection.
string text = myCollectionOfTextBoxes[listbox.SelectedIndex].Text;
Till I found a better soultion - Tag property. In your ListboxItem you bind Tag property to the name
Tag="{Binding Name}"
and the to access it
ListBoxItem listBoxItem = ContactListBox.SelectedItem as ListBoxItem;
string name = listBoxItem.Tag.ToString();

Categories