June 2010 Entries
TextBox with Strikethrough in Silverlight by modifying the TextBox template

Someone recently asked about a strikethrough in a TextBlock.  The need was for a short piece of text that was dynamically generated.  I messed with some solutions and came up with the following:

image

I used a TextBox rather than the TextBlock.  If you don’t want it to be editable, I suggest isReadOnly to true.  You can change the read only part of the template if you don’t want it to look different in Read only view.

Put a TextBox on the form.  Right click on the TextBox and choose EditTemplate  -> Edit a copy.

Inside of the Template, traverse the tree RootElement –> Border –> Grid –> MouseOverBoarder –> ContentElement (see below). 

image

Right click on ContentElement choose Edit Template –> Edit a Copy.

this brings you to the ScrollViewer Template.  Here I added a straight red line as a path and named it StrikeThroughPath

image

Now the trick is to bind the width element to the Template Binding –> Extent Width by clicking on the Advanced square to the right of width and choose Template Binding then Extent Width.

image

You should now have a text box that looks like the one at the start of this post with variable length and all the attributes of a textbox.

My husband, Robert, found this solution in the Silverlight forums but I did not try it http://forums.silverlight.net/forums/p/19749/67384.aspx

Please post any better solutions or questions that you have.

Speaking –NT PC User Group C# Sig – 7/10/10

At Microsoft Office in Irving, TX http://sp.ntpcug.org/VBNETSIG/default.aspx

This meeting changed topic after poling the audiece and seeing what they wanted to hear about.  It was still all about blend but it was more about getting started with blend then hard core templating.

Here is a link to the video that Shawn Weisfeld took and posted of the event.  Enjoy!!!

http://www.drowningintechnicaldebt.com/ShawnWeisfeld/archive/0001/01/01/into-to-expression-blend-by-burger-teresa-at-north-texas.aspx

Join us as I go through how to use Expression Blend to take a standard Silverlight video player and modify the template and styles to give it a custom look and feel. By reusing the standard player, we get all of the built in functionality without having to re-write all of that code.  In this discussion, we will also cover some style ideas and best practices to allow for greatest flexibility in look and feel.

 

Now you're Stylin’

The idea is to define colors and style templates in resource dictionaries that can be easily changed out to change the look and feel without touching the code.  Blend is a good tool for managing and modifying resource dictionaries.  It is the same ideas behind CSS

LOCATION:

There are very few times when I make a color resource local page and even fewer when I will statically define a color.  Instead, I define my Resource Dictionary(s) when I first start a project and in the Dictionary(s), I immediately define all the colors that I plan to use (see image below).

NAMING:

I use generic names when naming my colors like color_1_dark, color_1_warm, color_1_light.
I group my colors by like colors or functional areas and use a naming convention that describes the idea behind the color.   In this case, I have used light, warm, dark so the person who is changing the resource dictionary has some idea of other schemes that would fit.  If I had areas that were segmented by color, I would prefix these names with that area, for example sales_color1_light or contact_header_color1_light. 

If I have specific company colors, those will be named appropriately so anyone who looks at the resource dictionary knows that these are company specific colors and should only be changed if that definition changes.

I will use a functional area if appropriate… for instance, below you see backgroundGradient.

 Capture

USES:

If I need a shade of a color, I will use the base color I defined as a  resource and apply an opacity mask to change the color appropriately.  In other words, if I think it is appropriate to use just a lighter shade of color_4_Dark, I will bind color_4_Dark and apply an opacity mask to just tone it down a bit rather than define a whole new color.  Keep in mind that the goal is to be able to switch out the color underneath so if your opacity mask won’t work with any dark color, then make it a resource also.

For gradients, you can define the whole gradient as a resource as you see above for backgroundGradient or bind the Gradient points to Colors that you have already defined.

Concept:

I have specifically shown colors in this example but this concept can apply to fonts or other elements if they are setup as a resource that can be changed to change look and feel.

Add Comment Filed Under [ Expression Blend ]
Silverlight and Windows Phone 7 DFW DevCamp (Silverlightpalooza) is around the corner

