Develop Reference

WPF listbox does not release the memory after value is changed

I have a listbox that includes images, the value is bonded to a list but when I change the list the memory of the older value is not being released.
public double ImageBorderWidth { get; set; }
private BindableCollection<ThumbnailViewModel> _thumbnails;
public BindableCollection<ThumbnailViewModel> Thumbnails
{
get => _thumbnails;
private set
{
_thumbnails = value;
NotifyOfPropertyChange(() => Thumbnails);
}
}
And here is the XML file.
<telerik:RadListBox x:Name="Thumbnails" BorderThickness="0" BorderBrush="{x:Null}" Margin="0" Padding="5" AllowDrop="False" SelectionMode="Extended" telerik:ListBoxSelectedItemsBehavior.SelectedItemsSource="{Binding SelectedThumbnails}">
<telerik:RadListBox.ItemsPanel>
<ItemsPanelTemplate>
<telerik:VirtualizingWrapPanel ItemHeight="{Binding ThumbnailHeight}" ItemWidth="{Binding ThumbnailWidth}"
CanVerticallyScroll="True" CanHorizontallyScroll="False" ScrollStep="100"/>
</ItemsPanelTemplate>
</telerik:RadListBox.ItemsPanel>
<telerik:RadListBox.ItemContainerStyle>
<Style TargetType="{x:Type telerik:RadListBoxItem}" BasedOn="{StaticResource RadListBoxItemStyle}">
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadListBoxItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:RadListBox.ItemContainerStyle>
<telerik:RadListBox.DragDropBehavior>
<behaviors:NoRemovalListBoxDragDropBehavior AllowReorder="False" />
</telerik:RadListBox.DragDropBehavior>
<telerik:RadListBox.DragVisualProvider>
<telerik:ScreenshotDragVisualProvider />
</telerik:RadListBox.DragVisualProvider>
</telerik:RadListBox>

WPF Custom Base Window Class and Style

I have a an app that will open many windows, and I want all windows to look the same. I am overriding the default Windows window chrome style and making my own, so any new window that is opened (excluding messageboxes) should have the same window style. However, no matter what I seem to try it does not work. I can get it to work with one window, but when I want to make it a global style it always crashes or simply doesn't work as it should.
Here is my code:
WindowBaseStyle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyProject.Styles"
xmlns:views="clr-namespace:Myproject.Views">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="GlobalStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type views:WindowBase}" BasedOn="{StaticResource {x:Type Window}}">
<Setter Property="AllowsTransparency" Value="False" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="WindowState" Value="Normal" />
<Setter Property="WindowStyle" Value="SingleBorderWindow" />
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CaptionHeight="30"
UseAeroCaptionButtons="False"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type views:WindowBase}">
<Border BorderBrush="Blue" BorderThickness="1" SnapsToDevicePixels="True">
<DockPanel Background="White" LastChildFill="True" >
<Grid Background="Blue" DockPanel.Dock="Top">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Center">
<Button Name="PART_SystemMenuButton" Command="{Binding MenuCommand}" Style="{DynamicResource SystemIconButton}">
<Image Height="16" Width="16" Source="/Resources/icon.png" Stretch="Fill"/>
</Button>
<Viewbox Height="16" HorizontalAlignment="Stretch" Margin="14,2,0,0" >
<TextBlock FontSize="12" Foreground="White" Text="{Binding Title,RelativeSource={RelativeSource FindAncestor,AncestorType=Window}}" />
</Viewbox>
</StackPanel>
<StackPanel Orientation="Horizontal" WindowChrome.IsHitTestVisibleInChrome="True">
<Button x:Name="PART_MinimizeButton" Command="{Binding MinimizeCommand}" Height="30" Margin="0,0,0,0" ToolTip="Minimize" Width="45">
<Image Source="/Resources/minimize.png" Stretch="None" />
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#0079CB" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#64AEEC"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="PART_MaximizeButton" Command="{Binding MaximizeCommand}" Height="30" Margin="0,0,0,0" Width="45">
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=WindowState}" Value="Normal">
<Setter Property="Source" Value="/Resources/maximize.png" />
<Setter Property="Stretch" Value="None" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=WindowState}" Value="Maximized">
<Setter Property="Source" Value="/Resources/unmaximize.png" />
<Setter Property="Stretch" Value="None" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#0079CB" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#64AEEC"/>
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=WindowState}" Value="Normal">
<Setter Property="ToolTip" Value="Maximize" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=WindowState}" Value="Maximized">
<Setter Property="ToolTip" Value="Restore Down" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="PART_CloseButton" Command="{Binding CloseCommand}" Height="30" Margin="0,0,0,0" ToolTip="Close" Width="45" >
<Image Source="/Resources/close.png" Stretch="None" />
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#0079CB" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<!-- this ContentPresenter automatically binds to the content of the window -->
<ContentPresenter />
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
WindowBase.cs
using System;
using System.Runtime.InteropServices;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Interop;
namespace MyProject.Views
{
[TemplatePart(Name = "PART_MinimizeButton", Type = typeof(Button))]
[TemplatePart(Name = "PART_MaximizeButton", Type = typeof(Button))]
[TemplatePart(Name = "PART_CloseButton", Type = typeof(Button))]
[TemplatePart(Name = "PART_SystemMenuButton", Type = typeof(Button))]
public class WindowBase: Window
{
static WindowBase()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomWindow), new FrameworkPropertyMetadata(typeof(CustomWindow)));
}
public WindowBase()
{
Loaded += (sender, evnt) =>
{
var MinimizeButton = (Button)Template.FindName("PART_MinimizeButton", this);
var MaximizeButton = (Button)Template.FindName("PART_MaximizeButton", this);
var CloseButton = (Button)Template.FindName("PART_CloseButton", this);
var SystemMenuButton = (Button)Template.FindName("PART_SystemMenuButton", this);
MinimizeButton.Click += (s, e) => WindowState = WindowState.Minimized;
MaximizeButton.Click += (s, e) => WindowState = WindowState == WindowState.Maximized ? WindowState.Normal : WindowState.Maximized;
CloseButton.Click += (s, e) => Close();
SystemMenuButton.Click += (s, e) => SystemCommands.ShowSystemMenu(this, GetMousePosition());
};
}
}
}
Window1.xaml
<local:WindowBase x:Class="MyProject.Views.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyProject.Views"
Height="750"
Width="1125">
<Grid>
</Grid>
</local:WindowBase>
Window1.xaml.cs
using System.Windows;
namespace MyProject.Views
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1: WindowBase
{
public Window1()
{
InitializeComponent();
}
}
}
I am overall following the MVVM pattern, and for the most part from all the articles and videos I have looked at online, they all follow this basic approach and they say it all works, but I can't seem to get it to work.
An additional note is that whenever I add my custom window control to the Window1.xaml file, it breaks the designer and says it is "Invalid Markup"
Also note I added my "WindowBaseStyle" resource dictionary to the App.xaml file as a merged resource dictionary.
Any help is greatly appreciated!! Thanks

