Click here to Skip to main content
Click here to Skip to main content

WPF Attachment Control

, 15 Dec 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Attachment control using WPF.

Introduction

This control is a ListView control that holds a list of attachments, which has a link to the attachments and some metadata about them. This article demonstrates the basics of WPF controls and templating, including binding a list control to application data. The project includes the AttachmentList control which is a templated ListView, and a demo window which holds the application data and binds the data to the control.

Using the code

The control is made from a list box which holds the Attachment class that is defined by AttachmentTemplate that is set to the ListView ItemTemplate property.

<ListBox IsSynchronizedWithCurrentItem="True" 
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Stretch" 
         x:Name="AttachmentListBox" 
         HorizontalContentAlignment="Stretch"
         SelectionChanged="AttachmentListBox_SelectionChanged"
         ItemTemplate="{DynamicResource AttachmentTemplate}"
         Margin="0,32,0,0"
         >

The control template is built from five rows, the attachment icon:

<Image x:Name="AttachmentIcon" 
    Source="\Images\attach.png" HorizontalAlignment="Left" />

and a text block for the title of the attachment:

<TextBlock x:Name="Title"
          Margin="16,0,0,0"
          Text="Title" HorizontalAlignment="Left"/>

The next block is the main data for the attachment which is separated into two columns: A text block which is multi-bound to UpdateUser and UpdateUserTime.

<TextBlock x:Name="CreationText" 
         Margin="0,0,0,0" 
         Grid.Column="0" 
         HorizontalAlignment="Left">
   <TextBlock.Text>
        <MultiBinding StringFormat="Edited by {0} on {1}">
           <Binding Path="UpdateUser"/>
           <Binding Path="UpdateDateTime"/>
        </MultiBinding>
   </TextBlock.Text>
</TextBlock>

And another text block which is multi-bound to UpdateUser and UpdateUserTime.

<TextBlock x:Name="UpdatingText" 
        Margin="2,0,0,0" Grid.Column="1" 
        HorizontalAlignment="Right">
  <TextBlock.Text>
    <MultiBinding StringFormat="Created by {0} on {1}">
      <Binding Path="CreationUser"/>
      <Binding Path="CreationDateTime"/>
    </MultiBinding>
  </TextBlock.Text>
</TextBlock>

The next row defines the file icon and the hyperlink to that file:

<Grid Grid.Row="2" >
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Image x:Name="FileIcon" Source="/Images/File.png"
  Grid.Column="0" HorizontalAlignment="Left"/>
  <TextBlock x:Name="FilePath" Margin="2,0,0,0" Grid.Column="1">
    <Hyperlink NavigateUri="{Binding Path=FilePath}" 
              Hyperlink.RequestNavigate="Hyperlink_RequestNavigate">
      <TextBlock Text="{Binding Path=FileName}"/>
    </Hyperlink>
  </TextBlock>
</Grid>

A thing to mention here is the Hyperlink.RequestNavigate event, which is called upon pressing the hyperlink. You have to implement this event if you want the hyperlink to operate as you need it; otherwise, it does nothing. In our case, I implemented it by using System.Diagnostics.Process.Start in the code-behind, as follows:

System.Diagnostics.Process.Start(e.Uri.ToString());

Simple, once you know this. The last text block is for the description of the attachment, which is a simple text block. Next, we have the control toolbar which defines two actions: add attachment and delete attachment.

<ToolBar Height="32" x:Name="AttachmentsToolbar" VerticalAlignment="Top">
  <Button x:Name="AddAttachment" Command="{Binding Controller.AddAttachmentCommand}">
    <Image Source = "/Images/attach.png"/>
  </Button>
  <Button x:Name="DeleteAttachment" 
            Command="{Binding Controller.DeleteAttachmentCommand}">
    <Image Source = "/Images/delete32.png"/>
  </Button>
</ToolBar>

Notice that the command for the actions is binding, which is done by using a DelegateCommand which is defined in Prism. The delegate command is attached in the project so you don't need to worry about this part. A DelegateCommand is an easy way of implementing Commands in your application. For further information, follow this link: http://development-guides.silverbaylabs.org/Video/Prism-Commands.

And... I think that's about it. The code-behind is straightforward... so I didn't go in to much detail there. I am waiting for your comments...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Israeli Ohad
Architect
Israel Israel
Fields of interest: Software - .NET, C#, WPF, WCF, JAVA, software architecture and design.
Professional experience: 10 years of software management and development.

Comments and Discussions

 
GeneralMy vote of 1 PinmemberDestenkov16-Dec-09 2:57 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 15 Dec 2009
Article Copyright 2009 by Israeli Ohad
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid