I have 2 listboxes in my app that use
<Window.Resources>
<ItemsPanelTemplate x:Key="WrapPanelTemplate">
<WrapPanel Width="290"/>
</ItemsPanelTemplate>
<DataTemplate x:Key="ButtonItemTemplate">
<Button Content="{Binding Path=Name}" Width="120" Margin="3,2,3,2" />
</DataTemplate>
</Window.Resources>
Everything looks great but when I try to click on them they do not select a new item. I have SelectedItem bound to a property on my view-model but whenever I select a new item the set method does not happen. I have a regular listbox that is hooked up in the same way and does work. Here is the implementation of the custom listbox:
<ListBox Height="284" HorizontalAlignment="Left" x:Name="faveProgramsButtons"
ItemsSource="{Binding Path=FavoriteAppList}"
SelectedItem="{Binding Path=FavoriteAppList_SelectedApp}" VerticalAlignment="Top"
Width="281" ItemsPanel="{StaticResource WrapPanelTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemTemplate="{StaticResource ButtonItemTemplate}">
</ListBox>
Thanks!
The problem is that the Button is swallowing the mouse click so the ListBoxItem in the ListBox never receives it, hence it is never selected. If you want to be able to select the items when you click the Button you can try using a ToggleButton instead and bind IsChecked to IsSelected
<DataTemplate x:Key="ButtonItemTemplate">
<ToggleButton Content="{Binding Path=Name}" Width="120" Margin="3,2,3,2"
IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}},
Path=IsSelected,
Mode=TwoWay}"/>
</DataTemplate>
You could also achieve this with a little code behind or an attached behavior.
ButtonItemTemplate
<DataTemplate x:Key="ButtonItemTemplate">
<Button Content="{Binding Path=Name}" Width="120" Margin="3,2,3,2"
Click="TemplateButton_Click"/>
</DataTemplate>
Code Behind
private void TemplateButton_Click(object sender, RoutedEventArgs e)
{
Button clickedButton = sender as Button;
ListBoxItem listBoxItem = GetVisualParent<ListBoxItem>(clickedButton);
if (listBoxItem != null)
{
listBoxItem.IsSelected = true;
}
}
public static T GetVisualParent<T>(object childObject) where T : Visual
{
DependencyObject child = childObject as DependencyObject;
// iteratively traverse the visual tree
while ((child != null) && !(child is T))
{
child = VisualTreeHelper.GetParent(child);
}
return child as T;
}
Related
I have a wpf application in c# and my problem is now I have a Listbox with bindings and my question is how can I get the text from the textbox in the Listbox?
My Listbox XAML:
<ListBox x:Name="chats_lb_friends" ItemsSource="{Binding Friends_pic}" Height="870" Width="280" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF535664" FontSize="18" FontFamily="/Nextopia Launcher v.2.0;component/fonts/#Mont DEMO" FontWeight="Bold" IsSynchronizedWithCurrentItem="False" MinWidth="280" SelectionChanged="chats_lb_friends_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="chats_lb_friends_stackpanel" Orientation="Horizontal">
<Ellipse x:Name="chats_lb_friends_img" Width="25" Height="25" Stroke="{Binding status}" StrokeThickness="2">
<Ellipse.Fill>
<ImageBrush Stretch="Fill" ImageSource="{Binding imagePath}"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock x:Name="chats_lb_friends_txt" Text="{Binding username}" Margin="5,0,0,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What do I want:
ListBoxItem MyItem = chats_lb_friends.SelectedItem as ListBoxItem;
if(MyItem != null)
{
StackPanel sp = MyItem.Content as StackPanel;
if(sp != null && sp.Children.Count > 0)
{
TextBlock textBlock = sp.Children[0] as TextBlock;
if(textBlock != null)
{
string text = textBlock.Text;
}
}
}
But this is not working have anyone an idea why?
Thanks in the advance and sorry for my English
Assuming you have a PersonViewModel with a public string property username.
The itemssource of your lisbox doesn't seem to be bound. But let's assume you can have a window viewmodel with 2 public properties:
public ObservableCollection<PersonViewModel> People {get;set;} = new ObservableCollection<PersonViewModel>()
public PersonViewModel SelectedPerson {get;set;}
So you can bind SelectedItem of the listBox to SelectedPerson
<ListBox SelectedItem="{Binding SelectedPerson" ItemsSource="{Binding People}"
Then you can do:
var name = SelectedPerson.username;
You will also want some null checking maybe
var name = SelectedPerson?.username ?? "";
You should implement inotifypropertychanged on all viewmodels and you will also likely to want to raise notifypropertychanged from the setters of your viewmodel properties.
More about working with selected items using mvvm here:
https://social.technet.microsoft.com/wiki/contents/articles/30564.wpf-uneventful-mvvm.aspx#Select_From_List_IndexChanged
I have a problem. I have a list view in my xaml:
<ListView
Margin="0 10 0 0"
DockPanel.Dock="Top"
ItemsSource="{Binding Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
BorderThickness="0"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
<ListView.ItemTemplate>
<DataTemplate>
<local:ItemView/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My item view looks like this (which is in UserControl tag):
<buttons:MyButton
cal:Message.Attach="DoSomething">
<buttons:MyButton.Visual>
<DockPanel
HorizontalAlignment="Left">
<local:Image
DockPanel.Dock="Left"
CountryCode="{Binding Source}"/>
<TextBlock
DockPanel.Dock="Left"
VerticalAlignment="Center"
Padding="15 0 0 0"
FontFamily="{StaticResource MediumFont}"
FontSize="16"
Foreground="{StaticResource DarkText}"
Text="{Binding TextValue}" />
</DockPanel>
</buttons:MyButton.Visual>
</buttons:MyButton>
Now the problem is that when i click on the list item, my selectedItem is not set. It always null unless I click on the very edge of the list item, then it sets the selected value, but i have to click again in the middle of the item to call the action I want.
My question is: How can I make my list view item on click (on the whole item plot) set the selected item and call the action I want?
P.S. I am using Caliburn Micro if this helps...
If you don't mind using code behind or a view model, you could do something like this:
<ListView.ItemTemplate>
<DataTemplate>
<Button BorderBrush="Transparent" Background="Transparent" Focusable="False">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding DataContext.ClickCommand, ElementName=ListViewName}" CommandParameter="{Binding}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<!-- YOUR TEMPLATE HERE -->
<Button.Template>
</DataTemplate>
</ListView.ItemTemplate>
This is a view/control related thing. You could handle the Click event for the Button and explicitly set the IsSelected property of the parent ListViewItem container like this:
private void OnClick(object sender, RoutedEventArgs e)
{
var listViewItem = FindParent<ListViewItem>(sender as DependencyObject);
if (listViewItem != null)
listViewItem.IsSelected;
}
private static T FindParent<T>(DependencyObject dependencyObject) where T : DependencyObject
{
var parent = VisualTreeHelper.GetParent(dependencyObject);
if (parent == null) return null;
var parentT = parent as T;
return parentT ?? FindParent<T>(parent);
}
XAML:
<ListView.ItemTemplate>
<DataTemplate>
<local:ItemView ButtonBase.Click="OnClick"/>
</DataTemplate>
</ListView.ItemTemplate>
Or you could set the SelectedItem property of the ListView to the DataContext of the element:
private void OnClick(object sender, RoutedEventArgs e)
{
FrameworkElement fe = sender as FrameworkElement;
if (fe != null)
listView.SelectedItem = fe.DataContext;
}
XAML:
<ListView x:Name="listView" ... />
I know this is an old question, but what I think you were looking for is something like this
<ListView ItemsSource="{Binding ListViewItemTemplates}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button x:Name="StartPage">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cal:Action.Target>
<cal:ActionMessage MethodName="StartPage">
<cal:Parameter Value="{Binding}" />
</cal:ActionMessage>
</cal:Action.Target>
</i:EventTrigger>
</i:Interaction.Triggers>
<Button.Template>
<ControlTemplate>
<StackPanel Width="210" Orientation="Horizontal">
<Image Source="{Binding Path=Source}"
Stretch="None" />
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView/>
Then you can easily bind this with the following
private ObservableCollection<ListViewItemTemplate> listViewItemTemplates;
public ObservableCollection<ListViewItemTemplate> ListViewItemTemplates
{
get => listViewItemTemplates;
set
{
listViewItemTemplates = value;
this.OnPropertyChanged("ListViewItemTemplates");
}
}
Where ListviewItemTemplate is a class consisting of two strings Name and Source
I have some ListViewItems from a collection, I have created a DataTemplate so that each of ListViewItem has a Button as a child control:
<Window.Resources>
<DataTemplate x:Key="ItemTemplate_AwesomeTemplate">
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<Button Content="Awesome Button" Click="Awesome_Button_Click" HorizontalContentAlignment="Center" VerticalAlignment="Bottom" FontWeight="Bold" Foreground="Black"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<ListView x:Name="AwesomeListView" HorizontalAlignment="Left" Height="577" VerticalAlignment="Top" Width="934" ScrollViewer.HorizontalScrollBarVisibility="Visible" Foreground="Black" Margin="10,10,0,0">
<ListView.View>
<GridView>
<GridViewColumn Header="AwesomeHeader" Width="250" CellTemplate="{StaticResource ItemTemplate_AwesomeTemplate}"/>
</GridView>
</ListView.View>
</ListView>
When I click a certain Button, is there a way to change the IsSelected property of the ListViewItem that contains the clicked Button?
To change the IsSelected property of the ListViewItem that contains the clicked Button you should use the DataContext to find the item like this:
private void Awesome_Button_Click(object sender, RoutedEventArgs e)
{
var item = (sender as Button).DataContext;
int index = AwesomeListView.Items.IndexOf(item);//find the index of the item that contains the clicked button
AwesomeListView.SelectedItem = AwesomeListView.Items[index];//set the AwesomeListView's SelectedItem to item that contains the clicked button
}
I am building a WPF application with MVVM architecture. In one form I have 2 listboxes and I want to perform filter based search. I am using a common search textbox, so I have to differentiate the search based on which listbox is selected. Please find my sample listbox below:
<HeaderedContentControl Header="Visible Objects:" Height="120" Width="250" Margin="20,20,20,0">
<ListBox Name="lstObjects" Height="100" Margin="5" ItemsSource="{Binding ProfileObjTypeToBind, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="chkbxVisibleObjects" Grid.Column="1"
Content="{Binding Path=Value}" IsChecked="{Binding Path=flag,Mode=TwoWay}">
</CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</HeaderedContentControl>
<HeaderedContentControl Header="User Groups to View:" Height="120" Width="250" Margin="20,10,20,10">
<ListBox Name="lstGroups" Height="100" Margin="5" ItemsSource="{Binding ProfileUserGrpToBind, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="chkAllowedGroups" Content="{Binding Path=GroupName}"
IsChecked="{Binding Path=flag,Mode=TwoWay}">
</CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</HeaderedContentControl>
All I want to do is identify the listbox selected and perform the filtering based on text entered in textbox. Please help me
Thanks a lot in advance.
You can't have a selected ListBox AND be able to write stuff to a TextBox. You can save the reference to your last ListBox though using SelectionChanged or some other method
private ListBox SelectedListBox = null;
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
SelectedListBox = (sender as ListBox);
}
once you have a reference to your last selected ListBox you can add TextChanged event to your TextBox:
private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
if (SelectedListBox == null)
return;
string searchText = (sender as TextBox).Text;
SelectedListBox.Items.Filter = (i) => { return ((string)i).Contains(searchText); }; // Or any other condition required
}
I need help to get Selected list view item details, when context menu assigned to list view items is clicked.
<ListView.Resources>
<ContextMenu x:Key="GvRowMenu" ItemsSource="{Binding ContextMenuItems}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding IconPath}"></Image>
<TextBlock Text="{Binding Name}"></TextBlock>
<MenuItem
Click="MenuItem_Click"
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=DataContext.RunCommand}" />
This is a click event code
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
//what needs to de here?
}
I wrote this piece of code in my view model, but it doesnt trigger on execute method
RunCommand = new DelegateCommand<object>(OnRunCommand, CanRunCommand);
private void OnRunCommand(object obj)
{
// use the object here...
}
private bool CanRunCommand(object obj)
{
return true;
}
Let me know, how can I handle this situation. Any examples related to same will be appreciated.
Thanks
you are mixing you methods... you can run an event or you can use a command, but not so much both together.
what you want is to bind the command:
<MenuItem Command="{Binding DataContext.RunCommand}" />
there are many wonderfull sources of info out there... here is one.
Thanks..!
Well, below piece of code worked for me.
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
MenuItem menuItem = (MenuItem)e.Source;
ContextMenu contextMenu = menuItem.CommandParameter as ContextMenu;
ListViewItem item = (ListViewItem)contextMenu.PlacementTarget;
var x = ((myViewModel)(item.Content)).myModel;
//'x' gives all required data of list view item
}
This is my XAML
<ListView.Resources>
<ContextMenu x:Key="GvRowMenu" ItemsSource="{Binding ContextMenuItems}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImagePath}"/>
<TextBlock Text="{Binding Name}"/>
<MenuItem Click="MenuItem_Click"
CommandParameter="{Binding
RelativeSource={RelativeSource
AncestorType={x:Type ContextMenu}}}"/>
</StackPanel>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</ListView.Resources>