Ok, as we discussed in the comments, it seems like the fastest solution to the problem you described is to use a StaticResource to get the window's style from a resource dictionary (or create an implicit style for windows.) I questioned the role of CustomWindow because I thought that might be causing problems with your default style override. (Remember: if you go the lookless control route and try to use the DefaultStyleKeyProperty override, you have to do this on every subclass of that control.)
However, I think doing something like this will get you reusable plumbing for multiple windows driven by viewmodels...
PopupHost
A class that would derive from your customized window. This code provides the following behaviors:
Allows the viewmodel to mark itself as having served its purpose, causing the window to close.
Allows attached properties to be specified by individual views that can affect the way the window appears on-screen, e.g. the window title.
Can be extended to notify presented items that the user has tried closing the window, allowing interception/cancellation or cleanup actions to be performed.
Code:
public class PopupHost : Window
{
private readonly AwaitableViewModelBase _viewModel;
public PopupHost(Window owner, AwaitableViewModelBase viewModel, string dataTemplateKey = null)
{
Owner = owner;
_viewModel = viewModel;
// Wrap the content in another presenter -- makes it a little easier to get to in order to look for attached properties.
var contentPresenter = new ContentPresenter
{
Content = viewModel
};
if (!string.IsNullOrWhiteSpace(dataTemplateKey))
contentPresenter.ContentTemplate = (DataTemplate) FindResource(dataTemplateKey);
Content = contentPresenter;
Task.Run(async () =>
{
await viewModel.Task;
Dispatcher.Invoke(Close);
});
Closed += ClosedHandler;
ApplyTemplate();
// Grab attached property values from the user control (or whatever element... you just need to find the descendant)
var contentElement = FindDescendantWithNonDefaultPropertyValue(contentPresenter, PopupWindowProperties.TitleProperty);
if (contentElement != null)
{
var binding = new Binding { Source = contentElement, Path = new PropertyPath(PopupWindowProperties.TitleProperty) };
SetBinding(TitleProperty, binding);
}
}
private void ClosedHandler(object sender, EventArgs args)
{
_viewModel?.Cancel();
Closed -= ClosedHandler;
}
private static Visual FindDescendant(Visual element, Predicate<Visual> predicate)
{
if (element == null)
return null;
if (predicate(element))
return element;
Visual foundElement = null;
(element as FrameworkElement)?.ApplyTemplate();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(element); i++)
{
var visual = VisualTreeHelper.GetChild(element, i) as Visual;
foundElement = FindDescendant(visual, predicate);
if (foundElement != null)
break;
}
return foundElement;
}
private static Visual FindDescendantWithNonDefaultPropertyValue(Visual element, DependencyProperty dp)
{
return FindDescendant(element, e => !(dp.GetMetadata(e).DefaultValue ?? new object()).Equals(e.GetValue(dp)));
}
}
PopupWindowProperties
Just a dumb object containing solely attached properties so your views can convey some information to the window.
public static class PopupWindowProperties
{
public static readonly DependencyProperty TitleProperty = DependencyProperty.RegisterAttached("Title", typeof(string), typeof(PopupWindowProperties), new FrameworkPropertyMetadata(string.Empty));
public static void SetTitle(UIElement element, string value) => element.SetValue(TitleProperty, value);
public static string GetTitle(UIElement element) => element.GetValue(TitleProperty) as string;
}
AwaitableViewModelBase
A simple abstract viewmodel which has a TaskCompletionSource. This allows the popup window and the viewmodel to coordinate closing.
public abstract class AwaitableViewModelBase : ViewModelBase
{
protected TaskCompletionSource<bool> TaskCompletionSource { get; set; }
public Task<bool> Task => TaskCompletionSource?.Task;
public void RegisterTaskCompletionSource(TaskCompletionSource<bool> tcs)
{
var current = TaskCompletionSource;
if (current != null && current.Task.Status == TaskStatus.Running)
throw new InvalidOperationException();
TaskCompletionSource = tcs;
}
public virtual void Cancel() => SetResult(false);
protected void SetResult(bool result) => TaskCompletionSource?.TrySetResult(result);
}
WindowService
Last but not least, the simple service that can present the requested view and viewmodel. You can use implicit DataTemplates for your viewmodels, or provide the specific x:Key value of the template you wish to use. Note that the await doesn't really do anything here because ShowDialog blocks. We return the bool since it can be used to easily identify if the user hit OK or Cancel on a modal.
public class WindowService
{
public async Task<bool> ShowModalAsync(AwaitableViewModelBase viewModel, string dataTemplateKey = null)
{
var tcs = new TaskCompletionSource<bool>();
viewModel.RegisterTaskCompletionSource(tcs);
Application.Current.Dispatcher.Invoke(() =>
{
var currentWindow = Application.Current.Windows.OfType<Window>().SingleOrDefault(x => x.IsActive) ?? Application.Current.MainWindow;
var window = new PopupHost(currentWindow, viewModel, dataTemplateKey);
window.ShowDialog();
});
return await viewModel.Task;
}
}

