Develop Reference

Using IValueConverter to enable button

I am trying to learn how to use the IValueConverter to enable/disable controls (in this case a button) using the boolean-property of an item selected in a listbox. The button in question is the "TestButton". I believe I have the XAML for it setup correctly but it does not enable when I add and select a user defined item or disable when I select one of the other items in the listbox. The listbox contains a list of "Drink" objects that can be added to. When one is added it becomes a user defined item. Now I believe I am missing something but I am not sure what. Any help will be appreciated.
ViewModel code here:
<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"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<local:Drinks x:Key="Drink"/>
<local:EnableConverter x:Key="EnableConverter"/>
<BooleanToVisibilityConverter x:Key="BoolToVis"/>
<ControlTemplate x:Key="validationTemplate">
<DockPanel>
<TextBlock Foreground="Red" FontSize="20">!</TextBlock>
<AdornedElementPlaceholder/>
</DockPanel>
</ControlTemplate>
<Style x:Key="textStyleTextBox" TargetType="TextBox">
<Setter Property="Foreground" Value="#333333" />
<Setter Property="MaxLength" Value="40" />
<Setter Property="Width" Value="392" />
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox x:Name="DrinksListBox" HorizontalAlignment="Center" Height="325" Width="275" Margin="0,0,0,0" VerticalAlignment="Center" Grid.Column="0" ItemsSource="{Binding SomeDrinks}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Type}" Width="80" Margin="0,0,10,0" Grid.Column="0"/>
<TextBlock Text="{Binding Name}" Width="80" Margin="0,0,10,0" Grid.Column="1" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding NumberOfCans}" Width="80" Margin="0,0,10,0" Grid.Column="2" HorizontalAlignment="Left"/>
<Button x:Name="DrinkDeleteButton" Content="Delete" Visibility="{Binding Path=IsUserDefined, Converter={StaticResource BoolToVis}}" Click="CmdDeleteDrink_Clicked" HorizontalAlignment="Left" Grid.Column="3"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox x:Name="DrinkNameTextBox" Grid.Column="1" HorizontalAlignment="Left" Height="45" Margin="0,0,0,100" TextWrapping="Wrap" Text="Enter Drink Name" VerticalAlignment="Center" Width="240" FontSize="20" VerticalContentAlignment="Center"/>
<TextBox x:Name="NumberCansTextBox" Style="{StaticResource textStyleTextBox}" Grid.Column="1" HorizontalAlignment="Left" Height="45" Margin="0,0,0,150" VerticalAlignment="Bottom" Width="240" FontSize="20" VerticalContentAlignment="Center">
<TextBox.Text>
<Binding Path="NumberOfCans" UpdateSourceTrigger="PropertyChanged" Source="{StaticResource Drink}">
<Binding.ValidationRules>
<local:NumberCansValidationRule Min="0" Max="10"/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<ComboBox x:Name="DrinkTypeComboBox" Grid.Column="1" HorizontalAlignment="Left" Margin="0,47,0,0" VerticalAlignment="Top" Width="240" Height="45" ItemsSource="{Binding Drinks, Mode=OneWay}" DisplayMemberPath="Type" FontSize="20"/>
<Button x:Name="AddDrinkButton" Content="Add Drink" Grid.Column="1" HorizontalAlignment="Right" Margin="0,0,10,100" VerticalAlignment="Center" Width="100" Height="45" Click="CmdAddDrink_Clicked">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="IsEnabled" Value="False"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(Validation.HasError), ElementName=NumberCansTextBox}" Value="False"/>
</MultiDataTrigger.Conditions>
<Setter Property="IsEnabled" Value="True"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="TestButton" Content="Test" IsEnabled="{Binding Path=IsUserDefined, UpdateSourceTrigger=PropertyChanged, Source={StaticResource Drink}, Converter={StaticResource EnableConverter}}" Grid.Column="1" HorizontalAlignment="Right" Margin="0,70,10,0" VerticalAlignment="Center" Width="100" Height="45"/>
</Grid>
Here is my converter:
namespace WpfApp1
{
class EnableConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
bool isenable = false;
bool b = (bool)value;
if (b == true)
{
isenable = true;
}
return isenable;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
This class contains the "IsUserDefined" property that I am binding to:
public class Drinks
{
private string type;
private string name;
private int numCans;
public Drinks() { }
public Drinks(string type, string name, int numCans)
{
this.type = type;
this.name = name;
this.numCans = numCans;
}
public bool IsUserDefined { get; set; }
public string Type
{
get { return type; }
set
{
if (type != value)
{
type = value;
}
}
}
public string Name
{
get { return name; }
set
{
if (name != value)
{
name = value;
}
}
}
public int NumberOfCans
{
get { return numCans; }
set
{
if (numCans != value)
{
numCans = value;
}
}
}
}

Binding to dependency property in slider control style not working

All the default property bindings are working fine however my custom properties are using the fallback values. Specifically ColorThumb and ColorThumbBorder. As their names imply, these 2 properties color the respective parts of the slider's thumb using a brush.
I've had no problems in the past getting my styles to use custom properties for other controls. Is there something unique about the slider control?
Style Xaml
<Style TargetType="{x:Type local:DMSlider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="TopTick" Visibility="{TemplateBinding TickPlacement}" Fill="{TemplateBinding Foreground}" Placement="Top" Height="4" Grid.Row="0"/>
<TickBar x:Name="BottomTick" Visibility="{TemplateBinding TickPlacement}" Fill="{TemplateBinding Foreground}" Placement="Bottom" Height="4" Grid.Row="0"/>
<Border x:Name="TrackBackground" BorderThickness="1" CornerRadius="0" Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1"
Background="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"
BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Canvas Margin="-6,-1">
<Rectangle Visibility="Hidden" x:Name="PART_SelectionRange" Height="4.0" StrokeThickness="1.0"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource DMSliderRepeatButton}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource DMSliderRepeatButton}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border x:Name="gripBorder" BorderThickness="1"
Background="{Binding ColorThumb,
RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, FallbackValue=Red}"
BorderBrush="{Binding ColorThumbBorder,
RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, FallbackValue=Green}" >
<Rectangle x:Name="grip" Height="15" Width="10" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Properties CS
public partial class DMSlider : Slider
{
public static readonly DependencyProperty ColorSliderLeftProperty =
DependencyProperty.Register("ColorSliderLeft", typeof(Brush), typeof(DMSlider));
public static readonly DependencyProperty ColorSliderRightProperty =
DependencyProperty.Register("ColorSliderRight", typeof(Brush), typeof(DMSlider));
public static readonly DependencyProperty ColorSliderThumbProperty =
DependencyProperty.Register("ColorThumb", typeof(Brush), typeof(DMSlider), new FrameworkPropertyMetadata(Brushes.Orange));
public static readonly DependencyProperty ColorSliderThumbHoverProperty =
DependencyProperty.Register("ColorThumbHover", typeof(Brush), typeof(DMSlider));
public static readonly DependencyProperty ColorSliderThumbBorderProperty =
DependencyProperty.Register("ColorThumbBorder", typeof(Brush), typeof(DMSlider));
public Brush ColorSliderLeft
{
get { return (Brush)GetValue(ColorSliderLeftProperty); }
set { SetValue(ColorSliderLeftProperty, value); }
}
public Brush ColorSliderRight
{
get { return (Brush)GetValue(ColorSliderRightProperty); }
set { SetValue(ColorSliderRightProperty, value); }
}
public Brush ColorThumb
{
get { return (Brush)GetValue(ColorSliderThumbProperty); }
set { SetValue(ColorSliderThumbProperty, value); }
}
public Brush ColorThumbHover
{
get { return (Brush)GetValue(ColorSliderThumbHoverProperty); }
set { SetValue(ColorSliderThumbHoverProperty, value); }
}
public Brush ColorThumbBorder
{
get { return (Brush)GetValue(ColorSliderThumbProperty); }
set { SetValue(ColorSliderThumbBorderProperty, value); }
}
}

