AvalonControlsLibrary v2 has been released !

Finally I had some time to release the new version of AvalonControlsLibrary v2.

This release includes

RangeSlider – All properties are now Dependency properties so that you can easily databind with.
RangeSlider – The RangeSelectedChanged event has been refactored into a Routed event.
Range slider – Support for Commands such as MoveBack Move Forward, AllBack and AllForward

DatePicker – Add a DateSelectedChanged routed event – TimePicker – Add a TimeSelectedChanged routed event

DateTimePicker (this will be the DatePicker and TimePicker joined)

DockableContainer (aka Docky- This is a brand new control which supports docking of element and undocking. While elements are un docked you can drag around the element 🙂 Just like Blend Toolbars)

Bug Fixes
Masked TextBox IsReadonly click here for more info
DateTimePicker – setting the date via code before the ControlTemplate being loaded was thowing an exception

Download the new version

Send as much feedback as you can so that I can start working on V3 😀

Thanks for all your support

kick it on DotNetKicks.com

GridViewColumn DisplayMemberBinding vs CellTemplate

GridViewColumn has 2 different ways how one can specify the content of a cell. One can use the DisplayMemberBinding or also a CellTemplate. DisplayMemberBinding is used when you just want to show some text inside your GridViewColumn. You can use this property as follows

<ListView>
    <ListView.View>
         <GridView>
             <GridViewColumn DisplayMemberBinding="{Binding Name}"
                                    Header="Name"/>
         </GridView>
    </ListView.View>
</ListView>

So basically all you have to do is specify a binding to the property of the object being bound. In reality the DisplayMemberBinding will create a TextBlock and bind the Text property of the TextBlock to the binding that you specify. Yet if you need more than just text in a TextBlock then DisplayMemberBinding is not what you should be looking for. For such scenario one should use the CellTemplate.

The CellTemplate property of the GridViewColumn allows you to enter a DataTemplate where you can put in whatever you like as controls to be rendered by the GridView. Let me give you an example of how one can use the CellTemplate to do something more than Text

<ListView>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Image">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Image}"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

So in the above example the ListView is now rendering an image where the source of the image is set via a binding to a property of the object being bound to. This gives you much more flexibility in terms of what you can do inside a Cell. For even more advanced scenarios where you have to decide how to render the cell according to the object being bound you can also use the CellTemplateSelector.

Final and most important point about these 2 properties…
DO NOT USE THEM TOGETHER!

If you set the DisplayMemberBinding it is useless to set the CellTemplate because the GridView will only use the DisplayMemberBinding and ignore the CellTemplate. So always make sure that you only set one of these properties and not both at the same time otherwise you will not get the results that you were hoping for.

Want to read some more on ListView? Click here

WPF TextBox Memory Leak???

While running around in the WPF forums, I found this very interesting post… It seems that the WPF TextBox can be dangerous 🙂 – if you do not use it carefully 🙂

Basically the TextBox by default stores all text changes in an Undo Stack… This implies that every time that you change the Text of the TextBox more memory is consumed by the TextBox.

In order to fix this you have to set the UndoLimit property to 0. This would disable the Undo feature for the TextBox and thus NO MORE MEMORY CONSUMPTION

Have a nice day

Embed code in XAML

Loads of time I needed a converter that does a very small operation such as binding to the Height of an element and subtract 10 from the binded value. Every time you have to create a converter to do so. I must admit, it really makes me angry because I would like to this in XAML.

I found this cool code sample on Dynamic Expression API from msdn and I thought why don’t I use it to be able to embed code in XAML…. Apparently I am not the first one trying this out . While having a chat with WPF Guru, Josh Smith, he pointed out that someone else created something similar. M. Orçun Topdağı did a very great job in creating converters that can be declared in XAML. Great Job dude!!! It is really unfortunate that I found out about this after I created my own 😦

Anyway now that I did it might as well show it to you guys right 🙂 So basically this is quite simple. I created a Markup Extension called LambdaValueConverter that creates an instance of a converter that accepts a LambdaExpression which is then compiled (using the Dynamic Expression API) and run whenever the binding for the converter changes. In order to use this LambdaValueConverter you have to pass the Lambda Expression that you want to evaluate when the binding changes. Let me give you an example. Imagine you want to bind to the Height property of a Grid and divide it’s height by 2 and subtract 20. You would do something like this in the Binding

Binding Lambdas1

As you can see this is quite easy to use… It is important to note that param is a predefined variable that holds the binding value (in the case of this example it will be a Double since we are binding to the height property of a Grid). In the expression you can write anything that is supported in the Dynamic Expression API.

One handy feature I added, is support for strings. Imagine you want to concatenate a string with a binding value. Instead having to create 2 TextBlocks and loads of other things, all you have to do is to enter the text you want + the param that is supplied to you by the converter. You have to surround your string with the $ symbol(don’t ask why I choose this symbol 😀 ) in order for the parser to know that the specified text is a string. It would look something like this….

