Click here to Skip to main content
15,890,043 members
Home / Discussions / WPF
   

WPF

 
GeneralRe: Conditional DataBinding to UI Elements Pin
Mycroft Holmes5-Feb-12 12:15
professionalMycroft Holmes5-Feb-12 12:15 
GeneralRe: Conditional DataBinding to UI Elements Pin
SledgeHammer015-Feb-12 12:26
SledgeHammer015-Feb-12 12:26 
GeneralRe: Conditional DataBinding to UI Elements Pin
Mycroft Holmes5-Feb-12 13:15
professionalMycroft Holmes5-Feb-12 13:15 
GeneralRe: Conditional DataBinding to UI Elements Pin
SledgeHammer015-Feb-12 14:14
SledgeHammer015-Feb-12 14:14 
GeneralRe: Conditional DataBinding to UI Elements Pin
Mycroft Holmes5-Feb-12 15:15
professionalMycroft Holmes5-Feb-12 15:15 
AnswerRe: Conditional DataBinding to UI Elements Pin
Mycroft Holmes5-Feb-12 15:16
professionalMycroft Holmes5-Feb-12 15:16 
GeneralRe: Conditional DataBinding to UI Elements Pin
Andy_L_J5-Feb-12 15:43
Andy_L_J5-Feb-12 15:43 
QuestionOwn TreeViewItem with image and text Pin
Mc_Topaz2-Feb-12 22:20
Mc_Topaz2-Feb-12 22:20 
For a TreeView I would like my items to contain an image and a string.

I have created a WPF UserControl for this called: TreeNode, which has this declaration C# and XAML codes:
C#
public partial class TreeNode : UserControl
{
    public TreeNode()
    {
        InitializeComponent();
    }

    public string Header
    {
        get { return txtNodeHeader.Text; }
        set { txtNodeHeader.Text = value; }
    }

    public Image Image
    {
        get { return imgNodeImage; }
        set { imgNodeImage = value; }
    }
}
XML
<UserControl x:Class="TreeViewPicture.TreeNode" 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="20"
d:DesignWidth="150">
    
    <StackPanel Orientation="Horizontal">
        <Image Name="imgNodeImage" Width="16" Height="16" />
        <Separator Width="10" />
        <TextBlock Name="txtNodeHeader" Text="NodeHeaderText" />
    </StackPanel>
    
</UserControl>


For my MainWindow I have this XAML codes:
XML
<Window x:Class="TreeViewPicture.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TreeViewPicture"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TreeView Name="tvTree">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Nodes}" DataType="{x:Type local:ImageNode}">
                    <Grid>
                        <!--<TextBlock Text="{Binding Header}" />-->
                        <local:TreeNode Header="{Binding Header}" Image="{Binding Image}" />
                    </Grid>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>


MainWindow.cs contains a set of classes to define my tree structure:

Base node object for all items in the TreeView:
C#
public abstract class Node
    {
        ObservableCollection<Node> nodes = new ObservableCollection<Node>();
        Image image;
        string header;

        public Node(string header, BitmapImage image)
        {
            this.header = header;
            this.image = new Image();
            this.image.Width = 16;
            this.image.Source = image;
        }

        public string Header
        {
            get { return header; }
        }

        public Image Image
        {
            get { return image; }
        }

        public ObservableCollection<Node> Nodes
        {
            get { return nodes; }
        }
    }


Top level object in tree structure
C#
public class Server : Node
{
    public Server(string header, BitmapImage image) : base (header, image)
    {
    }
}

All other levels in tree structure
C#
public class Gateway : Node
{
    public Gateway(string header, BitmapImage image) : base(header, image)
    {
    }
}


MainWindow class:

C#
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

    public partial class MainWindow : Window
    {
        BitmapImage serverImage;
        BitmapImage gatewayImage;

        public MainWindow()
        {
            InitializeComponent();
            InitImages();

            Server server = new Server("Server", serverImage);
            Gateway gateway = new Gateway("Gateway", gatewayImage);

            ObservableCollection<Node> nodes = new ObservableCollection<Node>();
            
            nodes.Add(server);
            server.Nodes.Add(gateway);
            tvTree.ItemsSource = nodes;
        }

        private void InitImages()
        {
            serverImage = new BitmapImage();
            serverImage.BeginInit();
            serverImage.UriSource = new Uri(@"C:\Users\TheUser\Images\Server.png");
            serverImage.EndInit();

            gatewayImage = new BitmapImage();
            gatewayImage.BeginInit();
            gatewayImage.UriSource = new Uri(@"C:\Users\TheUser\Images\Gateway.png");
            gatewayImage.EndInit();
        }
    }


When I try to run this I get a XamlParseException with the following text:
A 'Binding' cannot be set on the 'Header' property of type 'TreeNode'. A 'Binding' can only be set on a DependencyProperty of a DependencyObject.

XAML is rather tricky and I cannot make any sense of that and what I'm doing wrong.

If I swop in MainWindow XAML code to use the TextBlock object instead of TreeNode. I can see the items I want in the TreeView, but with no picture of course.

Any help would be very nice.
AnswerRe: Own TreeViewItem with image and text Pin
Mc_Topaz3-Feb-12 0:52
Mc_Topaz3-Feb-12 0:52 
GeneralGridSplitter Conundrum Pin
Gil Yoder1-Feb-12 15:31
Gil Yoder1-Feb-12 15:31 
QuestionRe: GridSplitter Conundrum Pin
Gil Yoder2-Feb-12 9:44
Gil Yoder2-Feb-12 9:44 
AnswerRe: GridSplitter Conundrum Pin
SledgeHammer012-Feb-12 11:40
SledgeHammer012-Feb-12 11:40 
GeneralRe: GridSplitter Conundrum Pin
Gil Yoder2-Feb-12 14:09
Gil Yoder2-Feb-12 14:09 
GeneralRe: GridSplitter Conundrum Pin
SledgeHammer012-Feb-12 14:37
SledgeHammer012-Feb-12 14:37 
GeneralRe: GridSplitter Conundrum Pin
Gil Yoder2-Feb-12 15:43
Gil Yoder2-Feb-12 15:43 
SuggestionRe: GridSplitter Conundrum Pin
Gil Yoder2-Feb-12 18:59
Gil Yoder2-Feb-12 18:59 
GeneralRe: GridSplitter Conundrum Pin
SledgeHammer013-Feb-12 7:17
SledgeHammer013-Feb-12 7:17 
Questionadding/removing ListView columns at runtime (revisited) Pin
Vincent Beek1-Feb-12 0:20
Vincent Beek1-Feb-12 0:20 
AnswerRe: adding/removing ListView columns at runtime (revisited) Pin
Abhinav S1-Feb-12 0:36
Abhinav S1-Feb-12 0:36 
GeneralRe: adding/removing ListView columns at runtime (revisited) Pin
Mycroft Holmes1-Feb-12 11:53
professionalMycroft Holmes1-Feb-12 11:53 
QuestionBinding list of items to IntemsControl in WPF Pin
rams230-Jan-12 23:14
rams230-Jan-12 23:14 
AnswerRe: Binding list of items to IntemsControl in WPF Pin
Wayne Gaylard31-Jan-12 0:10
professionalWayne Gaylard31-Jan-12 0:10 
GeneralRe: Binding list of items to IntemsControl in WPF Pin
rams231-Jan-12 0:36
rams231-Jan-12 0:36 
GeneralRe: Binding list of items to IntemsControl in WPF Pin
Wayne Gaylard31-Jan-12 0:39
professionalWayne Gaylard31-Jan-12 0:39 
GeneralRe: Binding list of items to IntemsControl in WPF Pin
Abhinav S1-Feb-12 16:26
Abhinav S1-Feb-12 16:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.