Thanks to #Clemens for showing me what I was doing wrong. I needed to reference the slider not the the thumb.
I should have been targeting an ancestor like so:
Background="{Binding ColorThumb, RelativeSource={RelativeSource AncestorType=local:DMSlider}, Mode=TwoWay, FallbackValue=Red}"
BorderBrush="{Binding ColorThumbBorder, RelativeSource={RelativeSource AncestorType=local:DMSlider}, Mode=TwoWay, FallbackValue=Green}"
Full thumb style
<Thumb x:Name="Thumb">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border x:Name="gripBorder" BorderThickness="1"
Background="{Binding ColorThumb,
RelativeSource={RelativeSource AncestorType=local:DMSlider}, Mode=TwoWay, FallbackValue=Red}"
BorderBrush="{Binding ColorThumbBorder,
RelativeSource={RelativeSource AncestorType=local:DMSlider}, Mode=TwoWay, FallbackValue=Green}">
<Rectangle x:Name="grip" Height="15" Width="10" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>

virtualization for custom treeview

I made a custom TreeView with multiple columns. Everything worked well until thee are lots of items in the tree.
I tried to enable Virtualization by doing VirtualizingPanel.IsVirtualizing="True" (Will be VirtualizingStackPanel.IsVirtualizing if you are < .NET 4.5) but not only it does not speed it up, it actually made the load time even worse.
On a normal TreeView this property does the trick but I can't find a way to get it to work on my custom Tree
TreeViewItem.cs
public class TreeListViewItem : TreeViewItem
{
protected override DependencyObject GetContainerForItemOverride()
{
return new TreeListViewItem();
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is TreeListViewItem;
}
}
TreeListView.cs
public class TreeListView : TreeView
{
public GridViewColumnCollection Columns { get; set; }
public TreeListView()
{
Columns = new GridViewColumnCollection();
}
protected override DependencyObject GetContainerForItemOverride()
{
return new TreeListViewItem();
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is TreeListViewItem;
}
}
Node.cs
public class Node
{
public string Data { get; set; }
public List<Node> Children { get; set; }
public Node(string data)
{
Data = data;
Children = new List<Node>();
}
}
ViewModel.cs
public class ViewModel
{
public ObservableCollection<Node> Nodes { get; private set; }
public ViewModel()
{
Nodes = new ObservableCollection<Node>();
Node parent = new Node("Parent");
for (int i = 0; i < 5000; i++)
parent.Children.Add(new Node(i.ToString()));
Nodes.Add(parent);
}
}
MainWindow.xaml
<Window x:Class="WPFTest.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:WPFTest"
Title="Test"
mc:Ignorable="d"
Width="200">
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Window.Resources>
<Style TargetType="local:TreeListView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TreeListView">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer VerticalScrollBarVisibility="Disabled">
<DockPanel>
<GridViewHeaderRowPresenter Columns="{Binding Path=Columns, RelativeSource={RelativeSource TemplatedParent}}"
DockPanel.Dock="Top"/>
<ScrollViewer HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
DockPanel.Dock="Bottom">
<ItemsPresenter/>
</ScrollViewer>
</DockPanel>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:TreeListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TreeListViewItem">
<StackPanel>
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<GridViewRowPresenter x:Name="PART_Header"
Content="{TemplateBinding Header}"
Columns="{Binding Path=Columns, RelativeSource={RelativeSource AncestorType={x:Type local:TreeListView}}}" >
</GridViewRowPresenter>
</Border>
<ItemsPresenter x:Name="ItemsHost" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<local:TreeListView ItemsSource="{Binding Nodes}" VirtualizingPanel.IsVirtualizing="True">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}"/>
</TreeView.ItemTemplate>
<local:TreeListView.Columns>
<GridViewColumn Header="Test" Width="150">
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Text="{Binding Data}"/>
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</local:TreeListView.Columns>
</local:TreeListView>
</Grid>
</Window>
I tried templating the ItemPanel to be VirtualizingStackPanel and it did not help either.
I strip out the expander part since it is not relevant. You can double click on the parent node to expand the tree and it will take a long time to load the children.

On the TreeListView style, on the ItemsPresenter's parent ScrollViewer, set CanContentScroll="True":
<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
DockPanel.Dock="Bottom">
<ItemsPresenter/>
</ScrollViewer>
On the TreeListViewItem style, you need to have something named "Expander" (for some reason unknown to me - perhaps some style/code is looking for it?).
Just put a ToggleButton in the style's StackPanel:
<StackPanel>
<ToggleButton x:Name="Expander" Width="0" />
<Border Name="Bd" ... />
....
</StackPanel>
Here is the complete XAML:
<Window x:Class="WpfApplication88.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:WpfApplication88"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Window.Resources>
<Style TargetType="local:TreeListView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TreeListView">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer VerticalScrollBarVisibility="Disabled">
<DockPanel>
<GridViewHeaderRowPresenter Columns="{Binding Path=Columns, RelativeSource={RelativeSource TemplatedParent}}"
DockPanel.Dock="Top"/>
<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
DockPanel.Dock="Bottom">
<ItemsPresenter/>
</ScrollViewer>
</DockPanel>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:TreeListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TreeListViewItem">
<StackPanel>
<ToggleButton x:Name="Expander" Width="0" />
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<GridViewRowPresenter x:Name="PART_Header"
Content="{TemplateBinding Header}"
Columns="{Binding Path=Columns, RelativeSource={RelativeSource AncestorType={x:Type local:TreeListView}}}" >
</GridViewRowPresenter>
</Border>
<ItemsPresenter x:Name="ItemsHost" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<local:TreeListView ItemsSource="{Binding Nodes}" VirtualizingPanel.IsVirtualizing="True">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}"/>
</TreeView.ItemTemplate>
<local:TreeListView.Columns>
<GridViewColumn Header="Test" Width="150">
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Text="{Binding Data}"/>
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Test 2" Width="150">
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Text="{Binding Data2}"/>
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</local:TreeListView.Columns>
</local:TreeListView>
</Grid>
</Window>
I added a Test2 DataViewColum and added a Data2 property to the Node class to make sure it worked (and it does). Here are the changes to the code:
public class ViewModel
{
public ObservableCollection<Node> Nodes { get; private set; }
public ViewModel()
{
Nodes = new ObservableCollection<Node>();
Node parent = new Node("Parent", "Parent2");
for (int i = 0; i < 5000; i++)
parent.Children.Add(new Node(i.ToString(), (i * i).ToString()));
Nodes.Add(parent);
}
}
public class Node
{
public string Data { get; set; }
public string Data2 { get; set; }
public List<Node> Children { get; set; }
public Node(string data, string data2)
{
Data = data;
Data2 = data2;
Children = new List<Node>();
}
}
FYI - The template that VS made for me (while I was figuring this out), put the CanContentScroll="True" into a setter on a trigger for VirtualizingPanel.IsVirtualizing when it is True. Something like this:
<Style TargetType="local:TreeListView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TreeListView">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<DockPanel>
<GridViewHeaderRowPresenter Columns="{Binding Path=Columns, RelativeSource={RelativeSource TemplatedParent}}"
DockPanel.Dock="Top"/>
<ScrollViewer x:Name="_tv_scrollviewer_" HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
DockPanel.Dock="Bottom">
<ItemsPresenter/>
</ScrollViewer>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="VirtualizingPanel.IsVirtualizing" Value="True">
<Setter Property="CanContentScroll" TargetName="_tv_scrollviewer_" Value="True"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Nested UserControls DataContext