Swapping ContentPresenter content in custom control

I have 2 ContentPresenter fixedContentPresenter and resizableContentPresenter and obviously a Content in Generic.xaml. How can i set the Content to be only in fixedContentPresenter when FixedContent = true; and Content to be only in resizableContentPresenter when FixedContent = false;
I tried changing the content in the code but the content is not showing.
Xaml:
<Grid>
<ContentPresenter x:Name="fixedContent"/>
<Grid>
<ContentPresenter x:Name="resizableContent"/>
</Grid>
</Grid>

Use an implicit style on the content presenters to either hide or show a specific presenter depending on the value of FixedContent
<Style TargetType={x:Type ContentPresenter } x:Key="HideOrShow">
<Style.Triggers>
<DataTrigger Binding="{Binding FixedContent}" Value="False">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>

You should use ContentControl here instead of ContentPresenter.
When FixedContent values changes, Content becomes null, so no Animation related side-effects.
<Grid Background="Purple">
<ContentControl x:Name="fixedContent" Margin="0,75,0,0">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding FixedContent, Mode=OneWay}" Value="false">
<DataTrigger.Setters>
<Setter Property="Content" Value="{StaticResource ContentKey}"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<Grid Background="Red" Margin="0,54,0,0">
<ContentControl x:Name="resizableContent" Margin="0,75,0,0">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding FixedContent, Mode=OneWay}" Value="true">
<DataTrigger.Setters>
<Setter Property="Content" Value="{StaticResource ContentKey}"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
</Grid>

