<HierarchicalDataTemplate x:Key="SchemTemplate">
<TextBlock Text="{Binding Path=path}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="SchemesTemplate">
<TreeViewItem TextBlock.FontStyle="Italic"
Header="{Binding name}"
ItemsSource="{Binding schemes}"
ItemTemplate="{StaticResource SchemTemplate}" />
</HierarchicalDataTemplate>
<DataTemplate x:Key="ProjectTemplate">
<TreeView>
<TreeViewItem Header="{Binding Path=name}"
ItemsSource="{Binding schemes}"
ItemTemplate="{StaticResource SchemesTemplate}">
</TreeViewItem>
</TreeView>
</DataTemplate>
using:
<ListBox Style="{StaticResource ListProjectsStyle}"
x:Name="projects"
Grid.Row="0" Grid.Column="0"
ItemsSource="{Binding projects_models, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ItemTemplate="{StaticResource ProjectTemplate}"
SelectedItem="{Binding active_project, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</ListBox>
When I click right mouse button over TreeView then ListBox's SelectedItem changed, but left click does this. Left click puts the focus on TreeView or expand TreeView items. How can I change focus on ListBox when focus is on TreeView?
Solution:
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource ListBoxItem}">
<EventSetter Event="ListBoxItem.PreviewMouseLeftButtonDown"
Handler="ListBoxItem_Select" />
</Style>
</ListBox.Resources>
private void ListBoxItem_Select(object sender, MouseEventArgs e)
{
var mouseOverItem = sender as ListBoxItem;
if (mouseOverItem != null&& e.LeftButton == MouseButtonState.Pressed)
{
mouseOverItem.IsSelected = true;
}
}
Related
I'm about to design a DropDown in WPF using XAML. If my text gets longer than the Width my DropDown element of the ComboBox is larger than the TextBox (as shown by the red arrow). Texts beeing to long are handled by an elllipsis (...).
Any ideas how to correct this?
This is my current XAML code:
<ItemsControl x:Name="ItemsControl"
ItemsSource="{Binding FilterUiModels}">
<ItemsControl.ItemTemplate>
<DataTemplate x:Name="UiModelTemplate">
<ComboBox x:Name="FilterComboBox"
ItemsSource="{Binding AvailableItems}"
SelectedItem="{Binding FilterItem}"
ScrollViewer.CanContentScroll="False"
Width="200">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="{Binding ActualWidth, ElementName=FilterComboBox}"
Text="{Binding}"
TextTrimming="CharacterEllipsis">
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Bind the Width of the Popup to the Width of the ComboBox and set the ScrollViewer.HorizontalScrollBarVisibility attached property to false to hide any horizontal scrollbar:
<ComboBox x:Name="FilterComboBox"
ItemsSource="{StaticResource localTimeList}"
SelectedItem="{Binding FilterItem}"
ScrollViewer.CanContentScroll="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Width="200">
<ComboBox.Resources>
<Style TargetType="Popup">
<Setter Property="Width" Value="{Binding ActualWidth, ElementName=FilterComboBox}"/>
</Style>
</ComboBox.Resources>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="{Binding ActualWidth, ElementName=FilterComboBox}"
Text="{Binding}"
TextTrimming="CharacterEllipsis">
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I have a multiply combobox with checkbox items
<ComboBox x:Name="cmb" IsEditable="True" IsReadOnly="True" DropDownClosed="cmb_DropDownClosed">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Content="{Binding NmColumn }" HorizontalAlignment="Stretch"
IsChecked="{Binding Path=bChecked, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Tag="{Binding IdColumn}"
/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
When I click on checkbox all is well. But if the checkbox width less than the width of combobox, when I click to the right of the checkbox, the combobox closes. how to override this behavior?
Set HorizontalContentAlignment to Stretch in ComboBox.ItemContainerStyle:
<ComboBox x:Name="cmb" IsEditable="True" IsReadOnly="True" DropDownClosed="cmb_DropDownClosed">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<CheckBox Content="{Binding NmColumn }" HorizontalAlignment="Stretch"
IsChecked="{Binding Path=bChecked, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Tag="{Binding IdColumn}"
/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
The answer by Ramin is partially good. You aslo have to remove the <StackPanel Orientation="Horizontal"> from your data template.It's him that is restricting your checkbox from expanding on all ComboboxItem width.
<ComboBox x:Name="cmb" IsEditable="True" IsReadOnly="True" DropDownClosed="cmb_DropDownClosed">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding NmColumn }" HorizontalAlignment="Stretch"
IsChecked="{Binding Path=bChecked, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Tag="{Binding IdColumn}"
/>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
All Answers did not work for me. What did the Trick was setting
HorizontalContentAlignment="Stretch"
for the CheckBox:
<ComboBox x:Name="combobox"
Background="White"
Padding="2"
Text="{Binding ElementName=DockPanelTemplateComboCheck, Path=ComboTextFilter}"
IsEditable="True"
IsReadOnly="True"
HorizontalAlignment="Stretch"
ItemsSource="{Binding ...}"
IsDropDownOpen="{Binding Path=DropOpen, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, UpdateSourceTrigger=PropertyChanged}">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Eintrag}" HorizontalContentAlignment="Stretch" Checked="CheckBox_Checked_Unchecked" Unchecked="CheckBox_Checked_Unchecked"/>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
CodeBehind:
private string combotextfilter = "<No Selection>";
public string ComboTextFilter
{
get { return combotextfilter; }
set
{
if (value != null && value.IndexOf("ComboModel") != -1) return;
combotextfilter = value;
NotifyPropertyChanged(nameof(ComboTextFilter));
}
}
private void CheckBox_Checked_Unchecked(object sender, RoutedEventArgs e)
{
switch (((ObservableCollection<ComboModel>)combobox.ItemsSource).Count(x => x.IsChecked))
{
case 0:
ComboTextFilter = "<No Selection>";
break;
case 1:
ComboTextFilter = ((ObservableCollection<ComboModel>)combobox.ItemsSource).Where(x => x.IsChecked).First().Eintrag;
break;
default:
ComboTextFilter = ((ObservableCollection<ComboModel>)combobox.ItemsSource).Where(x => x.IsChecked).Select(x => x.Eintrag).Aggregate((i, j) => i + " | " + j);
//ComboTextFilter = "<Multiple Selected>";
break;
}
NotifyPropertyChanged(nameof(C_Foreground));
}
public bool DropOpen
{
get { return dropopen; }
set { dropopen = value; NotifyPropertyChanged(nameof(ComboTextFilter)); }
}
private bool dropopen = false;
Note: This ComboBox also changes the text of the ComboBox depending on the elements selected.
We have following xaml code to display context menu and fire command when delete menu is clicked.
For the context menu item, I would like to bind command which is present in DataContext of ItemsControl. We tried with RelativeSource={RelativeSource TemplatedParent} but as the tree is created dynamically (using dataContext) it is not able to find DeleteCommand.
<Grid x:Name="MyGrid" >
<ItemsControl ItemsSource="{Binding Path=TreeRoot.Children}">
<ItemsControl.ItemTemplate>
<HierarchicalDataTemplate>
<StackPanel>
<Label Background="Black" Content="{Binding Path=DisplayText}"/>
<TreeView ItemsSource="{Binding Converter={StaticResource myCompositeNodeConverter}}" >
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:CompositeNode}" ItemsSource="{Binding Path=Children}" >
<TextBlock Text="{Binding Path=DisplayText}" Foreground="Black"></TextBlock>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:LeafNode}" ItemsSource="{Binding Path=Children}">
<TextBlock Text="{Binding Path=DisplayText}"></TextBlock>
</HierarchicalDataTemplate>
</TreeView.Resources>
<TreeView.ContextMenu>
<ContextMenu >
<MenuItem Header="Delete" Command="{Binding DeleteCommand}" />
</ContextMenu>
</TreeView.ContextMenu>
</TreeView>
</StackPanel>
</HierarchicalDataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
How do we bind DeleteCommand for context menu item to DataContext of ItemsControl?
I want to select a node of tree view on right click. I am using MVVM pattern and don't want to achieve this in code behind. Here is my XAML for tree view.
<TreeView Margin="5,0,0,5" ItemsSource="{Binding TreePads}">
<TreeView.ItemContainerStyle >
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsSelected" Value="{Binding DataContext.IsSelected, Mode=TwoWay, RelativeSource={RelativeSource Self}}" />
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}" >
<MenuItem IsEnabled="{Binding RenameMenuEnabled}" Header="Rename" Command="{Binding RenameCommand}" />
</ContextMenu>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle >
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type vm:TreePad}" ItemsSource="{Binding Members, Mode=TwoWay}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding PadName}"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
You could define a DependencyProperty. Below I have shared a sample app which uses a dependency property to achieve this.
TreeViewExtension.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace WpfApplication1
{
public static class TreeViewExtension
{
public static readonly DependencyProperty SelectItemOnRightClickProperty = DependencyProperty.RegisterAttached(
"SelectItemOnRightClick",
typeof(bool),
typeof(TreeViewExtension),
new UIPropertyMetadata(false, OnSelectItemOnRightClickChanged));
public static bool GetSelectItemOnRightClick(DependencyObject d)
{
return (bool)d.GetValue(SelectItemOnRightClickProperty);
}
public static void SetSelectItemOnRightClick(DependencyObject d, bool value)
{
d.SetValue(SelectItemOnRightClickProperty, value);
}
private static void OnSelectItemOnRightClickChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
bool selectItemOnRightClick = (bool)e.NewValue;
TreeView treeView = d as TreeView;
if (treeView != null)
{
if (selectItemOnRightClick)
treeView.PreviewMouseRightButtonDown += OnPreviewMouseRightButtonDown;
else
treeView.PreviewMouseRightButtonDown -= OnPreviewMouseRightButtonDown;
}
}
private static void OnPreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
TreeViewItem treeViewItem = VisualUpwardSearch(e.OriginalSource as DependencyObject);
if (treeViewItem != null)
{
treeViewItem.Focus();
e.Handled = true;
}
}
public static TreeViewItem VisualUpwardSearch(DependencyObject source)
{
while (source != null && !(source is TreeViewItem))
source = VisualTreeHelper.GetParent(source);
return source as TreeViewItem;
}
}
}
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mvvmhelper="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TreeView mvvmhelper:TreeViewExtension.SelectItemOnRightClick="true">
<TreeViewItem Header="One"/>
<TreeViewItem Header="Two"/>
<TreeViewItem Header="Three"/>
<TreeView.ContextMenu>
<ContextMenu>
<MenuItem Header="Menu1"/>
<MenuItem Header="Menu2"/>
</ContextMenu>
</TreeView.ContextMenu>
</TreeView>
</Grid>
</Window>
You can use interactivity
xmlns:interactive="http://schemas.microsoft.com/expression/2010/interactivity"
The xaml:
<TreeView x:Name="TreeView" HorizontalAlignment="Left" Height="373" Margin="13,15,0,0" VerticalAlignment="Top" Width="373" Background="#29292f"
Foreground="White" BorderBrush="Transparent" BorderThickness="0" ItemsSource="{Binding EmtRoot}" FontSize="24" >
<interactive:Interaction.Triggers>
<interactive:EventTrigger EventName="SelectedItemChanged">
<interactive:InvokeCommandAction Command="{Binding SelectItemCommand}" CommandParameter="{Binding ElementName=TreeView,Path=SelectedItem}"/>
</interactive:EventTrigger>
</interactive:Interaction.Triggers>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type models:EmtRootModel}" ItemsSource="{Binding Entities}">
<TextBlock Text="Root" Foreground="White" ContextMenu="{StaticResource ContextMenuLevel0}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type models:EntityModel}" ItemsSource="{Binding Slides}">
<TextBlock Text="{Binding EntityName}" Foreground="White" ContextMenu="{StaticResource ContextMenuLevel1}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type models:SlideModel}">
<StackPanel Orientation="Horizontal" ContextMenu="{StaticResource ContextMenuLevel2}">
<StackPanel.InputBindings>
<MouseBinding MouseAction="RightClick"
Command="{Binding ElementName=Emt,Path=DataContext.TreeViewRightClickCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=TreeViewItem}}"/>
</StackPanel.InputBindings>
<TextBlock Text="{Binding SlideName}" Foreground="White">
<TextBlock.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick"
Command="{Binding ElementName=Emt,Path=DataContext.SlideDoubleClickCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=TextBlock},Path=DataContext}"/>
</TextBlock.InputBindings>
</TextBlock>
<CheckBox IsChecked="{Binding IsChecked}" Foreground="White" />
</StackPanel>
</DataTemplate>
</TreeView.Resources>
</TreeView>
And in the viewModel:
private void ExecuteTreeViewRightClickCommand(object obj)
{
((TreeViewItem)obj).IsSelected = true;
SelectedSlide = ((TreeViewItem)obj).Header as SlideModel;
}
So I am having an issue with the TreeView. If I build a tree view statically, every node in the tree is selectable in that when I click on it, it highlights itself blue, indicating that node is selected.
<TreeView
Grid.Column="0"
Grid.Row="2"
MinHeight="100"
MinWidth="100"
BorderBrush="White"
DataContext="{Binding Projects, Source={x:Static SizingApp:Manager.Instance}}">
<TreeViewItem Header="Project 1" IsExpanded="True">
<TreeViewItem Header="Step 1" IsExpanded="True">
<TreeViewItem Header="Load 1" IsExpanded="True"></TreeViewItem>
<TreeViewItem Header="Load 2" IsExpanded="True"></TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Step 2" IsExpanded="True">
<TreeViewItem Header="Load 1" IsExpanded="True"></TreeViewItem>
<TreeViewItem Header="Load 2" IsExpanded="True"></TreeViewItem>
</TreeViewItem>
</TreeViewItem>
However, I am Binding to the TreeView to populate it. Furthermore, I am binding to objects that implement Emiel Jongerius's BindableObjectBase3 class. This is a wonderful base class implementation that allows my objects to be Bindable and implement the INotifyPropertyChanged interface with the concern for manual DependencyProperty management.
So this is the basic class structure (simplified from my actual objects) that I am trying to implement in a TreeView.
public abstract class MyCustomClass : BindableObjectBase3
{
private string m_strName;
public virtual string Name
{
get
{
using (this.GetPropertyTracker(() => this.Name))
{
return m_strName;
}
}
set
{
this.SetValue(ref this.m_strName, value, () => this.Name);
}
}
}
public class Project : MyCustomClass
{
private List<Step> m_steps;
public List<Step> Steps
{
get
{
using (this.GetPropertyTracker(() => this.Steps))
{
return m_steps;
}
}
set
{
this.SetValue(ref this.m_steps, value, () => this.Steps);
}
}
}
public class Step : MyCustomClass
{
private List<Load> m_loads;
public List<Load> Loads
{
get
{
using (this.GetPropertyTracker(() => this.Loads))
{
return m_loads;
}
}
set
{
this.SetValue(ref this.m_loads, value, () => this.Steps);
}
}
}
public class Load : MyCustomClass
{
}
And this is the basic XAML I use to implement the TreeView:
<TreeView
Grid.Column="0"
Grid.Row="2"
MinHeight="100"
MinWidth="100"
BorderBrush="White"
DataContext="{Binding Projects, Source={x:Static SizingApp:Manager.Instance}}">
<TreeView.Resources>
<HierarchicalDataTemplate x:Key="LoadTemplate">
<TreeViewItem Header="{Binding Path=Name}">
</TreeViewItem>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="StepTemplate">
<TreeViewItem Header="{Binding Path=Name}" IsExpanded="True"
ItemsSource="{Binding Path=Loads}"
ItemTemplate="{StaticResource LoadTemplate}">
</TreeViewItem>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="ProjectTemplate">
<TreeViewItem Header="{Binding Path=Name}" IsExpanded="True"
ItemsSource="{Binding Path=Steps}"
ItemTemplate="{StaticResource StepTemplate}">
</TreeViewItem>
</HierarchicalDataTemplate>
</TreeView.Resources>
<TreeViewItem
Header="{Resx ResxName=PSSPECApplication.Controls.ProjectControlResources, Key=projectTree_Header}"
ItemsSource="{Binding}"
IsExpanded="True"
Focusable="True"
ItemTemplate="{StaticResource ProjectTemplate}">
</TreeViewItem>
</TreeView>
Now all of this works fine as far as binding goes. I can bind to an ObservableCollection<Project> and as I add/remove/manipulate projects, the TreeView updates accordingly.
However, the only node in the TreeView that seems selectable is the first node (the one that is static). All of the other nodes create through dynamic Binding do not indicate that they are selected on the GUI. I would expect that they would also highlight blue when clicked on. But instead they do nothing. Does anyone have an idea of why?
You shouldn't be defining TreeViewItems explicitly in your ItemTemplates. The reason you can't select any of the items is that they have no parent TreeView to control selection behavior. You need to let the TreeView generate the TreeViewItem controls for you and only use the item templates to define the UI for the Headers and the bindings for their items. Use something like this instead:
<Window.Resources>
<HierarchicalDataTemplate x:Key="LoadTemplate">
<TextBlock Text="{Binding Path=Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="StepTemplate" ItemsSource="{Binding Loads}" ItemTemplate="{StaticResource LoadTemplate}">
<TextBlock Text="{Binding Path=Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="ProjectTemplate" ItemsSource="{Binding Steps}" ItemTemplate="{StaticResource StepTemplate}">
<TextBlock Text="{Binding Path=Name}"/>
</HierarchicalDataTemplate>
</Window.Resources>
<TreeView MinHeight="100" MinWidth="100" BorderBrush="White"
ItemsSource="{Binding Path=Projects}"
ItemTemplate="{StaticResource ProjectTemplate}">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True" />
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
My TreeView is acting just as the original poster has described. I'm able to select everything in my TreeView Control but If I select a childnode the Parent Node is what Highlights even though It binds and clicks the child. I tried structuring my code to resemble John Bowen's suggestion and still get the same results. Here is my XAML Code:
<Fluent:RibbonWindow.Resources>
<HierarchicalDataTemplate x:Key="MyTreeViewStyle" ItemsSource="{Binding Contacts}">
<!-- Display the Index by showing it's Index string -->
<StackPanel Orientation="Horizontal">
<Image x:Name="img" Width="16" Height="16" Stretch="Fill" Source="Images\closedfolder16.png" />
<TextBlock Text="{Binding Index}" Margin="5,0" ToolTip="{Binding Index}"/>
</StackPanel>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image x:Name="img2" Width="16" Height="16" Stretch="Fill" Source="Images\closedfolder16.png" />
<TextBlock Text="{Binding Name}" Margin="5,0" ToolTip="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</Fluent:RibbonWindow.Resources>
Then I use it here in my TreeView Control:
<Grid>
<TreeView Margin="2,2,2,2" x:Name="MyTreeView" ItemTemplate="{StaticResource MyTreeViewStyle}" ItemContainerStyle="{StaticResource AlwaysExpand}" ScrollViewer.CanContentScroll="True" BorderThickness="0" TreeViewItem.Selected="btnDisplayContact_Click" />
</Grid>
The result is this screenshot, notice how the parent node D is highlighted after clicking the child node, instead of the child node being highlighted:
http://home.swbell.net/davis32/Snapshot.png
Can't post images so just cut and paste the URL link.