Abstract:
I have two UserControls named Zone and ZoneGroup. One of these controls (ZoneGroup) includes two instances of the other one (Zone). Both of them set DataContext of the root element to this, at the Loaded event-handler.
The problem is that DataContext of inner controls (Zones) is set before loading (the DataContextChanged event occurred before Loaded) which causes some malfunctions in UI. (inside Zone controls initial state is wrong.) If I prevent it, everything works fine (at least seems to be!) except I encounter with the following error report. (In the Output window)
public partial class Zone : UserControl
{
∙∙∙
private void Zone_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
// Adding this if-clause solve UI problems but makes some binding errors!
if (this.IsLoaded)
brdRoot.DataContext = this;
}
}
System.Windows.Data Error: 40 : BindingExpression path error: 'ZoneBrush' property not found on 'object' ''ZoneGroup' (Name='')'. BindingExpression:Path=ZoneBrush; DataItem='ZoneGroup' (Name=''); target element is 'brdRoot' (Name=''); target property is 'BorderBrush' (type 'Brush')
Details:
There is a UserControl named Zone containing several data-bindings like so..
<UserControl x:Class="MyApp.Zone"
∙∙∙>
<Border x:Name="brdRoot" BorderBrush="{Binding ZoneBrush}" BorderThickness="1">
∙∙∙
</Border>
</UserControl>
So, I set brdRoot data-context as
public partial class Zone : UserControl
{
public Brush ZoneBrush
{
get { return (Brush)GetValue(ZoneBrushProperty); }
set { SetValue(ZoneBrushProperty, value); }
}
∙∙∙
public Zone()
{
InitializeComponent();
}
private void Zone_Loaded(object sender, RoutedEventArgs e)
{
brdRoot.DataContext = this;
}
∙∙∙
}
Also, there is another UserControl that has two ContentPresenters in order to contain and manage two Zone controls.
<UserControl x:Class="MyApp.ZoneGroup"
∙∙∙>
<Border x:Name="brdRoot" BorderBrush="Gray" BorderThickness="1">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding MainZone}"
Margin="{Binding MainZonePadding}"/>
<ContentPresenter Content="{Binding MemberZone}"/>
</StackPanel>
</Border>
</UserControl>
And the code-behind is:
public partial class ZoneGroup : UserControl
{
public Thickness MainZonePadding
{
get { return (Thickness)GetValue(MainZonePaddingProperty); }
set { SetValue(MainZonePaddingProperty, value); }
}
public Zone MainZone
{
get { return (Zone)GetValue(MainZoneProperty); }
set { SetValue(MainZoneProperty, value); }
}
public Zone MemberZone
{
get { return (Zone)GetValue(MemberZoneProperty); }
set { SetValue(MemberZoneProperty, value); }
}
public ZoneGroup()
{
InitializeComponent();
}
private void ZoneGroup_Loaded(object sender, RoutedEventArgs e)
{
brdRoot.DataContext = this;
}
∙∙∙
}
Edit ► Sketch:
My app works fine as expected, but some BindingExpression errors are reported.

You're overcomplicating it all too much, with all those UserControls and all those DependencyProperties. Look at this sample which uses 0 lines of C# code (XAML-Only):
<Window x:Class="MiscSamples.ItemsControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ItemsControl" Height="300" Width="300">
<Window.Resources>
Style for the ItemsControl:
<Style TargetType="ItemsControl" x:Key="ZoneItemsControlStyle">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ItemsControl">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="5">
<DockPanel>
<TextBlock HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Text="{Binding Items.Count,RelativeSource={RelativeSource TemplatedParent}, StringFormat='{}{0} Item(s)'}"
Foreground="{TemplateBinding Foreground}"
DockPanel.Dock="Top"/>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ItemsPresenter/>
</Border>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
DataTemplate For Brushes:
<DataTemplate DataType="{x:Type Brush}">
<Border BorderBrush="{Binding}" Margin="1" BorderThickness="1" Padding="2,3,2,3">
<TextBlock Text="{Binding}" TextAlignment="Center" Foreground="Black"/>
</Border>
</DataTemplate>
</Window.Resources>
Now, its usage:
<Grid>
<ItemsControl VerticalAlignment="Center" HorizontalAlignment="Center"
Style="{StaticResource ZoneItemsControlStyle}">
<SolidColorBrush Color="Red"/>
<SolidColorBrush Color="Green"/>
<SolidColorBrush Color="Black"/>
<SolidColorBrush Color="Blue"/>
</ItemsControl>
</Grid>
</Window>
Result:
See how I'm making use of DataTemplates in order to show a custom piece of UI for a specific Data Type? (In this case, System.Windows.Media.Brush class)
I'm "using the Brushes as ViewModels". You could also create your own ViewModels of course, and then create a specific DataTemplate for each VM type.
Also, see how I'm using the TemplateBinding MarkupExtension to bind several properties inside the ControlTemplate to the corresponding value in the ItemsControl instance.
Finally, see how you can actually add ANY kind of items to the ItemsControl.
Also, I must mention that I used this Style-based approach in order to enable reusability. You could place another ItemsControl somewhere else in the application and set its Style="{StaticResource ZoneItemsControlStyle}" and you're done. But if you only plan to use this a single time, you can just place all the properties hardcoded in the ItemsControl.Template ControlTemplate.

