WPF: Setting a binding for all TreeViewItem instance - wpf

Greetings,
I'm using WPF with a Model-View-ViewModel pattern, and I have a view model with an IsSelected property which I want to bind to a TreeViewItem's IsSelected property for all TreeViewItems in the scope. I'm attempting to do this with a Style and a Setter. This works apparently for the root-level TreeViewItems, but not for their children. Why is this? How can I have this apply to all TreeViewItem controls?
Here is the view XAML:
<UserControl x:Class="MyApp.AllAreasView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:MyApp="clr-namespace:MyApp"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="700">
<UserControl.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsSelected"
Value="{Binding IsSelected, Mode=TwoWay}"/>
</Style>
<MyApp:CountVisibilityConverter x:Key="CountVisibilityConverter" />
<HierarchicalDataTemplate x:Key="AreaTemplate"
DataType="AreaViewModel"
ItemsSource="{Binding Path=SubareasCollectionView}">
<WrapPanel>
<TextBlock Text="{Binding Path=Name}" Margin="0 0 8 0" />
<TextBlock DataContext="{Binding Path=Subareas}"
Text="{Binding Path=Count, StringFormat= (\{0\})}"
Visibility="{Binding Path=Count, Converter={StaticResource CountVisibilityConverter}}" />
</WrapPanel>
</HierarchicalDataTemplate>
</UserControl.Resources>
<TreeView ItemsSource="{Binding TopLevelAreas}"
ItemTemplate="{StaticResource AreaTemplate}">
</TreeView>
</UserControl>

I think we'll need more info to answer your question. Specifically, what your view model(s) look like. Below is an example you can copy and paste that works fine.
Window1.xaml:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="{Binding Background}"/>
</Style>
<HierarchicalDataTemplate x:Key="ItemTemplate" DataType="local:DataItem" ItemsSource="{Binding Path=Children}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
</Window.Resources>
<TreeView ItemsSource="{Binding}" ItemTemplate="{StaticResource ItemTemplate}"/>
</Window>
Window1.xaml.cs:
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media;
namespace WpfApplication1
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
var dis = new ObservableCollection<DataItem>();
var di = new DataItem() { Name = "Top", Background = Brushes.Red };
di.Children.Add(new DataItem() { Name = "Second", Background = Brushes.Blue });
dis.Add(di);
DataContext = dis;
}
}
public class DataItem
{
public DataItem()
{
Children = new ObservableCollection<DataItem>();
}
public string Name
{
get;
set;
}
public ICollection<DataItem> Children
{
get;
set;
}
public Brush Background
{
get;
set;
}
}
}

working with view models you will get very friendly with the ItemContainerStyle property. what you were doing in your code set the data template for the root level. what you want to do is style each of the items in the treeview, which you can do like so.
<TreeView ItemsSource="{Binding TopLevelAreas}"
ItemContainerStyle="{StaticResource AreaTemplate}">
</TreeView>
enjoy

You have to use as mentioned below. Make use of BasedOn option
<TreeView ItemsSource="{Binding TopLevelAreas}">
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource StyleKey}"/>
</TreeView.Resources>
</TreeView>

Related

How to binding different data context to data template?