Binding Lambdas2

So as you can imagine the output of this binding will be >> The border size is {the value of the binding}.

Cool…. Yet I wanted to go a step further. Basically I asked myself and said, “where can this fit besides for converters” and BAMM… I said what about having such a feature for the CanExecute of commands.. Usually in the can execute of a command all you do is a one line of code yet you have to create an event handler every time (same problem as converters!) So I created a class that inherits from the CommandBinding class and extended it to support a expression string that can be evaluated as the CanExecute event handler. In order to use this all you have to do is, create an instance of the CommandLambdas class and set the CanExecuteExpression property with a string that is your expression. As context of the expression there are two predefined variables that you can use. param that is the parameter that you are passing for the command and e that is the CanExecuteRoutedEventArgs for the CanExecute event. Lets make an example. Imagine that you have a checkbox that determines if the Command for a button can execute or not. The code for the Button would look something like this

Binding Lambdas3

Just for the sake of the demo I used the Application.New command so that I don’t have to create my own 😀 Ok, so here we are setting the checkbox as our parameter for the command. Now all we have to do is to declare our command binding. We have to declare a CommandLambdas and set the CanExecuteExpression property. Something like this….

Binding Lambdas4

So what we are doing is to check if the checkbox (that is our command parameter) is checked and if it is, we set the CanExecute. The assignment of the CanExecute is being done for us implicitly by the CommandLambdas class.

Updated: I found this brilliant Library called Blendables… in Blendables there is a very impressive feature called SimpleBinding and Complex Binding (among others) that enable you to write code in the binding in a very clean way… much more nice + powerful than what I did here….

So you can do something like this in the binding

Width={blendables:EvalBinding [{Self}.Height]/2}

That’s nice isn’t it…. Have a look at their Documentation here. Or even check out their samples over here.

Well that is all… I am looking forward for feedback to see how we can extend even more this to be even more useful for WPF Developers 🙂

Looking forward for your feedback.

See also Filterering CollectionViewSource Dynamically

Download Source Code for the AvalonLambdas

kick it on DotNetKicks.com

WPF Date Time Picker

[updated 09th Febuary 2008 – Bug fix for DateTimePicker]
After loads of requests for a DateTimePicker in AvalonControlLibrary I finally had sometime to build a DateTimePicker. DateTimePicker is nothing really special it is a DatePicker and a TimePicker combined in one control.

DateTimePicker exposes an important property called DateTimeSelected. DateTimeSelected is a dependency property so that you can use it in data binding. DateTimePicker also exposes an event DateTimeSelectedChanged that is raised whenever the date/time is changed.

There are some other useful properties that you can set to layout this control

MinuteHand – This property takes a Brush and it is used to color the minute hand

HourHand – This property takes a Brush and it is used to color the hour hand

ClockBackground – This property takes a Brush and it is used as Background color for the clock

CalanderHeaderBackground – This property takes a Brush and it is used as Background for the header of the calander

CalanderHeaderForeground – This property takes a Brush and it is used as Foreground for the header text of the calander

This control also supports control templates. You MUST supply a DatePicker named PART_DatePicker and a TimePicker named as PART_TimePicker in order to create a ControlTemplate for this control.

This control will ship in v2 of AvalonControlLibrary. If you have any suggestions or find any bugs please let me know so that I can update it before I release AvalonControlLibrary v2.

Download Demo Project Here

Please note that a new version is available here

DateTimePicker

kick it on DotNetKicks.com

Create Blend like UIs using DOCKY

Docky is a new control for AvalonControlsLibrary. Docky is the codename for this control, the actual name for this control is DockableContainer. Basically Docky is a control that lets you add panels that can be dockable. By Dockable I mean that you can specify where the child panel (control) needs to be docked. If you un dock one of the panels then the panel can be dragged any where on screen (within the working area)

Docky

Using Docky is very similar as using a dockpanel. Like a DockPanel, Docky has an attached property called Dock which you can use to specifiy where you want your panel to be docked. If you do not specify this property Docky will dock your control in the middle ( this is a behavior like Fill). An example for using the Dock property is

< Grid local:DockableContianer.Dock=”Left” ……

Another important thing to know about Docky is how you can make your control be able to Dock and UnDock. Basically there is a command called ToggleDockChild that you can use to Dock and undock your control. This command needs a Parameter which is a reference to the control that is docked. So for example if the panel that is docked is a grid and inside it I have a button that dock and undocks the grid, I would have to pass the instance of the grid as parameter. Let me give an example

<Grid>
<Button Command=”{local:DockableContainer.ToggleDockChild}” CommandParameter=”{Binding RealtiveSource={RelativeSource AncestorType={x;Type Grid}} }”/>
</Grid>

The last thing that one has to do in order to use this control is set the ElementForDragging attached property. This property is used to let the DockableContainer know which control will be used to drag the panel when it is UnDocked. The value of this property should be set as the Panel to drag. You can put this property in any child element of the element being docked because the Docky will analyze the ViusalTree of children of the docked element and check which child has this property set. This is a useful feature for when you need to be able to drag the panel from the Middle part or bottom etc… Again I will give an example

<Grid>
<Button Command=”{local:DockableContainer.ToggleDockChild}” CommandParameter=”{Binding RealtiveSource={RelativeSource AncestorType={x;Type Grid}} }”/>

<Border local:DockableContainer.ElementForDragging=”{Binding RealtiveSource={RelativeSource AncestorType={x;Type Grid}} }“/>
</Grid>

So here what we are saying is that the surface where the user can grab to drag the panel is the Border.

Ok so there is some work to do in order to use this control, so I decided to create a control that handles all this stuff for you. The control is called DockableControl and it inherites from HeaderedContentControl. This control handles all attached properties and commands for the DockableContainer so all you have to do, is to feed the Header and the Content and all the other stuff is catered for.

I created a Demo Project for this control so that you do not need to download AvalonControlsLibrary (well in actual fact I didn’t commit the changes to codeplex yet since I am still doing some refactoring 🙂 ). Download the code for this control and see how it works to get a better idea of how one can use this control…..

If you have any problems, questions or bugs feel free to send me an email at marlongrech@gmail.com or post a comment to this post 🙂

Hope you like it …

DOWNLOAD DEMO PROJECT

Regards

How can I concatenate a string and a Binding value in a TextBlock

[Also read this post that makes the whole thing much easier] 

So I was running around in the WPF forums as usual and I started discussing how one can concatenate a string and a Binding to a textblock… so it would be something like this

<TextBlock Text=”Hello {Binding}”/>

You don’t have to be a WPF Expert to know that this would not work…. Yet it would be quite Handy to have… so I created a small Markup Extenstion that can do this for us…. I am going to post the full source because it is quite small !

public class ConcatStringExtension : MarkupExtension
{
//Converter to generate the string
class ConcatString : IValueConverter
{
public string InitString { get; set; }

#region IValueConverter Members
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
//append the string
return InitString + value.ToString();
}

public
object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}

#endregion
}
//the value to bind to
public Binding BindTo { get; set; }
//the string to attach in front of the value
public string AttachString { get; set; }

public override object ProvideValue(IServiceProvider serviceProvider)
{
//modify the binding by setting the converter
BindTo.Converter = new ConcatString { InitString = AttachString };
return BindTo.ProvideValue(serviceProvider);
}
}

Thats’s it basically…. The Markup Extension will now modify the Binding that you specify by setting a converter that is able to attach a string infront of the value of the Binding…. So now we can do this….

<TextBlock Text=”{local:ConcatString AttachString=Hello, BindTo={Binding} }” />

Why did I decide to use a converter and set it to the binding, instead of just return the string passed (AttachString ) and the value of the binding concatenated? well very simple because of the binding…. what would happen then when the binding value changed!!! A markup extension will only spit an object for the parser yet if we modify the binding we would achieve what we what i.e that the binding still updates….

Hope you like this…. Regards

How to get an Adorner layer without the use of AdornerLayer.GetAdornerLayer

Hello,

I am currently working on a plugin (I cannot give any more information about this yet I will post it on my blog shortly) using WPF. The main application that hosts all plugins uses the System.Addin (.Net 3.5 version). While developing the plugin I got into a brick wall… Basically I was calling the AdornerLayer.GetAdornerLayer, passing the instance of the plugin UI as parameter yet the method was returning a big and ugly null.

I started digging into the problem and had a look at how the Addin system works. Basically all addins are sandboxed into a seperate appdomain and there is no possible way how you can get the instance of the AdornerLayer of the main window (Or better there is no easy way of doing that) …

I solved this problem by creating an AdornerDecorator as an element in my XAML and then get the adorner layer of this AdornerDecorator. So the XAML would look something like this

<UserControl>

<AdornerDecorator Name=”myAdornerLayer”>

….other XAML here

</AdornerDecorator>

</UserControl>

Then in C# i just call the myAdornerLayer.AdornerLayer and do what ever I want with it. This solution does not help if you want an adorner layer for all the main window that is hosting your plugin, the adorner layer will ONLY cover the surface area of the plugin. Yet if you do not need the whole area of the main window but only the surface area of the plugin, this solution should work just fine ….

Hope you find this useful…

Looking forward to post the plugin online….. I am sure you will love it 😛

Best Regards

Avalon Controls Library on CodePlex

Hi all,

I am pleased to announce that the AvalonControlsLibrary  has been uploaded on CodePlex. I am looking forward to see this project evolve more and more in the near future.

Looking forward to see more suggestions for this library so that together we can make this library grow ….

Visit the CodePlex homw page here 

Thanks for all the help and support