It is really shaping up to be everything I had hoped.  Prizes are stacked up behind me.  Food is in place.  I have a set of wonderful volunteers beside me.  The event has been full for weeks.  I will not be doing any official blogging for this event on this blog.  You will have to watch the official blog for that http://silverlightpalooza.dynamitesilverlight.com/ – June 18th and 19th.

I plan to post pictures and descriptions of everyone’s projects during the event.  It is going to be wonderful fun.  Shawn will be filming part of the time so stay tuned for that also.  We have some great plans in place!!!  I wish everyone could join us and am very excited for those who signed up in time.

Add Comment Filed Under [ Community ]
#TechEd 2010

It has been another fantastic year for TechEd North America.  I always love my time here.  First, I have to give a huge thank you to Ineta for giving me the opportunity to work the Ineta booth and BOF’s (birds of a feather).   I can not even begin to list how many fantastic leaders in the .Net space and Developers from all over I have met through Ineta at this event.  It has been truly amazing and great fun!!

New Orlean’s has been awesome.  The night life is hoppin’.  In addition to enjoying a few (too many??) of the local hurricanes in New Orleans, I have hung out with some of the coolest people  Deepesh Mohnani, David Poll, Viresh, Alan Stephens, Shawn Wildermuth, Greg Leonardo, Doug Seven, Chris Willams, David Carley and some of our southcentral hero’s Jeffery Palermo, Todd Anglin, Shawn Weisfeld, Randy Walker, The midnight DBA’s, Zeeshan Hirani, Dennis Bottjer just to name a few.

A big thanks to Microsoft and everyone that has helped to put TechEd together.  I have loved hanging out with people from the Silverlight and Expression Teams and have learned a ton.  I am ramped up and ready to take all that knowledge back to my co-workers and my community.

I can not wait to see you all again next year in Atlanta!!!

Here are video links to some of my fav sessions:

Using MVVM Design Pattern with VS 2010 XAML Designer – Rockford Lhotka

Effective RIA: Tips and Tricks for Building Effective Rich Internet Applications – Deepesh Mohani

Taking Microsoft Silverlight 4 Applications Beyond the Browser – David Poll

Jump into Silvelright! and become immediately effective – Tim Huckaby

Prototyping Rich Microsoft Silverlight 4 Applications with MS Expression Blend + SketchFlow – David Carley

Tales from the Trenches: Building a Real-World Microsoft Silvelright Line-of-Business Application – Dan Wahlin

Add Comment Filed Under [ Community ]
Mousin' down the PathListBox

While modifying the standard media player with a new look and feel for Ineta Live I saw a unique opportunity to use their logo with a dotted I with and attached arc as the scrub control.

So I created a PathListBox that I wanted an object to follow when a user did a click and drag action.  Below is how I solved the problem.  Please let me know if you have improvements or know of a completely different way.  I am always eager to learn.

First, I created a path using the pen tool in Expression Blend (see the yellow line in image below).  Then I right clicked that path and chose [Path] --> [Make Layout Path].   That created a new PathListBox.  Then I chose the object I want to move down the new PathListBox and Placed it as a child in the Objects and Timeline window (see image below).  If the child object (the thing the user will click and drag) is XAML, it will move much smoother than images.

Just as another side note, I wanted there to be no highlight when the user selects the “ball” to drag and drop.  This is done by editing the ItemContainerStyle under Additional Templates on the PathListBox.  Post a question if you need help on this and I will expand my explanation.

Here is a pic of the object and the path I wanted it to follow.  I gave the path a yellow solid brush here so you could see it but when I lay this over another object, I will make the path transparent.

Image of Object and Path

 

To animate this object down the path, the trick is to animate the Start number for the LayoutPath.  Not the StartItemIndex, the Start above Span.

In order to enable animation when a user clicks and drags, I put in the following code snippets in the code behind. the DependencyProperties are not necessary for the Drag control.

 

 