I try to simplify my Main user control that contains 8 user controls that are exactly the same but they are binding to different VM to display its data.
Currently, I have to create a template for each of my user control and binding to each of VM.
It seems that I can create one data template for all 8 user controls and apply the data template to each of the user control with different instance of VM.
Here are my code that current I have to use different templates for different dependency of View Model containing the data of each gauge
<DataTemplate x:Key="AnalogIO1Template" DataType="{x:Type local:CAnalogIOVM}">
<local:ucAnalogIO
GaugeValueDP="{Binding Path=GaugeValue1VMDP.GaugeValue, ElementName=ucAnalogIOWindow}">
</local:ucAnalogIO>
</DataTemplate>
<DataTemplate x:Key="AnalogIO1Template" DataType="{x:Type local:CAnalogIOVM}">
<local:ucAnalogIO
GaugeValueDP="{Binding Path=GaugeValue2VMDP.GaugeValue, ElementName=ucAnalogIOWindow}">
</local:ucAnalogIO>
</DataTemplate>
<Grid Background="#FFE3E2D7" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Margin="0,0,0,1">
<ContentControl x:Name="ucLinearGauge1">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate" Value="{StaticResource AnalogIO1Template }" />
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
<Grid Background="#FFE3E2D7" Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Margin="0,0,0,1">
<ContentControl x:Name="ucLinearGauge2">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate" Value="{StaticResource AnalogIO2Template }" />
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
Here I try to create one Data template for all 8 user controls but it does not work
<DataTemplate x:Key="AnalogIOTemplate" DataType="{x:Type local:CAnalogIOVM}">
<local:ucAnalogIO
GaugeValueDP="{Binding Path=GaugeValue, ElementName=ucAnalogIOWindow}">
</local:ucAnalogIO>
</DataTemplate>
<Grid Background="#FFE3E2D7" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Margin="0,0,0,1">
<ContentControl Content="{Binding Path=GaugeValue1VMDP}" x:Name="ucLinearGauge1">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="ContentTemplate" Value="{StaticResource AnalogIOTemplate}" />
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
Is there a way to binding different data context to the data template?
Thanks
If class of UserControl, class of VM and bindings between them are identical and the only difference is instances of VM, creating a Style for UserControl and binding each instance of VM with DataContext of corresponding instance of UserControl would be enough.
Since we don't know actual code of your UserControl and VM, I will show this by samples.
Sample UserControl which has Id dependency property and can show its value:
<UserControl x:Class="WpfApp.SampleUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<TextBlock x:Name="IdTextBlock"/>
</StackPanel>
</UserControl>
public partial class SampleUserControl : UserControl
{
public int Id
{
get { return (int)GetValue(IdProperty); }
set { SetValue(IdProperty, value); }
}
public static readonly DependencyProperty IdProperty =
DependencyProperty.Register("Id", typeof(int), typeof(SampleUserControl),
new PropertyMetadata(0, (d, e) => ((SampleUserControl)d).IdTextBlock.Text = e.NewValue.ToString()));
public SampleUserControl()
{
InitializeComponent();
}
}
Sample VM which has Id property and MainWindow's VM which has instances of sample VM:
// using Microsoft.Toolkit.Mvvm.ComponentModel;
public class SampleViewModel : ObservableObject
{
private int _id;
public int Id
{
get => _id;
set => SetProperty(ref _id, value);
}
}
public class MainWindowViewModel : ObservableObject
{
public SampleViewModel? VM1 { get; }
public SampleViewModel? VM2 { get; }
public MainWindowViewModel()
{
VM1 = new SampleViewModel { Id = 10 };
VM2 = new SampleViewModel { Id = 20 };
}
}
Finally, bind each instance of sample VM with DataContext of corresponding instance of sample UserControl so that Id of sample VM is bound with Id of sample UserControl.
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp"
Title="MainWindow"
Width="400" Height="200">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Window.Resources>
<Style TargetType="{x:Type local:SampleUserControl}">
<Setter Property="Id" Value="{Binding Id}"/>
</Style>
</Window.Resources>
<StackPanel>
<local:SampleUserControl DataContext="{Binding VM1}"/>
<local:SampleUserControl DataContext="{Binding VM2}"/>
</StackPanel>
</Window>

Create WPF context menu for a TreeView using HierarchicalDataTemplates

