[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1152
  • Last Modified:

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

0
chang2008
Asked:
chang2008
  • 6
  • 3
1 Solution
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
saraganiCommented:
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
 
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now