0 Comments    

<Window>
     <Grid>  
          <Button HorizontalAlignment="Right" Command="{Binding ShowMessageCommand, Mode=Default}" 
             Content="{Binding ShowMessageLabel}" VerticalAlignment="Bottom" Margin="0,0,13,8">
          <Button Width="3" Height="0" HorizontalAlignment="Right" 
             Content="Button" VerticalAlignment="Bottom" Margin="0,0,-210,-256">  
 
          <!-- Define ModalDialogManager and wire up to ViewModel called MessageWindow --> 
          <local:ModalDialogManager Title="{Binding Title}" CloseCommand="{Binding OKCommand}" DialogResizeMode="NoResize"
             DialogWidth="300" DialogHeight="300" IsOpen="{Binding IsOpen}" DataContext="{Binding MessageWindow}" />  
          <TextBlock Margin="21,27,31,64" TextWrapping="Wrap" Text="{Binding Status, Mode=Default}"></TextBlock>  
     </Grid>  
</Window> 

<DataTemplate DataType="{x:Type vm:MessageWindowViewModel}">
     <v:MessageWindow/>
</DataTemplate>

        /// 

        /// This is invoked when the red X is clicked or a keypress closes the window - 
        /// 
        public ICommand CloseCommand
        {
            get { return (ICommand)GetValue(CloseCommandProperty); }
            set { SetValue(CloseCommandProperty, value); }
        }
        public static readonly DependencyProperty CloseCommandProperty =
            DependencyProperty.Register("CloseCommand", typeof(ICommand), typeof(ModalDialogManager), new UIPropertyMetadata(null));


        /// 

        /// This should be bound to IsOpen (or similar) in the ViewModel associated with ModalDialogManager
        /// 
        public bool IsOpen
        {
            get { return (bool)GetValue(IsOpenProperty); }
            set { SetValue(IsOpenProperty, value); }
        }
        public static readonly DependencyProperty IsOpenProperty =
            DependencyProperty.Register("IsOpen", typeof(bool), typeof(ModalDialogManager), new UIPropertyMetadata(false, IsOpenChanged));


        public static void IsOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ModalDialogManager m = d as ModalDialogManager;
            bool newVal = (bool)e.NewValue;
            if (newVal)
                m.Show();
            else
                m.Close();
        }


        void Show()
        {
            if (_window != null) Close();

            Window w = new Window();
            _window = w;
            w.Closing += w_Closing;
            w.Owner = GetParentWindow(this);
            
            w.DataContext = this.DataContext;
            w.SetBinding(Window.ContentProperty, "");

            w.Title = Title;
            w.Icon = Icon;
            w.Height = DialogHeight;
            w.Width = DialogWidth;
            w.ResizeMode = DialogResizeMode;
            w.ShowDialog();
        }

        void w_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            if (!_internalClose)
            {
                _externalClose = true;
                if (CloseCommand != null) CloseCommand.Execute(null);
                _externalClose = false;
            }
        }

        bool _internalClose = false;
        bool _externalClose = false;

        void Close()
        {
            _internalClose = true;
            
            if (!_externalClose) _window.Close();
            _window = null;
            _internalClose = false;
        }

        Window GetParentWindow(FrameworkElement current)
        {
            if (current is Window)
                return current as Window;
            else if (current.Parent is FrameworkElement)
                return GetParentWindow(current.Parent as FrameworkElement);
            else
                return null;
        }

2 Comments    

0 Comments    

0 Comments    

• ItemsSource – IList value represents the set of resolved matches in the control. It also supports INotifyCollectionChanged so it can be bound to ObservableCollection allowing external changes to be propagated to the control automatically.
• DisplayMemberPath – I used a similar name here to what the ListBox control uses to determine which property is displayed when the results are shown either in the tags or the search results.
• SearchMethod –a Action dependency property provides the logic for taking the text entered and execting a query/lookup that in turn returns SearchResults. This method can be synchronous or asynchronous, so long as the returned results are placed in SearchResults.
• SearchResults – to support Synchronous or Async searching, when this property is populated search results are shown to the user. Make sure the class to which SearchResults is bound to implements INotifyPropertyChanged so TagBox is aware of SearchResult changes.

<tsm:TagBox SearchMethod="{Binding SearchMethod}" SearchResults="{Binding SearchResults}"
          DisplayMemberPath="DisplayName" ItemsSource="{Binding To, Mode=TwoWay}" />

• ItemsSource -> To (ObservableCollection)
• DisplayMemberPath = “DisplayName” which is a property of Contact
• SearchMethod -> SearchMethod(Action which points to a method FindMatchingContacts(string))
• SearchResults -> SearchResults(IEnumerable)

        #region SearchMethod (INotifyPropertyChanged Property)
        private Action<string> _searchMethod;
        public Action<string> SearchMethod
        {
            get { return _searchMethod; }
            set
            {
                if (value == _searchMethod) return;
                _searchMethod = value;
                base.OnPropertyChanged("SearchMethod");
            }
        }
        #endregion

        public void FindMatchingContacts(string searchText)
        {
            if (searchText.Length >= 1)
            {
                var contacts = from cs in ContactCollection.Members
                               where cs.EmailAddress.StartsWith(searchText, StringComparison.InvariantCultureIgnoreCase) 
                                    | cs.DisplayName.ToLower().Contains(searchText.ToLower())
                               select cs;

                SearchResults = contacts.ToList();
            }
            else
                SearchResults = null;
        }

Fig 1. Code from EmailViewModel.cs demonstrating search method

• Contacts: resolved items that were matched via search
• Text Addresses: unresolved items that may have been entered by the user

UnresolvedValidationMethod property to the TagBox where you can specify your own function for examining the text entered and returning it classed as your bound object type. In the email example I check the format of the address and return a Contact. The great thing about this is that on the ViewModel side you have a single collection that holds all the addresses, and ultimately you could decide how to deal with these newly created contacts. (for example – you could just send a message to them, or you could save them to your Contact repository when you detect that their Ids are 0)

Lastly – there could exist a set of unresolved items that would not validate (if you entered ASDF as an email address for example). These are not included in ItemSource, but can be found in InvalidItems. The logic here is that if we cannot pass the Validation method then they are not robust enough to be included in that set. Instead they are decorated (a dashed underline OOB) and you can decide how to handle them. Common ways would be

1. In an email scenario – do not allow the message to be sent until they are corrected – could present a custom UI for correcting them.
2. Prompt and allow them to be discarded
3. Discard them automatically

Validation Properties

• ValidateUnresolved – boolean property indicates whether or not validation should be performed – if true an UnresolvedValidationMethod must be provided
• UnresolvedValidationMethod – Function takes a text entry and converts it to an object compatible with the objects stored in ItemsSource. Once validated the text entry, now a correctly typed object, is placed in ItemsSource in the correct location.
• VisualState “Invalid” – The UnresolvedTag control template contains an “Invalid” state that can be customized. It is set whenever text cannot be validated.

The following code demonstrates the UnresolvedValidationMethod as implmented in EmailViewModel.cs. Note - asynchronous validation is not supported at this point.

        public Contact IsValidEmailAddress(string email)
        {
            bool valid = Regex.IsMatch(email, @"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +
                                              @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +
                                              @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$");
            Debug.WriteLine("Valid Email? " + email + " " + valid);
            if (!valid) return null;
            return new Contact() { DisplayName = email, EmailAddress = email };
        }

Fig 2. Code from EmailViewModel.cs demonstating text validation

Customization

TagBox is implemented as a CustomControl, meaning that its templates can be customized very easily to provided a dramatically different looking appearance. There are 3 main templates that can be customized

TagBox – this template is responsible for the actual border around the TagBox and the panels that hold the tags. OOB – it is essentially a ScrollViewer that contains a WrapPanel and a Popup (search results container)

ResolvedTag – after an item is resolved it gets translated into a ResolvedTag. OOB it has a rounded border with an X so you can remove an item from the tagbox with the mouse. A custom template could be used here to display more information about the tag if so desired. DataBinding occurs in the Content field by default.

UnresolvedTag – this holds the text entered prior to being resolved. It is a pretty simple template who’s most important component is a TextBox with very little styling.

The example below has been restyled to be more appropriate to a set of categories. (Templates are included in the sample project)

Licensing

Although I am not releasing the source code for this control, I am allowing folks to make use of the control for use in personal projects. I go back and forth on the free versus paid approach and my general rule of thumb is that if it takes me more than a week to build something, and I intend on supporting it in the future, it is worth a nominal fee. In this case I ended up putting a little under 3 weeks into the project and documenation and I think it has a lot of value.

Watermarked Control – you may use the control for non-commercial purposes so long as the "thesilvermethod.com" watermark is visible.

Business License - a non-watermarked version of the control is available. I haven't gotten my act together yet on setting up the online purchasing, but in the short term if you would like to use this, please contact me directly - bbalmer@setpowersoftware.com.

Updated 2-23-2010 You can now purchase developer licenses for TagBox here. After purchasing a license a link will be emailed to you that will allow you to download a non-watermarked version of the TagBox assembly.

Here are the details of the license.

Demo Code includes TagBox assembly and demo project shown in this blog post.

3 Comments    

Fig 1. screenshot of upload control with 4 files

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="55"></RowDefinition>
            <RowDefinition Height="437*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="75"/>
        </Grid.ColumnDefinitions>
        <TextBlock HorizontalAlignment="Left" Margin="5,5,5,0"  Name="textBlock1" 
                   Text="Drag and Drop Files Below" VerticalAlignment="Top" />
        <StackPanel Grid.Column="1" >
            <Button Content="Upload" Name="button1"  Click="button1_Click"  />
            <Button Content="Clear" Margin="0,5,0,0" Click="Button_Click" />
        </StackPanel>
        <ScrollViewer x:Name="ImagesTarget" Background="WhiteSmoke" AllowDrop="True" Grid.ColumnSpan="2" Grid.Row="1">
            <ItemsControl x:Name="ImagesList">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <controlsToolkit:WrapPanel Orientation="Vertical">
                            <Image Source="{Binding Image}" Margin="5" Stretch="Uniform" MaxHeight="100" MaxWidth="100" />
                            <ProgressBar Value="{Binding FileUpload.UploadPercent}" Margin="3" Height="10"/>
                        </controlsToolkit:WrapPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <controlsToolkit:WrapPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>

    </Grid>

        public UploadControl()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            ImagesList.ItemsSource = _images; 
            ImagesTarget.Drop += new DragEventHandler(ImagesTarget_Drop);
        }

        void ImagesTarget_Drop(object sender, DragEventArgs e)
        {
            if (e.Data == null) return;

            IDataObject dataObject = e.Data as IDataObject;
            FileInfo[] files = dataObject.GetData(DataFormats.FileDrop) as FileInfo[];

            //create a collection of FilePair for databinding
            foreach (FileInfo file in files)
            {
                try
                {
                    FilePair pair = new FilePair();
                    using (var stream = file.OpenRead())
                    {
                        var imageSource = new BitmapImage();
                        try
                        {
                            imageSource.SetSource(stream);
                        }
                        catch 
                        {   //it is not an image - lets show a default icon
                            imageSource.UriSource = new Uri("unknownfile.png", UriKind.Relative);
                        }
                        pair.Image = imageSource;
                    }
                    pair.FileUpload = new FileUpload(this.Dispatcher, UploadUri, file);
                    _images.Add(pair);
                }
                catch (Exception ex)
                {
                    MessageBox.Show("Unknown error prepping file for upload: \n" + ex.ToString());
                }
            }
        }

1. Creates a Container in Azure for holding uploaded files if it does not already exist.
2. Checks to see if the file already exists in Azure
3. Listens for chunks of an incoming file writing them to a temporary file in the filesystem. I wanted to avoid this step, but I couldn't find a way to append to a file in Azure storage.
4. Writes the file to Azure Storage and deletes the temporary file.

       //the first time this method is called lets make sure our container is setup properly non-authenticated users have permissions 
        // to access files in the Azure container.
        void Initialize(HttpContext ctx)
        {
            CloudBlobClient client = CloudStorageAccount.FromConfigurationSetting("StorageAccount").CreateCloudBlobClient();

            //containers must be lower case - this seems strange to me but I cannot get it to work with uppercase 
            CloudBlobContainer container = new CloudBlobContainer(_containerName, client);
            container.CreateIfNotExist();
            container.SetPermissions(new BlobContainerPermissions() { PublicAccess = BlobContainerPublicAccessType.Blob });
            _container = container;
        }

                CloudBlob blob = Container.GetBlobReference(filename.ToLower());
                try
                {
                    blob.FetchAttributes(); // this will throw an exeception if it does not exist
                    context.Response.Write(blob.Attributes.Properties.Length);  //report the size of the file
                }
                catch (Exception) { context.Response.Write("0"); }  //I don't let checking for existence via exception handling, 
                                                                    // but that was the recommended/only approach on the MSFT blogs.  
                context.Response.Flush();

                       CloudBlob blob = Container.GetBlobReference(filename);
                        blob.UploadFile(filePath);

                        File.Delete(filePath);  //we stored this in a temporary area - delete it now that we are done

                        FileUploadCompletedEventArgs args = new FileUploadCompletedEventArgs(filename, blob.Uri.ToString());
                        FileUploadCompleted(this, args);

1. Show the list of files already on Azure, presumably so you could delete/move/rename them.
2. The ability to pause an upload via the UI
3. Set metadata in Azure storage to futher categorize the files
4. This should really be implemented as a custom control so that the UI can be re-styled more easily.

10 Comments    

Fig 1. Architecture Diagram

[ServiceBehavior(AddressFilterMode = AddressFilterMode.Any)]

0 Comments    

0 Comments    

Fig 1. Old and new architectures

1. My WCF Service was already running on port 80 and I couldn’t find an easy way to port share between with an embedded web server .
2. I considered running Cassini – and then using that to host WCF services, but this isn’t listed as a supported way for hosting WCF and I really didn’t want to go that far out of band .

    //The service contract for the WebServer - Url re-writing is used to simulate 
    //accessing file resources on a normal web server
    [ServiceContract]
    public interface IWebServer
    {

        [OperationContract, WebGet(UriTemplate = "/")]
        Stream Default();

        [OperationContract, WebGet(UriTemplate = "/Images/{imagename}")]
        Stream GetImage(string imageName);

        [OperationContract, WebGet(UriTemplate = "/ClientBin/{xapname}")]
        Stream GetXap(string xapName);
    }

    //WebServer extracts resources out of the Assembly and serves them up via a Stream
    //Note: production code should have improved exception handling in cases where resources cannot be found
    public class WebServer : IWebServer
    {
        public const string AssemblyRootPath = "ServiceHostedSilverlight.";
        public Stream Default()
        {
            WebOperationContext.Current.OutgoingResponse.ContentType = "text/html";
            return Assembly.GetExecutingAssembly().GetManifestResourceStream(AssemblyRootPath + "Default.htm");
        }

        public Stream GetXap(string xapFile)
        {
            WebOperationContext.Current.OutgoingResponse.ContentType = "application/x-silverlight-2";
            return Assembly.GetExecutingAssembly().GetManifestResourceStream(AssemblyRootPath + "ClientBin." + xapFile);
        }

        public Stream GetImage(string imageName)
        {
            string ext = new FileInfo(imageName).Extension.ToLower();
            WebOperationContext.Current.OutgoingResponse.ContentType = "image/" + ext;
            return Assembly.GetExecutingAssembly().GetManifestResourceStream(AssemblyRootPath + "Images." + imageName);
        }
    }

    <behaviors>
      <endpointBehaviors>
        <behavior name="ServiceHostedSilverlight.WebServerEndpointBehavior">
          <webHttp />  <!--Necessary for Http/REST style services-->
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="ServiceHostedSilverlight.WebServerBehavior">
          <serviceMetadata httpGetEnabled="false" /> <!--must be false or the Url re-writing will not work-->
          <serviceDebug httpHelpPageEnabled="false" includeExceptionDetailInFaults="true" />
          <!-- must disable the help page or the default re-written url (/) will not work -->
        </behavior>
        <behavior name="ServiceHostedSilverlight.DataServiceBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>
      </serviceBehaviors>
    </behaviors>

Fig 2. Resultant web page

1. A service that syncs data between two enterprise applications – the UI here would be minimal – but a robust log viewer could be presented through Silverlight.
2. The Admin UI for a network service such as a Firewall or Spam filter.
3. Pure configuration dialog instead of directing users to modify app.config settings. Your UI could give you validation and the ability to restart the service after a setting change if necessary.
4. A commercial application you wish to package for quick and easy setup and administration.

3 Comments    

0 Comments    

Recent Posts

• In Defense of Portrait Mode
• ModalDialogManager - A simple approach to dealing with modal dialogs in MVVM
• SyncToy 2.1 - A very useful and free tool for syncronizing your files
• Connecting XBox 360 MCE to Windows 7 in a Domain
• Introducing TagBox
• Drag and Drop Upload to Azure Storage via Silverlight 4
• Architecting a Blog Engine for Windows Azure
• Hosting Silverlight Accessible WCF Services in an Azure WebRole
• Embedding Silverlight in a Windows Service
• Welcome to The Silver Method

By Month