namespace InetaPlayer
{
    public partial class PositionControl : UserControl
    {
        private bool _mouseDown;
        private double _maxPlayTime;
        public PositionControl()
        {
            // Required to initialize variables
            InitializeComponent();
            //mouse events for scrub control
            positionThumb.MouseLeftButtonDown += new MouseButtonEventHandler(ValueThumb_MouseLeftButtonDown);
            positionThumb.MouseLeftButtonUp += new MouseButtonEventHandler(ValueThumb_MouseLeftButtonUp);
            positionThumb.MouseMove += new MouseEventHandler(ValueThumb_MouseMove);
            positionThumb.LostMouseCapture += new MouseEventHandler(ValueThumb_LostMouseCapture);
        }
        // exposed for binding to real slider using a DependencyProperty enables animation, styling, binding, etc....
        public double MaxPlayTime
        {
            get { return (double)GetValue(MaxPlayTimeProperty); }
            set { SetValue(MaxPlayTimeProperty, value); }
        }
        public static readonly DependencyProperty MaxPlayTimeProperty =
            DependencyProperty.Register("MaxPlayTime", typeof(double), typeof(PositionControl), null); 
 
        // exposed for binding to real slider using a DependencyProperty enables animation, styling, binding, etc.... 
 
        public double CurrSliderValue
        {
            get { return (double)GetValue(CurrSliderValueProperty); }
            set { SetValue(CurrSliderValueProperty, value); }
        } 
 
        public static readonly DependencyProperty CurrSliderValueProperty =
            DependencyProperty.Register("CurrSliderValue", typeof(double), typeof(PositionControl), new PropertyMetadata(0.0, OnCurrSliderValuePropertyChanged)); 
 
        private static void OnCurrSliderValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            PositionControl control = d as PositionControl;
            control.OnCurrSliderValueChanged((double)e.OldValue, (double)e.NewValue);
        } 
 
        private void OnCurrSliderValueChanged(double oldValue, double newValue)
        {
            _maxPlayTime = (double) GetValue(MaxPlayTimeProperty);
            if (!_mouseDown)
                if (_maxPlayTime!=0)
                    sliderPathListBox.LayoutPaths[0].Start = newValue / _maxPlayTime;
                else
                   sliderPathListBox.LayoutPaths[0].Start = 0;
        }
 
       //mouse control 
 
        void ValueThumb_MouseMove(object sender, MouseEventArgs e)
        {
            if (!_mouseDown) return;
            //get the offset of how far the drag has been 
            //direction is handled automatically (offset will be negative for left move and positive for right move)
            Point mouseOff = e.GetPosition(positionThumb);
            //Divide the offset by 1000 for a smooth transition
            sliderPathListBox.LayoutPaths[0].Start +=mouseOff.X/1000;
            _maxPlayTime = (double)GetValue(MaxPlayTimeProperty);
            SetValue(CurrSliderValueProperty ,sliderPathListBox.LayoutPaths[0].Start*_maxPlayTime);
        } 
 
        void ValueThumb_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            _mouseDown = false;
        }
        void ValueThumb_LostMouseCapture(object sender, MouseEventArgs e)
        {
            _mouseDown = false;
        }
        void ValueThumb_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            _mouseDown = true;
            ((UIElement)positionThumb).CaptureMouse();
        } 
 
    }
}
 

 

I made this into a user control and exposed a couple of DependencyProperties in order to bind it to a standard Slider in the overall project.  This control is embedded into the standard Expression media player template and is used to replace the standard scrub bar.  When the player goes live, I will put a link here.

Template standard controls for an entirely new look and feel

This is the  Ineta Live player without the O’Data Feed.  It is a good example of taking the plain Media Player provided with the Encoder install and re-templating it to make it your own.  It also has a custom scrub control that is added in.  I generally put my tempates in a separate resource file.  On this project, I discovered that I had to include the template at the document level because I needed the ability to attach some code behind to fire change state behaviors.  I could not use the blend xaml behaviors for change state inside the template because the template can’ determine the TargetObject.