After a day of struggle, I finally found a better answer than that proposed by #OmegaMan, let's hope it help others. Here's the new XAML (added Content="{x:Null}" to both ContentPresenter):
<Grid>
<ContentPresenter x:Name="fixedContent" Content="{x:Null}"/>
<Grid>
<ContentPresenter x:Name="resizableContent" Content="{x:Null}"/>
</Grid>
</Grid>
And the FixedContent logic:
public bool FixedContent
{
get { return (bool)GetValue(FixedContentProperty); }
set
{
SetValue(FixedContentProperty, value);
if (value) // Is Fixed
{
ResizableContentPresenter.Content = null;
FixedContentPresenter.Content = Content;
}
else
{
FixedContentPresenter.Content = null;
ResizableContentPresenter.Content = Content;
}
}
}

Two Context Menu Sharing Icons but only one context menu icons shows

I am having two Context Menus like Below, both are having same syntax and are resources of different controls.
<ContextMenu ItemsSource="{Binding Actions}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MetroMenuItem}">
<Setter Property="Header" Value="{Binding Title}"/>
<Setter Property="ToolTip" Value="{Binding ToolTips}"/>
<Setter Property="Command" Value="{Binding Command}"/>
<Setter Property="Icon" Value="{Binding Icon}"/>
<Setter Property="CommandParameter" Value="{Binding CommandParameter}"/>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
All works fine but only problem with Icon.
ViewModel
I have a property like below,
public Image Icon
{
get { return _Icon; }
set{ _Icon = value; NotifyPropertyChanged(); }
}
I am initializing it like below,
Icon = new Image
{
Source = new BitmapImage(new Uri(#"../images/ReIndex.png", UriKind.Relative)),
Height = 20,
Width = 20,
Margin = new Thickness(5)
};
The issue is that if one context menu shows the icon the other wont.
I know MenuItem.Icon is an Object. so i tried to using BitmapImage instead of Image directly but still i have the issue.
Edit/Solved
Added a resource like below,
<Control.Resources>
<Image x:Shared="False" x:Key="Icon" Source="{Binding Icon}" Height="20" Width="20"/>
</Control.Resources>
Then My Context Menu looks like below,
<ContextMenu ItemsSource="{Binding Actions}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MetroMenuItem}">
<Setter Property="Header" Value="{Binding Title}"/>
<Setter Property="ToolTip" Value="{Binding ToolTips}"/>
<Setter Property="Command" Value="{Binding Command}"/>
<Setter Property="Icon" Value="{StaticResource Icon}"/>
<Setter Property="CommandParameter" Value="{Binding CommandParameter}"/>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
ViewModel Now
public BitmapImage Icon
{
get { return _Icon; }
set{ _Icon = value; NotifyPropertyChanged(); }
}
Icon = new BitmapImage(new Uri(#"../images/Pencil-01.png", UriKind.Relative));
Main point is x:Shared="False" in the Image Control.
If any other good solution appreciated.

Added a resource like below,
<Control.Resources>
<Image x:Shared="False" x:Key="Icon" Source="{Binding Icon}" Height="20" Width="20"/>
</Control.Resources>
Then My Context Menu looks like below,
<ContextMenu ItemsSource="{Binding Actions}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MetroMenuItem}">
<Setter Property="Header" Value="{Binding Title}"/>
<Setter Property="ToolTip" Value="{Binding ToolTips}"/>
<Setter Property="Command" Value="{Binding Command}"/>
<Setter Property="Icon" Value="{StaticResource Icon}"/>
<Setter Property="CommandParameter" Value="{Binding CommandParameter}"/>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
ViewModel
public BitmapImage Icon
{
get { return _Icon; }
set{ _Icon = value; NotifyPropertyChanged(); }
}
Icon = new BitmapImage(new Uri(#"../images/Pencil-01.png", UriKind.Relative));
Main point is x:Shared="False" in the Image Control.

Binding custom ItemsControl

I’m trying to create custom Itemscontrol class to display a group of different shapes.
To speed up process, I have reused source code from CodeProject (WPF Diagram Designer - Part 4) where all implementation is done but shapes are added from XAML code. For my purposes, I need to add them from code behind (dynamically) so I bound custom Itemscontrol to list of ObservableCollection. Now, instead of shapes be presented like this:
I get something like this:
Can somebody tell me what I’m doing wrong?
Any help will be appreciated. Thanks in advance.
XAML:
<s:Toolbox x:Key="FlowChartStencils" ItemsSource="{Binding ElementName=MyDesigner, Path=ToolboxDataItems}" ItemTemplate="{StaticResource toolboxItemTemplate}" ItemSize="190,150" SnapsToDevicePixels="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</s:Toolbox>
<DataTemplate x:Key="toolboxItemTemplate">
<Grid Margin="5,5,5,5">
<Path Style="{StaticResource Process}">
<s:DesignerItem.DragThumbTemplate>
<ControlTemplate>
<Path Style="{StaticResource Process_DragThumb}"/>
</ControlTemplate>
</s:DesignerItem.DragThumbTemplate>
</Path>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text=" {Binding Title}" IsHitTestVisible="False" FontWeight="Bold"/>
</Grid>
</DataTemplate>
<Style x:Key="Process" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
<Setter Property="Data" Value="M 0,0 H 60 V40 H 0 Z"/>
</Style>
<Style x:Key="Process_DragThumb" TargetType="Path" BasedOn="{StaticResource Process}">
<Setter Property="IsHitTestVisible" Value="true"/>
<Setter Property="Fill" Value="Transparent"/>
<Setter Property="Stroke" Value="Transparent"/>
</Style>
<Style x:Key="FlowChartItemStyle" TargetType="Path">
<Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
<Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<Brush x:Key="ItemStroke">#FFD69436</Brush>
<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FAFBE9" Offset="0" />
<GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Code behind:
// Implements ItemsControl for ToolboxItems
public class Toolbox : ItemsControl
{
// Defines the ItemHeight and ItemWidth properties of
// the WrapPanel used for this Toolbox
public Size ItemSize
{
get { return itemSize; }
set { itemSize = value; }
}
private Size itemSize = new Size(50, 50);
// Creates or identifies the element that is used to display the given item.
protected override DependencyObject GetContainerForItemOverride()
{
return new ToolboxItem();
}
// Determines if the specified item is (or is eligible to be) its own container.
protected override bool IsItemItsOwnContainerOverride(object item)
{
return (item is ToolboxItem);
}
}
// Represents a selectable item in the Toolbox/>.
public class ToolboxItem : ContentControl
{
…
}
public class ToolboxDataItem : DependencyObject
{
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register( "Title", typeof( string ),
typeof(ToolboxDataItem), new UIPropertyMetadata(""));
public ToolboxDataItem(string title)
{
Title = title;
}
}
public partial class DesignerCanvas : Canvas
{
private ObservableCollection<ToolboxDataItem> toolboxDataItems = new ObservableCollection<ToolboxDataItem>();
public ObservableCollection<ToolboxDataItem> ToolboxDataItems
{
get { return toolboxDataItems; }
}
public DesignerCanvas()
{
ToolboxDataItem toolboxDataItem = new ToolboxDataItem("123");
ToolboxDataItems.Add(toolboxDataItem );
toolboxDataItem = new ToolboxDataItem("456");
ToolboxDataItems.Add(toolboxDataItem );
}
}
MyDesigner:
<s:DesignerCanvas Focusable="true" x:Name="MyDesigner"
Background="{StaticResource WindowBackgroundBrush}" FocusVisualStyle="{x:Null}"
ContextMenu="{StaticResource DesignerCanvasContextMenu}"/>

So I started by trying to get an app going with the code you shared but the styles were all in an incorrect order, so after the styles were set correctly I got arround to an example like this:
<Window.Resources>
<ResourceDictionary>
<Brush x:Key="ItemStroke">#FFD69436</Brush>
<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FAFBE9" Offset="0" />
<GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="FlowChartItemStyle" TargetType="Path">
<Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
<Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<Style x:Key="Process" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
<Setter Property="Data" Value="M 0,0 H 60 V40 H 0 Z"/>
</Style>
<DataTemplate x:Key="toolboxItemTemplate">
<Grid Margin="5,5,5,5">
<Path Style="{StaticResource Process}">
</Path>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}" IsHitTestVisible="False" FontWeight="Bold"/>
</Grid>
</DataTemplate>
<Style x:Key="Process_DragThumb" TargetType="Path" BasedOn="{StaticResource Process}">
<Setter Property="IsHitTestVisible" Value="true"/>
<Setter Property="Fill" Value="Transparent"/>
<Setter Property="Stroke" Value="Transparent"/>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<ItemsControl Background="Yellow"
ItemsSource="{Binding ToolboxDataItems}"
ItemTemplate="{StaticResource toolboxItemTemplate}"
SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</ItemsControl>
</Grid>
So if you check this example to yours then your problem might be in one of two places:
1) The Text binding of the TextBlock (notice the space before the {):
2) Or the Path inside the ItemsSource binding of the toolbox
<s:Toolbox x:Key="FlowChartStencils" ItemsSource="{Binding ElementName=MyDesigner, Path=ToolboxDataItems}" ItemTemplate="{StaticResource toolboxItemTemplate}" ItemSize="190,150" SnapsToDevicePixels="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
Here try something like ItemsSource="{Binding ToolboxDataItems, ElementName=MyDesigner}"