Add icon in xaml WPF System.Windows.Controls.TreeView

Hi,

I'm xaml newbie. I'm trying to add icon in TreeViewItem in Windows.Controls and icon can be changed when select and unselect tree item.

Please kindly help. Thank you very much in advance.

P.S. I can't find where is the xaml WPF zone.
<UserControl ... 
             d:DesignHeight="300" d:DesignWidth="300">

    <Grid DataContext="{Binding}">
        <Button Content="Ok" HorizontalAlignment="Right" Margin="0,0,66,12" Name="okButton" Width="48" Height="22" VerticalAlignment="Bottom" Click="OkButtonClick" />
        <Button Content="Cancel" Margin="0,0,12,12" Name="cancelButton" HorizontalAlignment="Right" Width="48" Height="22" VerticalAlignment="Bottom" Click="CancelButtonClick" />
        <TreeView Name="mTreeView" Margin="12,12,12,50" MouseDoubleClick="mTreeView_MouseDoubleClick">
            <TreeView.Resources>
                <Style TargetType="TreeViewItem">
                    <Setter Property="IsExpanded" Value="True" />                  
                </Style>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</UserControl>

Open in new window

chang2008Asked:
Who is Participating?
 
saraganiConnect With a Mentor Commented:
Can you attach your project?
I want to see it completely with all of it's files (the Image uri might be wrong)

Try putting the uri as absolute uri (which also includes the assembly name)
0
 
saraganiCommented:
Hi, and what is someone wants a small movie instead of image?
Or what about a custom control where the user can click on it at opens a popup with several options??


Are you getting my point? Why sticking with image when you can add anything?
It's WPF.

<UserControl ... 
             d:DesignHeight="300" d:DesignWidth="300">

    <Grid DataContext="{Binding}">
        <Button Content="Ok" HorizontalAlignment="Right" Margin="0,0,66,12" Name="okButton" Width="48" Height="22" VerticalAlignment="Bottom" Click="OkButtonClick" />
        <Button Content="Cancel" Margin="0,0,12,12" Name="cancelButton" HorizontalAlignment="Right" Width="48" Height="22" VerticalAlignment="Bottom" Click="CancelButtonClick" />
        <TreeView Name="mTreeView" Margin="12,12,12,50" MouseDoubleClick="mTreeView_MouseDoubleClick">
             <StackPanel Orientation="Horizontal">
                   <Image
                        Width="16"
                        Height="16"
                        Stretch="Fill"
                        Source="Images/someImage.png"/>
                  <TextBlock Text="MyText" Margin="5,0" />
             </StackPanel>

            <TreeView.Resources>
                <Style TargetType="TreeViewItem">
                    <Setter Property="IsExpanded" Value="True" />                  
                </Style>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</UserControl>

Open in new window




WPF let you put anything... now you decide what.
0
 
saraganiCommented:
Btw, although this code works, the best way would be defining the ItemTemplate and have a DataTemplate which contains the stackpanel, image and the textblock.
Then have both image and textblock get it's content from it's binding (each tree item will have a property of text and image).

You can also have all the text build in XAML (TreeViewItems in hierarchical structure), but what the fun with that?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
chang2008Author Commented:
Hi,

I have tried your code.

In Visual Studio, the icon is shown. Compile is ok.
But when debug, the icon is not shown.

Do you have any idea?

Many thanks. :)   in Visual Studio when debug
0
 
chang2008Author Commented:

I can't attach the project.
By the way, I have got the following exception :

UriFormatException was throw on "Image". Invalid URI: The format of the URI could not be determined.

I use .bmp format.
Invalid URI: The format of the URI could not be determined.
   at System.Uri.CreateThis(String uri, Boolean dontEscape, UriKind uriKind)
   at System.Uri..ctor(String uriString, UriKind uriKind)
   at MS.Internal.Host.BinaryResourceImpl.get_FileUri()
   at MS.Internal.Host.MarkupProjectContext.GetBinaryResource(Uri uri)
   at Microsoft.Windows.Design.DocumentModel.MarkupDocumentManagerBase.TreeChangeListener.Microsoft.Windows.Design.DocumentModel.IDocumentTreeConsumer.HandleMessage(DocumentTreeCoordinator sender, MessageKey key, MessageArguments args)
   at Microsoft.Windows.Design.DocumentModel.MarkupDocumentManagerBase.CancelableDocumentTreeCoordinator.RouteMessage[T](IDocumentTreeConsumer consumer, MessageKey`1 key, T args)
   at Microsoft.Windows.Design.DocumentModel.DocumentTreeCoordinator.SendMessage[T](MessageKey`1 key, T args, Boolean isPrivateMessage)
   at Microsoft.Windows.Design.DocumentModel.DocumentTreeCoordinator.SendMessage[T](MessageKey`1 key, T args)
   at Microsoft.Windows.Design.DocumentModel.DocumentTreeCoordinator.QueryValue[TResult,TParameter](QueryKey`2 key, IDocumentTreeConsumer consumer, TParameter parameter)
   at Microsoft.Windows.Design.Platform.ViewProducerBase.MS.Internal.Platform.IResourceResolver.GetBinaryResource(Uri uri)
   at MS.Internal.Platform.CiderProjectContext.MakeDesignTimeUri(Uri uri, String documentUrl)
   at Microsoft.Expression.DesignModel.Core.DocumentContext.MakeDesignTimeUri(Uri uri)
   at Microsoft.Expression.Platform.WPF.InstanceBuilders.BitmapImageInstanceBuilder.InitializeImageSource(IInstanceBuilderContext context, DocumentNode valueNode)
   at Microsoft.Expression.Platform.WPF.InstanceBuilders.BitmapImageInstanceBuilder.Instantiate(IInstanceBuilderContext context, ViewNode viewNode)
   at Microsoft.Expression.DesignModel.Core.ViewNodeManager.Instantiate(ViewNode viewNode)

Open in new window

0
 
saraganiCommented:
Ok, can you at least post the xaml is the image tag and also the namespace that you have in your project?
0
 
saraganiCommented:
Hi, instead of having the image source like this:
<Image Source="Images/someImage.png"/>


Have it like this:
<Image Source="/WpfApplication1;Component/someImage.png"/>


The format is: AssemblyName;Component/PathToImage/someImage.png

So if your assembly is WpfApplication1 and the image is located on the folder Resources\Images\ then the image source should be:
<Image Source="/WpfApplication1;Component/Resources/Images/someImage.png"/>
0
 
chang2008Author Commented:
I use absolute uri and it works.

Many thanks. :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.