This is not a direct answer!
As #HighCore said, I tried to use an ItemsControl instead of implementing two ContentPresenters in my user-control. Just for clarity I made a new simple app to be able to describe it simply. So please consider some new assumptions:
Here again, there are two UserControls; MyItem and MyItemsControl as follows.
<UserControl x:Class="MyApp.MyItem"
∙∙∙>
<Grid x:Name="grdRoot">
<Border BorderBrush="{Binding ItemBorderBrsuh}" BorderThickness="1">
<TextBlock x:Name="txtColorIndicator"
Text="Item"
TextAlignment="Center"
Margin="5"/>
</Border>
</Grid>
</UserControl>
C# code-behind:
public partial class MyItem : UserControl
{
#region ________________________________________ ItemBorderBrsuh
public Brush ItemBorderBrsuh
{
get { return (Brush)GetValue(ItemBorderBrsuhProperty); }
set { SetValue(ItemBorderBrsuhProperty, value); }
}
public static readonly DependencyProperty ItemBorderBrsuhProperty =
DependencyProperty.Register("ItemBorderBrsuh",
typeof(Brush),
typeof(MyItem),
new FrameworkPropertyMetadata(new SolidColorBrush(Colors.Black), FrameworkPropertyMetadataOptions.None, OnItemBorderBrsuhPropertyChanged));
private static void OnItemBorderBrsuhPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
MyItem instance = sender as MyItem;
if (instance != null && e.NewValue is SolidColorBrush)
instance.txtColorIndicator.Text = (e.NewValue as SolidColorBrush).Color.ToString();
}
#endregion
public MyItem()
{
InitializeComponent();
grdRoot.DataContext = this;
}
}
And this is the MyItemsControl.
<UserControl x:Class="MyApp.MyItemsControl"
∙∙∙>
<StackPanel>
<TextBlock x:Name="txtHeader" Margin="0,0,0,5" TextAlignment="Center" Text="0 Item(s)"/>
<Border BorderBrush="Gray" BorderThickness="1" Padding="5">
<ItemsControl x:Name="itemsControl" ItemsSource="{Binding Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:MyItem />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</StackPanel>
</UserControl>
C# Code-behind:
public partial class MyItemsControl : UserControl
{
private ObservableCollection<MyItem> _Items = new ObservableCollection<MyItem>();
public ObservableCollection<MyItem> Items
{
get
{
return _Items;
}
set
{
_Items = value;
}
}
private void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
txtHeader.Text = Items.Count + " Item(s)";
}
public MyItemsControl()
{
InitializeComponent();
Items.CollectionChanged += Items_CollectionChanged;
this.DataContext = this;
}
}
Here is how to use MyItem within MyItemsControl.
<Grid>
<local:MyItemsControl HorizontalAlignment="Center" VerticalAlignment="Center" Padding="5" BorderBrush="Black" BorderThickness="1">
<local:MyItemsControl.Items>
<local:MyItem ItemBorderBrsuh="Green" Margin="1"/>
<local:MyItem ItemBorderBrsuh="Red" Margin="1"/>
<local:MyItem ItemBorderBrsuh="Blue" Margin="1"/>
<local:MyItem ItemBorderBrsuh="Orange" Margin="1"/>
</local:MyItemsControl.Items>
</local:MyItemsControl>
</Grid>
Now, there is no problem with BindingExpressions, but an important question remains. How to replace
{
grdRoot.DataContext = this;
}
and
{
this.DataContext = this;
}
with a true ViewModel?
Screenshot:
Edit: I tried to implement MVVM pattern but there are some problems. I asked the first one here.