The following code produces a TreeView as seen below. When you right click any of the child nodes (not parents), I would like a simple context menu to display.
Here is the code I am using to create the tree view. I need to use the HierarchicalDataTemplate so the solution must include that.
XAML
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d">
<Grid>
<TreeView ItemsSource="{Binding Parents}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Parent}"
ItemsSource="{Binding Children}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Child}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
</Grid>
</Window>
CODE
using System.Collections.Generic;
using System.Windows;
namespace WpfApp1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel();
}
}
public class ViewModel
{
public ViewModel()
{
Parents = new List<Parent>();
Parents.Add(new Parent()
{
Name = "Parent A",
Children = new List<Child>() {
new Child() { Name = "Child A" },
new Child() { Name = "Child B" }
}
});
Parents.Add(new Parent()
{
Name = "Parent B",
Children = new List<Child>() {
new Child() { Name = "Child C" },
new Child() { Name = "Child D" }
}
});
}
public List<Parent> Parents { get; set; }
}
public class Parent
{
public Parent() { Children = new List<Child>(); }
public string Name { get; set; }
public List<Child> Children { get; set; }
}
public class Child
{
public string Name { get; set; }
}
}
SAMPLE CONTEXT MENU
<ContextMenu x:Key ="ArchiveFaxNodePopupMenu">
<MenuItem Header="Delete" />
</ContextMenu>
Thanks for the help!
UPDATE
Here is the updated XAML that makes the content menu work for the child node types only (thanks to #EdPlunket for the answer)
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d">
<Grid>
<TreeView ItemsSource="{Binding Parents}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Parent}"
ItemsSource="{Binding Children}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Child}">
<TextBlock Text="{Binding Name}">
<TextBlock.Resources>
<ContextMenu x:Key ="ArchiveFaxNodePopupMenu">
<MenuItem Header="Delete" />
</ContextMenu>
</TextBlock.Resources>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="ContextMenu" Value="{StaticResource ArchiveFaxNodePopupMenu}" />
</Style>
</TextBlock.Style>
</TextBlock>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
</Grid>
</Window>
This should do it.
<TreeView ItemsSource="{Binding Parents}">
<TreeView.ItemContainerStyle>
<Style TargetType="TreeViewItem">
<Setter Property="ContextMenu" Value="{StaticResource ArchiveFaxNodePopupMenu}" />
</Style>
</TreeView.ItemContainerStyle>
<!-- resources etc. -->
If you want different context menus for the different types of items, put them on the TextBlocks in the templates.

WPF Data Binding From UserControl

I want to bind 'SomeText' from my UserControl, into the Content of my Label.
I currently have a UserControl which just displays my 'SomeText'. The XAML, and Code Behind file can be seen below.
<UserControl x:Class="TabHeader.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="183" d:DesignWidth="235"
x:Name="uc">
<Grid>
<Label Height="43" HorizontalAlignment="Left" Margin="57,102,0,0" Name="textBlock1" Content="{Binding Path=SomeText, ElementName=uc}" VerticalAlignment="Top" Width="86" />
</Grid>
</UserControl>
namespace TabHeader
{
/// <summary>
/// Interaction logic for UserControl1.xaml
/// </summary>
public partial class UserControl1 : UserControl
{
private string someText;
public UserControl1()
{
this.SomeText = "23";
InitializeComponent();
}
public string SomeText
{
get
{
return someText;
}
set
{
someText = value;
}
}
}
}
I then have my main XAML page where I have, a Tab Control within a Grid. I'm using a Style to generate two Labels within the Columns Header. I am able to pull through the Header field, but I am unable to pull through the controls field.
<Window x:Class="TabHeader.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vw="clr-namespace:TabHeader"
Title="MainWindow" Height="350" Width="525" Name="Tabs">
<Grid>
<TabControl Height="262" HorizontalAlignment="Left" Margin="47,26,0,0" Name="tabControl1" VerticalAlignment="Top" Width="366">
<TabControl.Resources>
<Style TargetType="TabItem" x:Key="tabItemHeaderStyle" >
<Setter Property="HeaderTemplate" >
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
<Label Content="{Binding Path=SomeText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=vw:UserControl1}}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Style="{StaticResource tabItemHeaderStyle}" Header="TI 1" Name="tabItem1" Width="100">
<vw:UserControl1 x:Name="UserControl11"></vw:UserControl1>
</TabItem>
<TabItem Style="{StaticResource tabItemHeaderStyle}" Header="TI 2" Name="tabItem2">
</TabItem>
</TabControl>
</Grid>
</Window>
Any assistance with this would be greatly appreciated.
Cheers.
Edit 1
For anyone interested added my working code below, where I have used the DependencyProperty.
MainWindow.xaml
<Grid>
<TabControl Height="262" HorizontalAlignment="Left" Margin="47,26,0,0" Name="tabControl1" VerticalAlignment="Top" Width="366">
<TabControl.Resources>
<Style TargetType="TabItem" x:Key="tab1ItemHeaderStyle">
<Setter Property="HeaderTemplate" >
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
<Label Content="{Binding Path=UC1Figure, ElementName=uc1}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Style="{StaticResource tab1ItemHeaderStyle}" Header="[Tab 1]" Name="tabItem1" Width="100">
<vw:UserControl1 x:Name="uc1"></vw:UserControl1>
</TabItem>
<TabControl>
</Grid>
UserControl1.xaml
<Grid>
<Label Height="43" HorizontalAlignment="Left" Margin="69,128,0,0" Name="textBlock1" Content="{Binding Path=UC1Figure, ElementName=uc}" VerticalAlignment="Top" Width="100" />
<Button Name="updateSomeFigure" Content="Press Me" Click="updateSomeFigure_Click" Width="100" Height="100" Margin="69,12,66,71" />
</Grid>
UserControl1.xaml.cs
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
public static readonly DependencyProperty SomeFigureProperty =
DependencyProperty.Register("UC1Figure", typeof(int), typeof(UserControl1));
public int UC1Figure
{
get { return (int)this.GetValue(SomeFigureProperty); }
set { this.SetValue(SomeFigureProperty, value); }
}
private void updateSomeFigure_Click(object sender, RoutedEventArgs e)
{
UC1Figure = UC1Figure + 1;
}
}
If you want to data bind a property to the UI of your UserControl, you have two options. The first is to implement the INotifyPropertyChanged Interface in your code behind. The second is to define DependencyPropertys instead of regular CLR properties. You can find out how to do that in the Dependency Properties Overview page on MSDN.
You might also want to read the Data Binding Overviewā€ˇ page on MSDN before you start data Binding.

