WPF and "Twistori": Part 5

Following on from the previous post I wanted to take the UI that I have so far;

and attempt to style that ListBox over on the right hand side. The first thing I’d do with it is to remove its background;

which stops it being a big white area of the screen. Then I altered its border to use a linear gradient brush.

With that in place, I want to change the template for the CheckBox that is being displayed by the ListBox so I need to go and edit the ItemTemplate for the ListBox which I created in a previous post by just putting a Grid and a CheckBox in it;

and so the item template just looks like this;

and what I can then do is to edit the template of that CheckBox to replace it with my own “design” as in;

The template for the CheckBox looks like this;

and it has some triggers in that you can see certain actions being taken when the element HasContent or IsEnabled – these are probably not so relevant for me and will almost certainly disappear in my template but they are as below;

I want a template that’s more based around a circular “tickbox” so I go ahead and define some UI for that as below;

and that’s just a simple ellipse with a path drawn through it as a Tick mark and another one as a Cross mark and then there’s a content presenter below it. I want to control the visibility of the marks depending on whether the CheckBox is checked or not and so I can set them both to be Visibility=Hidden and then control the visibility from a trigger as in;

Now, I’ve drawn my UI here at a fixed scale and so I tend to wrap a Viewbox around it just to get it to scale up a little and then made sure that Viewbox is doing uniform scaling (its Stretch property).

With that in place I want to tweak a few more properties. Firstly, I want to make sure that my ListBox has its HorizontalScrollBarVisibility set to Disabled (I don’t want horizontal scrolling here) and its VerticalScrollBarVisibility set to Hidden (I might want the list to scroll vertically but I don’t want the scrollbar visible). I also set a margin around the Grid in the ListBox ItemTemplate so that it spaced itself out a little and finally I want to set the Foreground for the CheckBox to white.

With all that in place, running my app now gives me;

It’s moving along a little bit. However, I’d like to make sure that whenever a feed item comes in I highlight search the relevant search term over in the ListBox on the left hand side. From a coding perspective this is easy as in;

    void OnFeedItemAvailable(object sender, AtomFeedItemAvailableEventArgs args)
    {
      Dispatcher.BeginInvoke(new Action(() =>
        {
          displayControl.DataContext = args.FeedItem;
          listSearchTerms.SelectedItem = args.SearchTerm;
          listSearchTerms.ScrollIntoView(args.SearchTerm);
        }));
    }

to highlight the right item in the ListBox. However, it raises this bit of ugliness;

in that the listbox selected item now has this funny white rectangle around it. I don’t want that so how to get rid of it? This selection rectangle is actually placed over the top of this thing by the Item Container and so we need to go and find the style for that thing by editing the Item Container Style;

and then within there editing the template;

which shows that we have a border (and some triggers) wrapped around our ListBox item;

I don’t want that behaviour so I deleted the various triggers and then just added a single new one for the IsSelected event which would give the Border a little BorderBrush and a little Background as in;

and so that means that my UI now looks like this as/when a feed item comes in ( the green background isn’t “so great” but I get away with it );

so that’s better than the white rectangle anyway. I also figure that it might be nice if these items did a little animation and grew/shrank as and when they were made the selected item so I threw in a scale transform on the border;