Welcome to WindowsClient.net | Sign in | Join
in

WindowsClient.net

Learnings..

May 2008 - Posts

  • (WPF ListView/ TreeView)Get rid of that default (blue) selection colour!!

    As promised this next blog covers a very trivial but important problem. important because i think almost everyone would want to override this default behaviour of WPF and trivial because the solution is actually pretty simple.Atleast its simple now that i know it. it wasn't so simple for me earlier though;-)

    For this blog i feel pictorial rep is gonna be the easiest to follow .OK so the problem is this.

    I have a List View with ListView Items and everytime i select an item it turns Blue with a white foreground. Customer says i want Gray background and Blue font (weird choice i know..but then Customer is the King!). So how do we do this??

    We basically need to tweak the control template of a ListViewItem. Yeah..ListViewItem.. believe me the ListView is not at fault so changing the background, foreground , selection colour etc of the ListView doesn't help (you can try it if you have the time :-)).

    I think Expression Blend is the easiest way to tweak the control template and though as a developer i swear by VS but Blend does get an extra brownie point for this one.. so the following steps help us here. Open Expression Blend, create a new WPF application and put a ListView control on it. Then go on to add a few ListViewItems as follows.

    Do this 2-3 times to add 2-3 List view Items.

    Next get the control template of the ListViewItem.

    This will create a new style for the ListViewItem. It will ask you where you want to create the style. Since this really isn't your project the heirarchy doesn't matter, so keep it in the Window itself

    OK. Now Open the Window.xaml. You will find a new style under the Resources section.

    The Lines i have highlighted are our culprit. You can see a trigger defined for Selection which sets the background and foreground based on dynamic resources picked up depending on the theme of the OS the app is running on.

    So change the trigger values to what YOU want

     <Trigger Property="IsSelected" Value="true">
            <Setter Property="Background" TargetName="Bd" Value="Gray"/>
            <Setter Property="Foreground" Value="Blue"/>
      </Trigger>

    But this is not enough. You have created a style and given it a key. Which means that this style is applicable only to those ListViewItems to specifically subscribe to it saying Style={StaticResource ListViewItemStyle1}. This is not what we want. We want all the Items to follow this style. So remove the "x:key= ListViewItemStyle1" from the style definition.

    This will make the style applicable to all the UI elements of Target Type= "ListViewItem"(lower in the heirarchy ofcourse)

     Now run the app (f5) and select any ListView Item

    Now pick up this style definition and paste it in your app.xaml/ window.xaml depending on the heirarchy you want!

    This works for ListView/ TreeView atleast. I thinkt he same must be true for dropdowns etc also..so hope it helps you somehow!

    Till next time!

    Anshulee

     

  • Removing the Dotted border around selected WPF UI element

    The WPF app i have been working on looks great but there was a small visual irritant which i wasn't being able to get rid of. Everytime i clicked on a UI element..especially a ListViewItem, treeViewitem it would have this default selected look i.e a Blue background with a dotted boundary.Also the default selected look varies depending on the Theme of the OS.

    This Blue Background when selected is defined in the Control Template of the element under the Triggers section and can be commented out/ modified to change the default look.You can even force WPF to use a specific theme irrespective of the OS its working on .Hopefully i will be putting in another entry on how to overwrite the default theme of the OS if you want your app to look consisten across say Vista and Server 2003.

     My problem was the dotted line around the selected item. This would appear in buttons, treeview items, list view items..almost everywhere.

    It took me very long and a lot of trial and error to figure out the property responsible for this dotted line.The property is "FocusVisualStyle". You need to set it to {x:Null} to get rid of that evil dotted line.

     <ListViewItem Content="ListViewItem" FocusVisualStyle= "{x:Null}" />

    So if you are trying to get a smooth look which selecting your items in a Server 2003 environment

    FocusVisualStyle="{x:Null}" is the key!!

    Next in queue:-Getting rid of the default blue selected look and forcing WPF app to use a specific theme!!

    Until next time..

    anshulee

  • Exploring the OBA Composition Reference Toolkit (OCRT) !!

    Microsoft Recently announced version 2 of the OBA Composition Reference Toolkit. Microsoft has released a pretty intensive framework.Looks like the beginning of something big!!

     

    Version 1 had been announced at the Office Developers Conference in San Hose in February 2008. I had the opportunity to be a part of the conference and was pretty impressed with the potential this framework provides.

     The OBA Composition Reference Toolkit or OCRT as its called seems to be targetted at Information Workers who want to explore and experiment with the potential of componentized OBAs to make a composite Business Solution by combining the potential of the component OBAs. The best part is that now these Information workers can create these solutions and even deploy them in sharepoint  at the click of a few buttons..they don't need to run to their IT departments for support.

    The Set up guides and the hands on lab do a good job in explaining all the steps.Since i installed the whole system on  my box let me list down the main points of this app.I went through the source code available in the V2 to figure out some of these things..

    The Installation deploys the following on your system

    1. The OBA Composer:- A smart WPF application which provides an intuitive user interface to interact with the toolkit. View the sample Components installed by the system, mix and match the components to make your own OBA. Save it, deploy it in Sharepoint..view it in IE...use your OBA ..Open it..change it and deploy it again. The Composer does a good job of guiding the user as he composes the OBA. The "provisioning" as its called or deployment of the OBA is shown in a real-time updating window which shows all the components being provisioned etc

    2. Provisioning Service:- This is not very evident but the its the brain of the system.Though it does look like its all "Magic" and the Composer pretty much manages to abstract the complications behind deploying Lists ,VSTOs, invoking workflows, creating databases etc just at the click of a button, the secret lies in the Provisioning Service.The Provisioning Service is a Windows service deployed on your system which does the all the magic behind the scenes and actaully deploys all the components and connects them..

    3. OBA Administration:- Pages added to Application Management of your Sharepoint Central Admin to enable you to upload your own Components, set the security etc. The Components need to be created as per the Component Design and Packaging Guide listed in the documentation. As long as your components adhere to the standards mentioned there..all should be good. So you can upload the components from the Admin Pages and then use the OBA composer to mix and match with the other components to explore further possibilities

    4. Source Code:- This is the best part...The  Code seems to be well written, the OBA Composer is a WPF app and seems to be making use of a lot of WPF concepts like property/data triggers, templates,control templates, run time assignment of icons to tree views, multithreading etc. Should be interesting to explore for someone who wants to see the practical use of these concepts

    The data layer seems to be written in pure LINQ. Extensive use of C# 3.0 and LINQ features all through the application.

    I am glad the source code is exposed. I look forward to exploring it further!!

    Another useful feature was that all this information loaded into the OBA Admin pages and used in the Composer can be "Tagged" .This would help group OBAs based on the industry/domain they cater for.

    If you have ever worked with OBAs(Office Business Applications) or aspire to do so, then installing this OCRT is a must for you to understand the potential of combining the potency of the different independent solutions to create a new business solution.

    If you do install the OCRT, drop me a line .It would be interesting to discuss the potential and possibilities!!

    Meanwhile i intend to explore the source code..esp of the Composer and see if it can help me illustrate a few nice concepts!!

    Till Then!!

    Anshulee

Page view counter