Pulling different data into ListBox

How I should to do this? I tried the following:
In Xaml:
<DataTemplate x:Key="LogDataTemplate" DataType="data:Type1">
<TextBlock Text="Type1" />
</DataTemplate>
<DataTemplate x:Key="LogDataTemplate" DataType="data:Type2">
<TextBlock Text="Type2" />
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<ListBox ItemsSource="{Binding source}"
ItemTemplate="{StaticResource LogDataTemplate}" />
</UserControl>
In view model(which is set as DataContext of the UserControl):
member x.source = new ObservableCollection<Object>()
But have an error about duplicates of DataTemplate
Remove the x:Key parameter. Implicit DataTemplates is what you want here.
Edit: Here is a really small working example :
MainWindow.xaml.cs
using System.Collections.ObjectModel;
using System.Windows;
namespace StackOverflow
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
Rectangles = new ObservableCollection<object>() { new RedRectangle(), new BlueRectangle() };
}
public ObservableCollection<object> Rectangles { get; set; }
}
public class RedRectangle { }
public class BlueRectangle { }
}
MainWindow.xaml
<Window x:Class="StackOverflow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:StackOverflow"
Width="500" Height="300">
<Window.Resources>
<DataTemplate DataType="{x:Type local:RedRectangle}">
<Rectangle Width="16" Height="16" Fill="Red" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:BlueRectangle}">
<Rectangle Width="16" Height="16" Fill="Blue" />
</DataTemplate>
</Window.Resources>
<ListBox ItemsSource="{Binding Rectangles}" />
</Window>
Well there's implicit data templates like #Sisyphe mentions.
But your real problem is, you've named both templates the same thing. x:Key is a dictionary key, it needs to be unique within its scope. That's what the error is about.
Having said that, you'll be better off with implicit data templates in this case as #Sisyphe mentions.

Silverlight ContentControl in ItemTemplate

I`m trying to figure out why this code
<UserControl x:Class="TestSilverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Button x:Key="button" Content="{Binding}" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Yellow">
<ListBox Name="listBox">
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl Content="{StaticResource button}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
using System.Collections.Generic;
namespace TestSilverlight
{
public partial class MainPage
{
public MainPage()
{
InitializeComponent();
listBox.ItemsSource = new List<string> {"a", "b", "c"}; //without this line it works
}
}
}
doesnt work. It throws Parser Exception (can`t set property Content in ContentControl). Without binding it works perfectly. Is it ok?
It looks like there is something wrong with your logic. If you define a resource of type Button - that makes one instance of a button. You can't have a single instance of a control be a content of multiple controls.
Why not just do this:
<ListBox Name="listBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Resources