WPF ListBox Custom Control issues

In WPF, I am creating a simple custom control for my TODO program. It should do the following:
Show up as a ListBox with an Add and Remove button above it.
The Add and Remove buttons should add and remove items from my base class.
I have this working
On pressing F2, I want the list box items to change into a TextBox control.
My main issues/Questions are:
On OnKeyDown, I get the error: This operation is valid only on elements that have this template applied. How do I get around this? This is where I want to press F2, and to be able to make the TextBox visible and Label invisible.
Is there a better way to do this? If my control is a container for buttons AND a text box, should I not be inheriting from ListBox? Should I inherit from Control instead and make it a container?
If so, how do I implement it? Do I basically use the following code in the style, and remove the overrides like OnKeyDown and instead register the KeyDown event for the Textbox? I'll give that a try after this post but let me know if you have any advice.
I had something close working before, in the following code, but now I want this moved from my main Window XAML to the custom control code, and I want to be able to edit on button press:
<!-- In my MainWindow.XAML -->
<TaskDashControls:ListBoxWithAddRemove x:Name="listBoxItems" Grid.Row="1" Grid.Column="3" Grid.RowSpan="3"
ItemsSource="{Binding}">
<TaskDashControls:ListBoxWithAddRemove.ItemTemplate>
<DataTemplate>
<DockPanel>
<Button DockPanel.Dock="Left" Click="SelectItemClick">SELECT</Button>
<TextBlock x:Name="LabelDescription" Visibility="Visible" DockPanel.Dock="Left" Text="{Binding Description}" Height="25" Width="150" />
<TextBox x:Name="EditableDescription" Visibility="Collapsed" DockPanel.Dock="Left" Text="{Binding Description}" Height="25" Width="150" />
<Button DockPanel.Dock="Left" Click="EditTaskItemClick">EDIT</Button>
</DockPanel>
</DataTemplate>
</TaskDashControls:ListBoxWithAddRemove.ItemTemplate>
</TaskDashControls:ListBoxWithAddRemove>
I have now removed the DataTemplate, to move it over to the custom control:
<!-- In my MainWindow.XAML -->
<TaskDashControls:ListBoxWithAddRemove x:Name="listBoxItems" Grid.Row="1" Grid.Column="3" Grid.RowSpan="3"
ItemsSource="{Binding}"/>
Here is the custom control in Generic.XAML:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TaskDash.Controls">
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
<Style TargetType="{x:Type TextBox}">
<Setter Property="Margin" Value="2" />
</Style>
<Style x:Key="{x:Type local:ListBoxWithAddRemove}" TargetType="{x:Type local:ListBoxWithAddRemove}">
<Setter Property="Margin" Value="3" />
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--<Button Grid.Column="0" Grid.Row="0" x:Name="DeleteButton"
Click="DeleteControlClick">Delete</Button>
<Button Grid.Column="1" Grid.Row="0" x:Name="AddButton"
Click="AddControlClick">Add</Button>-->
<Button Grid.Column="0" Grid.Row="0" x:Name="DeleteButton">Delete</Button>
<Button Grid.Column="1" Grid.Row="0" x:Name="AddButton">Add</Button>
<Border
Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"
Name="Border"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="2">
<ScrollViewer
Margin="0"
Focusable="false">
<StackPanel Margin="0" IsItemsHost="True" />
</ScrollViewer>
<!--<ListBox ItemTemplate="{TemplateBinding ItemTemplate}">
<DataTemplate>
<DockPanel>
<TextBlock x:Name="LabelDescription" Visibility="Visible" DockPanel.Dock="Left" Text="{Binding Description}" Height="25" Width="150" />
<TextBox x:Name="EditableDescription" DockPanel.Dock="Left" Text="{Binding Description}" Height="25" Width="150" />
</DockPanel>
</DataTemplate>
</ListBox>-->
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is my custom control class
using System;
using System.Windows;
using System.Windows.Controls;
namespace TaskDash.Controls
{
[TemplatePart(Name = "Text", Type = typeof(TextBox))]
[TemplatePart(Name = "LabelText", Type = typeof(TextBlock))]
public class TextBoxWithDescription : Control
{
static TextBoxWithDescription()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(TextBoxWithDescription), new FrameworkPropertyMetadata(typeof(TextBoxWithDescription)));
}
public TextBoxWithDescription()
{
LabelText = String.Empty;
Text = String.Empty;
}
public static readonly DependencyProperty LabelTextProperty =
DependencyProperty.Register("LabelText", typeof(string), typeof(TextBoxWithDescription),
new PropertyMetadata(string.Empty, OnLabelTextPropertyChanged));
private static void OnLabelTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
}
public string LabelText
{
get { return GetValue(LabelTextProperty).ToString(); ; }
set { SetValue(LabelTextProperty, value); }
}
// http://xamlcoder.com/cs/blogs/joe/archive/2007/12/13/building-custom-template-able-wpf-controls.aspx
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(TextBoxWithDescription),
new UIPropertyMetadata(null,
new PropertyChangedCallback(OnTextChanged)
));
private static void OnTextChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
TextBoxWithDescription textBox = o as TextBoxWithDescription;
if (textBox != null)
textBox.OnTextChanged((String)e.OldValue, (String)e.NewValue);
}
protected virtual void OnTextChanged(String oldValue, String newValue)
{
// fire text changed event
this.Text = newValue;
this.RaiseEvent(new RoutedEventArgs(TextChangedEvent, this));
}
public string Text
{
get { return GetValue(TextProperty).ToString(); }
set { SetValue(TextProperty, value); }
}
public static readonly RoutedEvent TextChangedEvent =
EventManager.RegisterRoutedEvent("TextChanged",
RoutingStrategy.Bubble,
typeof(RoutedEventHandler),
typeof(TextBoxWithDescription));
public event RoutedEventHandler TextChanged
{
add { AddHandler(TextChangedEvent, value); }
remove { RemoveHandler(TextChangedEvent, value); }
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
//var textBlock = (TextBlock)this.Template.FindName("LabelText", this);
//if (textBlock != null) textBlock.Text = this.LabelText;
//var textBox = (TextBox)this.Template.FindName("Text", this);
//if (textBox != null) textBox.Text = this.Text;
}
}
}

I would create a class for TODO with Properties: String Desc, Visibility txtBox, Visibility txtBlock. Then items source for the TaskDashControls is List TODO. In xaml you can bind the visibilty property. In the TODO class you can control that when one is visible the other is not.